One more: Online Designer?

[jmarcv]

subroutines.
It is beyond the scope of the next 10 minutes I have. It will be several days before I am back, but....

#1 is if you had renamed images as I suggested:
This could be used for ALL your images without having to write out theimage name for each one.

document.getElementById('cardTemplate').style.back groundImage='url(designer/images/pics/backgrounds/'+this.value+'.jpg)';


Until then...

[rlhanson]

John-Marc,
I am waiting until I have the majority of images to upload to change the names to the database value....and will come back to this portion of my question then.

New question (are you groaning?) lol

I am working on the font selection for each line of the designer. I have it functioning as radio buttons but want them in list menus.

I found a function which works for one line and one id of the list menus:

function selectCallback(s) 
{  
// This function gets called when selection changes  
 if( s.selectedIndex == -1 ) return;  
 var v = s.options[s.selectedIndex].value; 
 switch(v) {
 case '443':   
 // Change Company Name Font   
 document.getElementById('companyName').style.fontFamily='Arial';   
 break;  
 case '444':
 document.getElementById('companyName').style.fontFamily='verdana';  
 break;  
 default:   
 // Do nothing for other selections 
 break; 
 } 
}
 
function attachBehaviors() 
{ 
 // Attach event handler to your select object  
 var s = document.getElementById("select1");  
 if( s )  
 {  
 s.onchange = function(){selectCallback(s);};  
 }
}
 window.onload = attachBehaviors;

I want to be able to have a function that works for id=select1, id=select2, etc...

id=select2 would change this: document.getElementById('sloganS')
id=select3 would change this: document.getElementById('titleS')

Can you just talk me through this. YOu mentioned looping through things before...

Thanks!

[jmarcv]

Lets say you have 10 selects.

function attachBehaviors() { 
 // Attach event handler to your select objects  
   for (i=1 ; i<11 ; i++){
    var s = document.getElementById("select"+i);  
    if( s ) {  
      s.onchange = function(){selectCallback(s);};  
    }
   }
}

But what you REALLY want is this:
Instead of IDing it select2, make the id id=select_sloganS
select3 is select_titleS

Now, we make an array of our selects - put this aomewhere up top.

selectIDs=['companyName','sloganS','titleS'];

This will create an array with 3 things in it. The nice thing here, is you just add a new element to the array, make sure you create the html and the following code will automatically create it.
Note: arrays start with zero, not 1
The numeric reference is called an 'index'
eg: selectIDs[2] will contain the string 'titleS'

function attachBehaviors() { 
 // Attach event handler to your select objects  
   for (i=0 ; i<selectIDs.length ; i++){
    var s = document.getElementById("select_"+selectIDs[i]);  
    if( s ) {  
      s.onchange = function(){selectCallback(s,selectIDs[i]);};  
    }
   }
}

Note that selectIDs[i] will loop and contain each value each time through. It adds select_ to the name to reference the select, and we pass it to the selectCallback() function, which then gets rewritten like so:

function selectCallback(s,changevar) 
{  
// This function gets called when selection changes  
 if( s.selectedIndex == -1 ) return;  
 var v = s.options[s.selectedIndex].value; 
 var theobjtoChange=document.getElementById(changevar);
 switch(v) {
 case '443':   
 // Change Company Name Font   
 theobjtoChange.style.fontFamily='Arial';   
 break;  
 case '444':
 theobjtoChange.style.fontFamily='verdana';  
 break;  
 default:   
 // Do nothing for other selections 
 break; 
 } 
}

Lets take it one step further
Make 1 special 'lookup' array

fontData=[];
fontData[443]='Arial';
fontData[444]='verdana';

... etc ...
And our code becomes simpler AND permanent.

function selectCallback(s,changevar) 
{  
// This function gets called when selection changes  
 if( s.selectedIndex == -1 ) return;  
 var v = s.options[s.selectedIndex].value; 
 var theobjtoChange=document.getElementById(changevar);
 theobjtoChange.style.fontFamily=fontData[v];
}

Any lights coming on?


Mastering Javascript Arrays

[rlhanson]

rofl!!
Yes, intermittent power to lights as I read through....

You said,

Now, we make an array of our selects - put this aomewhere up top.

This at the top of my html doc or my js file?

So when you see the i++ it's adding one each time it loops through what I have on the page, right?

That's the same concept in php also isn't it? I saw in the function code that same type of coding for the optn name....

Okay - reading through this and trying it out. Thanks so much!

[jmarcv]

... at the top of....

Either one. It just needs to be SOMEWHERE before that onload command.

and yes, i++ is 'increment.
shorthand for
i+=1;
or
i=i+1;

[rlhanson]

What do I put in the <select> tag? Is the function autmatically creating an ID or do I still assign an ID to them?

This is what I have in the js file:

selectIDs=['companyName','sloganS','nameS','titleS','address1S','address2S','phoneS','cellS','emailS','websiteS'];
function attachBehaviors() { 
 // Attach event handler to your select objects  
   for (i=0 ; i<selectIDs.length ; i++){
    var s = document.getElementById("select_"+selectIDs[i]);  
    if( s ) {  
      s.onchange = function(){selectCallback(s,selectIDs[i]);};  
    }
   }
}
fontData=[];
fontData[443]='Arial';
fontData[444]='Book Antiqua Italic';
fontData[445]='Bradley Hand ITC';
fontData[446]='Century Gothic';
fontData[447]='Comic Sans MS';
fontData[448]='Copperplate Gothic Bold';
fontData[449]='Courier';
fontData[461]='edwardian script ITC';
fontData[462]='Garamond';
fontData[463]='Georgia';
fontData[464]='Haettenschweiler';
fontData[482]='Helvetica';
fontData[483]='Impact';
fontData[484]='Lucida Handwriting';
fontData[485]='Monotype Corsiva';
fontData[486]='Tahoma';
fontData[487]='Times New Roman';
fontData[488]='Trebuchet MS';
fontData[489]='Verdana';
function selectCallback(s,changevar) 
{  
// This function gets called when selection changes  
 if( s.selectedIndex == -1 ) return;  
 var v = s.options[s.selectedIndex].value; 
 var theobjtoChange=document.getElementById(changevar);
 theobjtoChange.style.fontFamily=fontData[v];
}

in the html

 
<select name="optn34" id="select1" >
                <option value="443">Arial</option>
                 <option value="444">Bookman</option>
                 <option value="choose" selected="selected">-- Choose Style --</option>   </select>
 
<select name="optn34" id="select2" >
                <option value="443">Arial</option>
                 <option value="444">Bookman</option>
                 <option value="choose" selected="selected">-- Choose Style --</option>   </select>

Sorry, trying to get this.

[jmarcv]

Skimming are you? I said

Instead of IDing it select2, make the id id=select_sloganS
select3 is select_titleS

[rlhanson]

I had tried that, then a few others, then realized I didn't have the onload, then just tried it again...can't seem to get it to work.
I will reskim (lol) in the morning. I actually read it when you posted it this time JohnMarc.

[jmarcv]

Well, keep in mind that select1 is no referenced anywhere, so it CANT work.

You DO use Firefox with firebug so it can tell you exactly what the problem is, right?
Lemee take a look. Whats the URL?

[rlhanson]

Here's the page with the js file:
Untitled Document

Honestly, I didn't know what the firebug errors meant anyway so I haven't been using it.

It may be that I also have a nother font selection on that page, I haven't had enough coffee yet to review.