One more: Online Designer?

[rlhanson]

John-Marc -

If I have 2 vars which display two different layouts, and I have 2 buttons to select the different layouts - do I need some sort of update event in order for the selection to display?

I have this for the vars - the only difference is the class assigned right now

 <?php
  $var_table1 = '<table width="350" height="200" border="0" align="center" cellpadding="5" cellspacing="0" class="cardTemplate_pond" id="cardTemplate">
          <tr>
            <td width="204" rowspan="2" align="left" class="style4" id="companyName" style="margin-left:15px">Company Name </td>
            <td width="130" align="right" class="style6" id="nameS">Name</td>
          </tr>
          <tr>
            <td align="right" class="style9" id="titleS">Title</td>
          </tr>
          <tr align="left">
            <td colspan="2" align="center" class="style6" id="sloganS">Slogan Here</td>
          </tr>
          <tr>
            <td align="left" class="style6" id="address1S">Address Line 1</td>
            <td align="right" class="style6" id="phoneS">Telephone</td>
          </tr>
          <tr>
            <td align="left" class="style6" id="address2S">Address Line 2</td>
            <td align="right" class="style6" id="cellS">Alternate Number</td>
          </tr>
 
          <tr>
            <td align="left" class="style8" id="websiteS">Web Address</td>
            <td align="right" class="style6" id="emailS">e-mail Address</td>
          </tr>
          <tr align="left">
            <td colspan="2" align="center" class="style6" id="addInfoS">Additional Information</td>
          </tr>
</table>';
  $var_table2 = '<table width="350" height="200" border="0" align="center" cellpadding="5" cellspacing="0" class="cardTemplate_eagle" id="cardTemplate">
          <tr>
            <td width="204" rowspan="2" align="left" class="style4" id="companyName" style="margin-left:15px">Company Name </td>
            <td width="130" align="right" class="style6" id="nameS">Name</td>
          </tr>
          <tr>
            <td align="right" class="style9" id="titleS">Title</td>
          </tr>
          <tr align="left">
            <td colspan="2" align="center" class="style6" id="sloganS">Slogan Here</td>
          </tr>
          <tr>
            <td align="left" class="style6" id="address1S">Address Line 1</td>
            <td align="right" class="style6" id="phoneS">Telephone</td>
          </tr>
          <tr>
            <td align="left" class="style6" id="address2S">Address Line 2</td>
            <td align="right" class="style6" id="cellS">Alternate Number</td>
          </tr>
 
          <tr>
            <td align="left" class="style8" id="websiteS">Web Address</td>
            <td align="right" class="style6" id="emailS">e-mail Address</td>
          </tr>
          <tr align="left">
            <td colspan="2" align="center" class="style6" id="addInfoS">Additional Information</td>
          </tr>
</table>';
 
  ?>  

Not sure if this is even remotely correct, but was trying it anyway

<input name="layout" type="radio" value="<?php ($_POST[1]); ?>" />

I can get both layouts to echo, just can't get one to display on selection... I know you're not surprised though. It seems to me that I would have to have an update button or an onClick event to display the correct layout... or am I going in the wrong direction again?

[rlhanson]

You know what?! Now I know why the original example I showed you used an iframe. That way, whenever you clicked a layout example, it loaded into the iframe and used the $_POST... to prefill the form with data passed....

Maybe that is the direction I should be thinking about? What do you recommend John-Marc as far as the prefilling the form or the php way we were discussing lately?

What about the iframe incompatibilty? Is that much of an issue anymore?

[rlhanson]

John-Marc - you are a very smart man.... I needed some time to get myself geared on a definate path with a clear goal (which you knew )! LOL

I could not for the life of me get the hidden input to work and THEN, I figured out we/I was missing a single quote. So, here is the code that is actually working and passing the correct information with my form submission:

<input name="background" type="hidden" id="background" />
        <IMG src="images/rgbblue_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbblue.jpg)';document.getElementById ('background').value=this.src;" /> 
  
  <IMG src="images/yellow_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/yellow.jpg)';document.getElementById ('background').value=this.src;" /> 
  
  <IMG src="images/red_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/red.jpg)';document.getElementById ('background').value=this.src;" />

My new goal:

- Assign particular layouts for particular backgrounds. This includes assigning classes for font color (currently white or black - can be expanded later on).

- Once a layout selection is made, then the user arrives on the page with the form fields for that particular layout.

- Once there, the user can change backgrounds all they want and keep the entries in the form BUT won't be able to change the layout (until I learn how to do that crazy stuff with the php choices! )

Well?

[rlhanson]

John-Marc!!!!!!!!!

I have it all working awesome EXCEPT now the font won't change! Can you take a glance and see if you can tell what I did wrong?!

Untitled Document

[andychev]

Wow thats an impressive script. This isnt an answer but may help you along your way, for the drop down box to select the font you have:

<select name="cardTemplate" onChange="document.getElementById('cardTemplate'). style.fontFamily=this.options[this.selectedIndex].value;"
>

Change it to:

<select name="cardTemplate" onChange="document.getElementById('companyName').s tyle.fontFamily=this.options[this.selectedIndex].value;"
>

Notice i have changed the element id (cardTemplate to companyName), the font will now change on just the company name. Therefor i am guessing there is something wrong with the element id 'cardTemplate'.

[rlhanson]

Wow thats an impressive script.

Thanks AndyChev... it's been all of John-Marc's teaching that's for sure!

I actually just figured out the issue - it was in my css file - had a "body" style for arial, duh!

But, I did just start placing exactly what you suggested for the fonts for each layout area - but it's on a different page.

Thanks so much!

[andychev]

Change the id for the table that encompases the text, i have it as line 237 looks like this:

<tr><td><table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="0" title="cardTemplate" id="cardTemplate1">

change cardTemplate to cardTemplate1 then on the dropdown for the font change it to:

<select name="cardTemplate" onChange="document.getElementById('cardTemplate1') .s tyle.fontFamily=this.options[this.selectedIndex].value;"
>

This should now change the font but will break everything else but it proves the code is good........


Edit: You beat me to the answer, i havent got the css file so was at a disadvantage!

[jmarcv]

Whoa! Andy is right! This is really coming around! Give me a chance to digest.

[jmarcv]

What font? Did you take andys advice? Seems to work for me...

[jmarcv]

FYI - your mushroom template - those are Suilus. In the same general family as porcinis but not as tasty!