One more: Online Designer?

[jmarcv]

Originally Posted by rlhanson

Are you proud?!

Like a father!

Originally Posted by rlhanson

Are you proud?! The only problem is the colorpicker doesn't work in firefox. What am I doing wrong?

Well for one, putting in code like error.js that blocks firefox from showing us what the error is

[rlhanson]

Ahhhh... sorry about that - commented out the js file.

[jmarcv]

... and the error is?

[rlhanson]

Error: document.getElementById(objID) has no properties
Source File: http://www.rlhanson-online.com/designer/301a.js
Line: 24

[jmarcv]

Hard to follow, so I will leave that for now, but if you follow the code to see what objID is, its the first ID you pass to the color routine. COLOR.
Thing is, you don't have anything with an ID of color. You have an element with BANE of COLOR, but 99% of the time you will find errors deal with referencing non-existant or incorrectly IDed elements.

[rlhanson]

I have a question on stacking the js....

on this page: RL Hanson-Online Business Card Designer ...
I have a sample of backgrounds which populate the layout examples. I figured out how to make the selection populate multiple layout examples by coding this:

<img src="designer/images/pics/backgrounds/thumbnails/15dawn.jpg" alt="dawn" width="100" height="60" border="1" style="cursor:pointer" onclick="document.getElementById('cardLayout2').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById('cardLayout5').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById('cardLayout6').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById('cardLayout7').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById ('background').value=this.src;"/>

I thought something like this would work:

onclick="document.getElementById('cardLayout2','cardLayout3','cardLayout4').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById ('background').value=this.src;"/>

But it doesn't - my question: why?

[jmarcv]

Simple. Because JS does not support more than one parameter for getElementById.
Stacking JS is fine for simple jobs, but it may be time to learn functions.
Now before functions, you can do this

onclick="BGIM='url(designer/images/pics/backgrounds/small/15dawn.jpg)'; document.getElementById('cardLayout2').style.backgroundImage=BGIM; document.getElementById('cardLayout5').style.backgroundImage=BGIM; document.getElementById('cardLayout6').style.backgroundImage=BGIM; document.getElementById('cardLayout7').style.backgroundImage=BGIM; document.getElementById ('background').value=this.src;"/>

Stick the long string in a VAR and refer to it multiple times
Functions. If you can grasp this,you will never go back!
Now a simple function makes stacked JS more readable because line feeds are allowed in a function, but not in an "onClick"
With functions, if you can grasp my example, a whole new world opens up.
A world where recycling gives us ease and readability.
The idea is, we create a 'function' and then in the onClick we pass a value to the function and the function will do something with that value.
That way we can have many images using the one function and the function 'personalizes' what it does based on what it is given.
Important concepts. In JS, // is a comment line - it is ignored.
A variable is a container that can hold a value and be refered to later.
A string is data and is surrounded by quotes. strings can be strung together with + signs (concatenation)

<!-- First, we make the onClick go to our function, passing the name of the jpg-->
<img src="designer/images/pics/backgrounds/thumbnails/15dawn.jpg" alt="dawn"
  onclick="changeBG('15dawn.jpg)');"
// Now, usually up in the HEAD section, we declare the function 
<script>
 // set up 2 vars ONCE for recycling
var thumb='designer/images/pics/backgrounds/thumbnails/';
var small='designer/images/pics/backgrounds/small/'
// Declare the function (as many as you like!) specify that whatever gets sent to the function
// will go into a var called "thejpg"
function changeBG(thejpg) {
      // Hopefully this isn't too much at once - we assemble the background values on the fly.
      // We make a string with the beginning of the url command, then we add our image path,
      // then we add the string that got sent to us, and add the closing parenth.
   var thumburl='url('+thumb+thejpg+')';
   var smallurl='url('+small+thejpg+')';
      // Now we plug them in!
   document.getElementById('cardLayout2').style.backgroundImage=thumburl;
   document.getElementById('cardLayout5').style.backgroundImage=thumburl;
   document.getElementById('cardLayout6').style.backgroundImage=thumburl;
   document.getElementById('cardLayout7').style.backgroundImage=thumburl;
   document.getElementById ('background').value=smallurl;
}
</script>

Wow! Is that more readable or what? In addition, the biggest bonus is you just simplified all your other onClicks, AND made it less likely for a typo! And if you want to change something, you do it in ONE place instead of the PITA of going into every one of your images!

<img src="designer/images/pics/backgrounds/thumbnails/15dawn.jpg" alt="dawn"
  onclick="changeBG('15dawn.jpg)');">
<img src="designer/images/pics/backgrounds/thumbnails/purpleflower_sm.jpg" alt="dawn"
  onclick="changeBG('purpleflower_sm.jpg)');">

A useful JS (which can be a REAL pain!) for debugging is alert.
onClick="alert('Hello World!');"
onClick="myVar='Hello World!'; alert(myVar);"
Both of this will make a popup with the same thing. The second line is pretty useless but illustrates the concept of a variable.
I will let you digest that one for a while.

[rlhanson]

digesting.......

(thanks John-Marc)

[jmarcv]

Originally Posted by rlhanson

digesting.......

Dont I know it!