One more: Online Designer?

[rlhanson]

It says s is null on line 37

here's the code I have...

// JavaScript Document
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];
}
 window.onload = attachBehaviors;

[jmarcv]

attachBehaviors is not working as expected. Are we ready for a PHP solution instead?

[rlhanson]

Sure! Let's do.

[jmarcv]

OK, I am not going to give you the full PHP thing, it looks like there are too many variables. Basically you could create ALL your rows using the method I illustrate below to create all your font options in one loop.

So..... Lets start with this:

 
<!-- Copyright 2005 - 2008 RL Hanson-Online //-->
<?
$fontData=array('443'=>'Arial','444'=>'Book Antiqua Italic','445'=>'Bradley Hand ITC','446'=>'Century Gothic','447'=>'Comic Sans MS','448'=>'Copperplate Gothic Bold','449'=>'Courier','461'=>'edwardian script ITC','462'=>'Garamond','463'=>'Georgia','464'=>'Haettenschweiler','482'=>'Helvetica','483'=>'Impact','484'=>'Lucida Handwriting','485'=>'Monotype Corsiva','486'=>'Tahoma','487'=>'Times New Roman','488'=>'Trebuchet MS','489'=>'Verdana');
$selOptions="";
$jsArray="";
while (list($key,$val) = each($fontData)) {
// Make sel options based on data in $fontData so we can reuse it many times
 $selOptions.="\n<option value=\"$key\">$val</option>";
 $jsArray.="\nfontData[$key]='$val';";
}
// this will create the JS array we had in des_function
echo "<script>\nfontData=[];$jsArray\n</script>";
$selOptions.='<option value="choose" selected="selected">-- Choose Style --</option>';
?>
<script type="text/javascript" src="des_function.js"></script>

Naturally the file probably has to be renamed to php.
Insert the php code above where indicated. It will then create your select options all at once, AND create the JS array you can now dump from des_... (view source and you will see it)

Step 2 is to write your selects like this:

<select name="optn33" id="select_companyName" onChange="changeFont('companyName')">
<?
echo $selOptions;
?>
</select>
....
<select name="optn34" id="select_sloganS"  onChange="changeFont('sloganS')">
<?
echo $selOptions;
?>
</select>

Finally, replace everything in des_function with this.

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

Wanna really get fancy?
in the PHP code, change this:
$selOptions.="\n<option value=\"$key\">$val</option>";
to this:
$selOptions.="\n<option value=\"$key\" style=\"font-family: $val;\">$val</option>";

[rlhanson]

John-Marc,
Thanks so much for your help and guidance. I will be 'out of the loop' for a couple of weeks so will re-read the info then. My husband is returning from Iraq for his 2 week R&R tonight so I will probably not be coding too much. lol

Thanks again!!!! I am starting to understand what the php code is doing, even if I don't totally get how it works. Also have learned to use the errors I get to fix the syntax of the code. (Which is a great improvement!)
Also, starting to get the name/id thing with javascript - so all in all, lights are starting to come on here and there. lol

Have a good couple of weeks, until then...

[jmarcv]

Okay - going skiing for a week myself.

[rlhanson]

Hi John-Marc,
I hope your ski trip went well.

I need help writing a function...

Here's the code I am currently using that I would like to use a function for:

 <?php 
 
if ($optn45 == '493')
  {
 include ("designer/inclayout1_des.html");
   }
 else if ($optn45 == '494')
  {
 include ("designer/inclayout2_des.html");
  }
  else if ($optn45 == '495')
  {
 include ("designer/inclayout3_des.html");
  }
  else if ($optn45 == '496')
  {
 include ("designer/inclayout4_des.html");
  }
 else if ($optn45 == '497')
  {
 include ("designer/inclayout5_des.html");
  } 
  else if ($optn45 == '498')
  {
 include ("designer/inclayout6_des.html");
  } ?>  

I've tried everything that I've found online today without really knowing what type of function I am looking for.
Can you help me with this?

Oh, btw, I finally changed the image names as you suggested - VERY much more easy!

As always, thanks so much!

[jmarcv]

Yep went well, getting ready for another one!

You should try to tell me what it is you want your function to do?

As for this, why not do the same renaming?
Instead of inclayout4_des.html
Why not
inclayout496_des.html
????

Then your whole code would look like this:

 include ("designer/inclayout".$optn45."_des.html"); 
  

OMG! One line!
This assumes optn45 will always have a value.
... and of course, never have to mod the code again if you add stuff.

[rlhanson]

You should try to tell me what it is you want your function to do?

Sorry about that John-Marc!! I guess I figure you have it all by reading my mind anyway! lol

Basically I am passing the information from the choose background and choose layout page, then on this page, if optn2=$optn2 then display the appropriate background image, and if optn45=493 (or 494 or 495...) then display the appropriate layout which is the include file.

Here's the beginning of the code I posted earlier:

 <?php 
   //receiving variables
   $optn2 = $_POST['optn2'];
   $optn45 = $_POST['optn45'];
   
       
   
 if ($optn2 >= '414' && $optn2 <= '417') 
 {   
  echo "<table width='350' height='200' border='0' align='center' cellpadding='0' cellspacing='0' background='designer/images/pics/backgrounds/{$optn2}.jpg' id='cardTemplate'>";
  echo "<tr><td align='center' valign='middle'>";
  echo "<span style='font-family:Verdana, Arial, Helvetica, sans-serif'>";
  }
  if ($optn45 == '493')
  {
 include ("designer/inclayout1_des.html");
   }
 else if ($optn45 == '494')....
?>  

Instead of this...

 <?php 
}
  if ($optn45 == '493')
  {
 include ("designer/inclayout1_des.html");
   }
 else if ($optn45 == '494')....
?>  

I'd like to just type something like this:

 <?php 
}
  get_layout()
}
?>  

At one point I had all the include files displaying, and then none with an error that said the function was undefined but I can't figure it out. Also read about switch statements but I'm basically already doing that with the existing code... don't know if I need an array function that somehow says of optn45 = 493 echo $layout1??

Does that help?

[jmarcv]

Yeah, it helps me realize I did read your mind after all. Whats wrong with the 1 liner I gave you? It does what you want without complicating things with a function.