One more: Online Designer?

[jmarcv]

Are you proud?!

Like a father!

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]

digesting.......

Dont I know it!

[rlhanson]

Hi John-Marc!
I'm back to the online designer...lol

What I have successfully acheived is integrating the online designer with my shopping cart!!! (I know you're proud!)

I had to create a static html page with the input field values assigned to the same values as my db and pass the info to my cart. All works wonderfully except for a couple of small glitches I was hoping you might be able to help with.

In my shopping cart product options, I was able to place the code:

<span style="display:none">Bamboo</span><img src="http://www.rlhanson-online.com/designer/images/pics/backgrounds/thumbnails/3bamboo.jpg">

which displays the background image for the business card and passes the text value to the cart.

Now, the issue I am having is passing the background image to the card preview:

The code on the actual input button from the static page:

<input type="radio" name="optn15" value="414" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(designer/images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;"  id="background" />
                  <span ><span style="display:none">Bamboo</span><img src="http://www.rlhanson-online.com/designer/images/pics/backgrounds/thumbnails/3bamboo.jpg" alt="Bamboo Getaway" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(designer/images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;" />

Code on the static page opening the preview:

<input type="hidden" name="id" value="card" />
  <input type="hidden" name="mode" value="add" />
  <input type="hidden" name="frompage" value="/business_card_center.php" />
  <span class="style12">
 
<input type="button" name="preview" value="Preview" onClick="document.tForm0.target='_blank';document.tForm0.action='card_preview1.php';document.tForm0.submit();document.tForm0.target='_top';document.tForm0.action='cart.php';"/>

Code on the preview page:

 <?php
//PHP CODE - PLEASE DO NOT CHANGE ANYTHING HERE
$background  = $_POST["optn15"];
$company_name  = $_POST["voptn1"];
$slogan     = $_POST["voptn2"];
$name     = $_POST["voptn3"];
$title     = $_POST["voptn4"];
$address_1    = $_POST["voptn5"];
$address_2    = $_POST["voptn6"];
$phone      = $_POST["voptn7"];
$cell      = $_POST["voptn8"];
$email      = $_POST["voptn9"];
$website     = $_POST["voptn10"];
?>  

<table width="350" height="200" align="center" cellpadding="0" cellspacing="0" class="default">
  <tr>
    <td align="center" valign="middle"><table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="0" background="<?php echo $background;?>">
      <tr>
        <td align="center" valign="middle"><table width="325" height="200" border="0" align="center" cellpadding="0" cellspacing="0" id="cardTemplate2">
          <tr>
            <td colspan="3" align="center" valign="bottom" class="companyname"><?php echo $company_name;?></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="top" class="sloganS" id="sloganS"><?php echo $slogan;?><br />
            </td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="bottom" class="name" id="nameS"><?php echo $name;?></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="top" class="titleS" id="titleS"><?php echo $title;?><br />
            </td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="bottom" class="content" id="address1S"><?php echo $address_1;?></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="top" class="content" id="address2S"><?php echo $address_2;?></td>
          </tr>
          <tr>
            <td width="165" align="right" valign="middle" class="content" id="phoneS"><?php echo $phone;?></td>
            <td width="10" align="center" valign="top" class="content">&nbsp;•&nbsp;</td>
            <td width="165" align="left" valign="middle" class="content" id="cellS"><?php echo $cell;?></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="bottom" class="content" id="emailS"><?php echo $email;?></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="top" class="website" id="websiteS"><?php echo $website;?></td>
          </tr>
        </table> </td>
      </tr>
    </table></td>
  </tr>
</table>

1) How do I assign an image value vs. a text value for the card preview? I'm assuming that is what the issue is, or do I have something wrong in my coding for the card preview?

2) Also, remember the font style attributes we assigned?
In the database it has numeric value like value="421" instead of value="8pt"... is there any way to pass the values for the database and the values for the online designer so the online designer displays the correct font size, and the cart receives the right info?

3) I know I am passing the input values to the card preview, is there any way to collect the imput values, go to a "next page" where you can select a quantity, and have all those values passed to the cart from the "next page"?


As always - THANK YOU!!!