One more: Online Designer?

[jmarcv]

I did run into a couple of glitches as I was changing things.
When I added the images to select as a background, I lost the ability to go back and select a color.
So, what I did was make the color selection a drop down menu list, and then added "no image" to the buttons for the background images with a value of a clear pixel gif.
For some reason, if I just left the value as "transparent" it still would not allow the color change.
Anyway, it works this way to be able to go back and forth.

Take note of what I have said about stacking JS commands.

Give this an id so you can access it

<input id=noImageRadio name="radiobutton" type="radio" tabindex="7" value="transparent" onClick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)'" />
        No Image <br />

and stack up some javascript
eg:

<input name="radiobutton" type="radio" id="purple" value="#9900FF" tabindex="3"
 onClick="document.getElementById('cardTemplate').style.backgroundColor=this.value; 
document.getElementById('noImageRadio').checked=true; 
document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';" />

Untested, but that is the general concept.

I put the JS commands on separate lines for reading purposes, but in code they need to be on the same line.

[rlhanson]

John_marc,
Thank you. I know you are breaking this down to the simplest of terms - to be completely honest - I'm totally lost. Maybe I'm over thinking this or maybe it's because it's like chinese to me right now.

At this point the color picker pops ups and allows a user to pick a color. Which is fine for now. I give.

Question that I do have, which I hope is something I grasp...If I wanted to change the

 <input type="Checkbox" name="BOLDcompanyName" value="yes" onClick="document.getElementById('companyName').style.fontWeight=(this.checked ? 'bold' : 'normal');">

to have an image, so far I have this:

<input type="image" name="BOLDcompanyName" src="../images/designer/bold.jpg"/>

Why, when I add the onChange or onMouseup or onClick - does it submit the form?

[jmarcv]

<input type="image">

This is a submit image in HTML. What you want is:

<input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
<IMG src="../images/designer/bold.jpg" style="cursor:pointer"
  onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? normal' : ''bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>

Did you follow that?

More complicated but pertier? Try this:

 <IMG src="/images/designer/normal.jpg" style="cursor:pointer"
  onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');
this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg') : '/images/designer/normal.jpg');
  document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>

Again, I added linefeeds to make it more visible here. NEVER use linefeeds in an onClick, onMouse or anything but a function (which we have not gone into, but may need to soon depending on how you catch up).
Now your bold button can change its image to show if it is pressed in or not, providing you provide the 2 images.

So, what we are doing is, we script a hidden text area to store our result.
input type="hidden"
and we use an image with an onClick. That will not submit the form.
And since an image does not pass a POST value, that is why we need the hidden one, sort of like a scratch pad.

NOW, The onClick in detail.
First command,

 document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');

This is our hidden object
document.getElementById('BOLDcompanyName')
This is what it contains.
document.getElementById('BOLDcompanyName').value

So what do we assign to it? This.

 document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold')

If the value is bold, change it to normal. Otherwise make it bold. A simple toggle.
BOLDcompanyName = (condition ? value if true : value if false)

OK, so BOLDcompanyName now contains the value we want, so lets change the image to show that.

Second command,
Is it bold? Then change our image src to the bold image, otherwise show the normal image again

 this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg' : '/images/designer/normal.jpg');)

Third Command: Change the style of companyName in the preview to whatever the value is in BOLDcompanyName

document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;

Voila!
Now I have kept the long form of everything so you can see it better. As an example, this is how I myself would do it, but while it is more readable to me, its not good for beginners. So, for the curious:

 <IMG src="/images/designer/normal.jpg" style="cursor:pointer"
  onClick="boldObj=document.getElementById('BOLDcompanyName');
  boldvar=(boldObj.value==bold ? 'normal' : 'bold');
  this.src='/images/designer/'+boldvar+'.jpg';
  document.getElementById('companyName').style.fontWeight=boldvar;"/>

... or maybe it looks less chinese?

[rlhanson]

Okay - I got the last part for the bold and italic images, and I even used the same concept for the color picker button - so everything looks pretty now.

I finally (kind of) got the color picker to change the companyName after reading back a little on the name and id thing, and trying different combinations. The really funny thing is the only way the color changes is to click on the colorpicker image, select the color, click on the colorpicker image again - and this is when the color changes in the cardTemplate.

SO...I know I have the change function screwy, it's not updating from the text field that the colrpicker is updating...anyway - I'm still thinking through this.

I originally couldn't get any of the examples to work, then managed to get the 1st one working after looking very closely at the syntax - and woohoo actually recognized a typing error! Are you proud yet? No, well, I'm still hanging in there!

Here's the code I have with the screwy color picker thing and the successful bold/italic code:

<input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
<IMG src="../images/designer/bold.jpg" style="cursor:pointer" onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? 'normal' : 'bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
<input type="hidden" name="ITALcompanyName" id="ITALcompanyName" >
<IMG src="../images/designer/italic.jpg" style="cursor:pointer" onClick="document.getElementById('ITALcompanyName').value=(document.getElementById('ITALcompanyName').value=='italic' ? 'normal' : 'italic'); document.getElementById('companyName').style.fontStyle=document.getElementById('ITALcompanyName').value;"/>
 
<div id="colorpicker301" class="colorpicker301"></div>
<input type="hidden" name="COLORcompanyName" id="COLORcompanyName" /> <IMG src="../images/designer/color.jpg" style="cursor:pointer" onClick="showColorGrid3('COLOR','none');document.getElementById('companyName').style.color=document.getElementById('COLOR').value; ">&nbsp;<input type="text" ID="COLORcompanyName" name="COLOR" size="9" />

Just thought you'd like to see it working a bit.

[jmarcv]

Yes I am proud!

As for the color picker, see the last post on page 4 that ends with ... to be continued.

Here is the key:

Let me save you the agony. Javascript is not modal. Which means, it won't wait for you to choose a color. It will execute the color picker and then do the second part quicker than you can even focus on the colors, no matter what strength your coffee is.

To understand this. Pick red. No change. Now pick green. It changes to red.
Now pick yellow. It changes to green.

The obvious way to fix this is to modify the color picker function, but:

//NOTE: Permission given to use this script in ANY kind of applications IF
// script code remains UNCHANGED and the anchor tag "powered by FCP"
// remains valid and visible to the user.

so it is still to be continued. I just need more time to come up with an inventive solution that is educational, instead of just a 'fix'

[rlhanson]

I did remember the "to be continued" but thought I would try anyway.

Is it the particular colorpicker that I am using or the way that I am using it which causes the issue with code?

[jmarcv]

hunny! The script is fine, but the license says you can't modify it. The script hasn't a clue that you want to change TWO things. So, 3 options.

Respect the programmer, find a workaround
Respect the programmer, ask for permission to modify the script.
Screw the programmer and modify.

[rlhanson]

ROFL!

I'll try to contact the programmer and see if we can get permission, how's that sound?

[rlhanson]

Subject: Re: customizing
Tue 10/30/2007 10:56 PM

Lynne,

Yes, you do have permission to modify the code as long as you keep the credit and link code of the Free-Color-Picker script.

As a courtesy, if you can, allow me the pleasure of seeing the finished work. I am compiling a list of apps that have utilized the FCP and will publish them on the next web site re-dev.

Thank you for your request!

David Baker
support@free-color-picker.com

Yeah!!!!!!!!!!!!!!!!

[rlhanson]

John-Marc,

Quick question...
on the hidden input that changes the image background on the cardTemplate design view:

If I have multiple images to choose from for the background, how do I pass a value of which one was selected with my form?

here's the code I have:

<input name="eagle" type="hidden" id="eagle">
      <img src="images/pics/eagle_th.jpg" alt="eagle" style="cursor:pointer" onclick="document.getElementById ('cardTemplate').style.backgroundImage='url(images/pics/eagle.jpg)'">
 
      <input name="pond" type="hidden" id="hidden2">
      <img src="images/pics/pond_th.jpg" alt="pond" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/pond.jpg)'">
 
      <input name="sunset" type="hidden" id="hidden3" />
      <img src="images/pics/sunset_th.jpg" alt="sunset" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/sunset.jpg)'" /><br />
 
      <input name="orangeflower" type="hidden" id="hidden4">
      <img src="images/pics/orange_flower_sm.jpg" alt="orange flower" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/orange_flower.jpg)'">
 
      <input name="purpleflower" type="hidden" id="hidden5" />
      <img src="images/pics/purpleflower_sm.jpg" alt="purple flowers" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/purpleflower.jpg)'" />

and the results in my email:

On Sunday 25th of November 2007 19:12:11
Here are the details of the form submission:
company_name: RL Hanson-Online
SIZEcompanyName: 14pt
BOLDcompanyName: bold
ITALcompanyName:
slogan: Testing form again
SIZEslogan: 10pt
BOLDslogan:
ITALcslogan:
name: test
SIZEname: 10pt
BOLDname:
ITALname:
title: test
address_1: test address
address_2: test city
phone: test telephone
cell: test cell
vis_email: test support@rlhanson-online.com
website: Test.com Web Based Testing Software
add_info: test
eagle:
pond:
sunset:
orangeflower:
purpleflower:
cardTemplate: arial
COLORtext:
COLOR: #FFFFFF
approval: approve
Submit: Submit Design!

here's the page: Untitled Document

Thanks,
Lynne