Like a father!
Well for one, putting in code like error.js that blocks firefox from showing us what the error is:rolleyes:
Printable View
Ahhhh... sorry about that - commented out the js file. ;)
... and the error is?
Error: document.getElementById(objID) has no properties
Source File: http://www.rlhanson-online.com/designer/301a.js
Line: 24
:)
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.
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:
I thought something like this would work:HTML Code:<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;"/>
But it doesn't - my question: why?HTML Code:onclick="document.getElementById('cardLayout2','cardLayout3','cardLayout4').style.backgroundImage='url(designer/images/pics/backgrounds/small/15dawn.jpg)';document.getElementById ('background').value=this.src;"/>
:)
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
Stick the long string in a VAR and refer to it multiple timesCode: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;"/>
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)
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!Code:<!-- 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>
A useful JS (which can be a REAL pain!) for debugging is alert.Code:<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)');">
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.
digesting.......
(thanks John-Marc)
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:
which displays the background image for the business card and passes the text value to the cart.HTML Code:<span style="display:none">Bamboo</span><img src="http://www.rlhanson-online.com/designer/images/pics/backgrounds/thumbnails/3bamboo.jpg">
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:
HTML Code:<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:
Code on the preview page:HTML Code:<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';"/>
PHP Code:
<?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"];
?>
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?HTML Code:<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"> • </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>
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!!!
I'm Back! And so are you, it looks like?
First of all, static html???? Say it aint so!
#1
You may want to get in the habit of throwing in something like this for debugging, so there are no surprises and 6 day head scratching:
print "DEBUG: optn15 = ".$_POST["optn15"]."<BR>";
-- or --
print "DEBUG: background = ".$background ."<BR>";
-- Your problem will be very obvious. You are assigning the # 415, for example to the background var. Thats great for the DB but it isnt a URL, now is it? You are assuming that is the issue, but poutting in a temp thing like that would make it plain as day, and you could move on.
You need to have a hidden var to hold the URL also when you make the selection. We had a few stacked JS commands in the past to do this.
Personally, rather than a confusing mess like that, I would rename 3bamboo.jpg to 415.jpg
Then you could just do this:
#2 you will need to go back and learn about PHP arrays and loops.Code:<td align="center" valign="middle"><table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.rlhanson-online.com/designer/images/pics/backgrounds/thumbnails/<?php echo $background;?>.jpg">
Not seeing where this is done, I can say, review the sections on arrays.
$pointconvert=array('8pt'->'421','10pt'->'422', .... etc);
This sets up an associative array with points as the 'key' and DBcodes as the 'Value' so you can defibe it once and use it as a 'lookup'
Each DB value of the array is 'associated' with a point size.
.. Or, do it (ughhh!) the sloppy comprehensible way:Code:<input hidden name=SIZEcompanyNameConverted value="<?$pointconvert[$_POST['SIZEcompanyName']]?>">
<input hidden name=SIZEaddressConverted value="<?$pointconvert[$_POST['SIZEaddress']]?>">
#3 You lost me? Hidden vars are how you 'collect' info and pass it to the next page. But you know that already? So is there something I missed?Code:<input hidden name=SIZEcompanyNameConverted value="
<?
if ($_POST['SIZEcompanyName']=='8pt'){
echo '421';
} elseif($_POST['SIZEcompanyName']=='10pt'){
echo '422';
} elseif(...) {
echo '...';
}
?>">
Hope that helps.
I know, I've been away awhile! lol You know, life as it delivers it on it's terms and not mine!Quote:
I'm Back! And so are you, it looks like?
It stinks to do it this way, but unfortunatley I am not equipped (yet!) to know how to modify the shopping cart code to get it to do what I want!Quote:
First of all, static html???? Say it aint so!
In my fantasy world:
I would have the shopping cart code say if $optnshtml = (value) then onclick would update the preview (id) with this...
I would have the images associated with the value in the database so that I could put echo $optn2 and the image would display...
Do you know how I could do that? Right now, when you input a product option you can hard code the image path, and then it shows a radio button with the image next to it, but assigns a value of 414 (for example).
but for now, I am line by line coding every possible background image! Ugh!
**also...when I create a hidden input on the images, I either couldn't get the background name to show in the shopping cart or it would only show the last image possible on the page... which is why I didn't pass hidden information to the next page...
I like this - I could use the same concept for the images too - still a long way from arrays and loops though.Quote:
$pointconvert=array('8pt'->'421','10pt'->'422', .... etc);
This sets up an associative array with points as the 'key' and DBcodes as the 'Value' so you can defibe it once and use it as a 'lookup'
#3 I finally have the preview working with this:
Messy huh?!PHP Code:
<?php
$optn2 = $_POST['optn2'];
if ($optn2 == '414')
{
echo "<table width='325' height='200' border='0' align='center' cellpadding='0' cellspacing='0' background='designer/images/pics/backgrounds/3bamboo.jpg'>";
}
else if ($optn2 == '415')
{
echo "<table width='325' height='200' border='0' align='center' cellpadding='0' cellspacing='0' background='designer/images/pics/backgrounds/9birchlake.jpg'>";
}
?>
I am looking at your code and trying to read on arrays.
My thinking is this:
If a background is chosen, then display this page which has the preview table - but populate the preview tables' background image based on the 1st page's background selection.
Just for your viewing pleasure, this is the code that the incproductbody.php page uses to display product options - if I could figure out how to assign the onclick events like I mentioned in my fantasy world then I could actually use my shopping cart pages to display the designer pages with options and have it update the preview table:
PHP Code:
<form method="post" name="tForm0" action="cart.php" onsubmit="return formvalidator0(this)" style="margin:0px;padding:0px;">
<?php writehiddenvar('id', $rs['pId']);
writehiddenvar('mode', 'add');
writehiddenvar('frompage', str_replace('"', '"', @$thefrompage));
print '<input type="hidden" name="quant" id="qnt'.$Count.'x" value=""/>';
print '<div class="proddescription">';
$shortdesc = $rs[getlangid('pDescription',2)];
if(@$shortdescriptionlimit=='') print $shortdesc; else print substr($shortdesc, 0, $shortdescriptionlimit) . (strlen($shortdesc)>$shortdescriptionlimit ? '...' : '');
print '</div>';
$optionshavestock=true;
$hasmultipurchase = 0;
if(is_array($prodoptions)){
if($noproductoptions==TRUE){
$hasmultipurchase=2;
}else{
if($prodoptions[0]['optType']==4 && @$noproductoptions!=TRUE) $thestyle=''; else $thestyle=' width="100%"';
$optionshtml = displayproductoptions('<strong><span class="prodoption">','</span></strong>',$optdiff,$thetax,FALSE,$hasmultipurchase);
if($optionshtml!='') print '<div class="prodoptions"><table border="0" cellspacing="1" cellpadding="1"'.$thestyle.'>' . $optionshtml . '</table></div>';
$rs['pPrice'] += $optdiff;
}
} ?></form>
What would you do - knowing how to code - to streamline it all?
Thanks sooo much John-Marc!!!
I found this within the incfunctions.php page....
This is using arrays and loops for the different product option input types, right?PHP Code:
<?php //much more above this
function displayproductoptions($grpnmstyle,$grpnmstyleend,&$optpricediff,$thetax,$isdetail,&$hasmulti){
global $rs,$prodoptions,$useStockManagement,$hideoptpricediffs,$pricezeromessage,$noprice,$OWSP,$xxPlsSel,$Count,$optionshavestock,$xxOpSkTx,$noshowoptionsinstock,$showinstock,$showtaxinclusive,$defimagejs,$multipurchasecolumns,$xxSelOpt,$xxClkHere,$startlink,$endlink;
$optpricediff = 0;
$optionshtml = '';
$hasmulti = FALSE;
foreach($prodoptions as $rowcounter => $theopt){
$opthasstock=false;
$sSQL='SELECT optID,'.getlangid('optName',32).','.getlangid('optGrpName',16).',' . $OWSP . 'optPriceDiff,optType,optFlags,optGrpSelect,optStock,optPriceDiff AS optDims,optDefault FROM options LEFT JOIN optiongroup ON options.optGroup=optiongroup.optGrpID WHERE optGroup=' . $theopt['poOptionGroup'] . ' ORDER BY optID';
$result = mysql_query($sSQL) or print(mysql_error());
if($rs2=mysql_fetch_array($result)){
if(abs((int)$rs2['optType'])==3){
$opthasstock=true;
$fieldHeight = round(((double)($rs2['optDims'])-(int)($rs2['optDims']))*100.0);
$optionshtml .= '<tr><td align="right" width="30%">' . $grpnmstyle . $rs2[getlangid('optGrpName',16)] . ':' . $grpnmstyleend . '</td><td align="left"> <input type="hidden" name="optn' . $rowcounter . '" value="' . $rs2["optID"] . '" />';
if($fieldHeight != 1){
$optionshtml .= '<textarea wrap="virtual" name="voptn' . $rowcounter . '" cols="' . (int)$rs2["optDims"] . '" rows="' . $fieldHeight . '">';
$optionshtml .= $rs2[getlangid('optName',32)] . '</textarea>';
}else
$optionshtml .= '<input maxlength="255" type="text" name="voptn' . $rowcounter . '" size="' . $rs2['optDims'] . '" value="' . str_replace('"','"',$rs2[getlangid('optName',32)]) . '" />';
$optionshtml .= '</td></tr>';
}elseif(abs((int)$rs2['optType'])==1){
$optionshtml .= '<tr><td align="right" valign="baseline" width="30%">' . $grpnmstyle . $rs2[getlangid('optGrpName',16)] . ':' . $grpnmstyleend . '</td><td align="left"> ';
do {
$optionshtml .= '<input type="radio" style="vertical-align:middle" onclick="updateoptimage('.$Count.','.$rowcounter.','.($isdetail?'1':'0').',1);' . (($rs['pPrice']==0 && @$pricezeromessage != '') || @$noprice==TRUE ?'dummyfunc':'updateprice' . $Count) . '();" name="optn' . $rowcounter . '" ';
if((int)$rs2['optDefault']!=0) $optionshtml .= 'checked ';
$optionshtml .= 'value="' . $rs2['optID'] . '" /><span ';
if($useStockManagement && $rs['pStockByOpts']!=0 && $rs2['optStock'] <= 0) $optionshtml .= ' class="oostock" '; else $opthasstock=true;
$optionshtml .= '>' . $rs2[getlangid('optName',32)];
if(@$hideoptpricediffs != TRUE && (double)($rs2['optPriceDiff']) != 0){
$optionshtml .= ' (';
if((double)($rs2['optPriceDiff']) > 0) $optionshtml .= '+';
if(($rs2['optFlags']&1)==1)$pricediff = ($rs['pPrice']*$rs2['optPriceDiff'])/100.0;else$pricediff = $rs2['optPriceDiff'];
if(@$showtaxinclusive===2 && ($rs['pExemptions'] & 2)!=2) $pricediff+=($pricediff*$thetax/100.0);
$optionshtml .= FormatEuroCurrency($pricediff) . ')';
if($rs2['optDefault']!=0) $optpricediff += $pricediff;
}
if($useStockManagement && @$showinstock==TRUE && @$noshowoptionsinstock != TRUE && (int)$rs["pStockByOpts"] != 0) $optionshtml .= str_replace('%s', $rs2['optStock'], $xxOpSkTx);
$optionshtml .= '</span>';
if(($rs2['optFlags'] & 4) != 4) $optionshtml .= "<br />\r\n";
} while($rs2=mysql_fetch_assoc($result));
$optionshtml .= '</td></tr>';
}elseif(abs((int)$rs2['optType'])==4){
if(@$multipurchasecolumns=='') $multipurchasecolumns=2;
$colwid=(int)(100/$multipurchasecolumns);
if((int)$rs2['optGrpSelect']!=0 && ! $isdetail){
$hasmulti = 2;
}else{
$index = 0;
do {
if($useStockManagement && $rs['pStockByOpts']!=0 && $rs2['optStock'] <= 0) $oostock=TRUE; else $oostock=FALSE;
if(($index % $multipurchasecolumns) == 0) $optionshtml .= '<tr>';
$optionshtml .= '<td width="'.$colwid.'%" align="left"> <input type="text" name="optn'.$rs2['optID'].'" size="1" '.($oostock?'style="background-color:#EBEBE4" disabled':'').'/>';
$optionshtml .= '<span class="multioption';
if($oostock) $optionshtml .= ' oostock"'; else{ $optionshtml .= '"'; $opthasstock=TRUE; }
$optionshtml .= '> - ' . $rs2[getlangid('optName',32)];
if(@$hideoptpricediffs != TRUE && (double)$rs2['optPriceDiff'] != 0){
$optionshtml .= ' (';
if((double)$rs2['optPriceDiff'] > 0) $optionshtml .= '+';
if(($rs2['optFlags']&1)==1)$pricediff = ($rs['pPrice']*$rs2['optPriceDiff'])/100.0;else $pricediff = $rs2['optPriceDiff'];
if(@$showtaxinclusive===2 && ($rs['pExemptions'] & 2)!=2) $pricediff+=($pricediff*$thetax/100.0);
$optionshtml .= FormatEuroCurrency($pricediff) . ')';
}
if($index==0) $optionshtml .= '<input type="hidden" name="ismulti" value="1" />';
$optionshtml .= '</span></td>';
$index++;
if(($index % $multipurchasecolumns) == 0) $optionshtml .= '</tr>';
} while($rs2=mysql_fetch_assoc($result));
if(($index % $multipurchasecolumns) != 0){
while(($index % $multipurchasecolumns) != 0){
if($index>=$multipurchasecolumns) $optionshtml .= '<td> </td>';
$index++;
}
if(($index % $multipurchasecolumns) == 0) $optionshtml .= '</tr>';
}
$hasmulti = 1;
}
}else{
$optionshtml .= '<tr><td align="right" width="30%">' . $grpnmstyle . $rs2[getlangid('optGrpName',16)] . ':' . $grpnmstyleend . '</td><td align="left"> <select class="prodoption" onchange="' . (($rs['pPrice']==0 && @$pricezeromessage != '') || @$noprice==TRUE ?'dummyfunc':'updateprice' . $Count) . '();updateoptimage('.$Count.','.$rowcounter.','.($isdetail?'1':'0').');" name="optn' . $rowcounter . '" size="1">';
$defimagejs .= 'updateoptimage('.$Count.','.$rowcounter.','.($isdetail?'1':'0').',2);';
$gotdefaultdiff = FALSE;
$firstpricediff = 0;
if((int)$rs2['optGrpSelect']!=0)
$optionshtml .= '<option value="">' . $xxPlsSel . '</option>';
else
if(($rs2['optFlags']&1)==1)$firstpricediff = ($rs['pPrice']*$rs2['optPriceDiff'])/100.0;else $firstpricediff = $rs2['optPriceDiff'];
do {
$optionshtml .= '<option ';
if($useStockManagement && $rs['pStockByOpts']!=0 && $rs2['optStock'] <= 0) $optionshtml .= 'class="oostock" '; else $opthasstock=true;
$optionshtml .= 'value="' . $rs2['optID'] . '"'.((int)$rs2['optDefault']!=0?' selected':'').'>' . $rs2[getlangid('optName',32)];
if(@$hideoptpricediffs != TRUE){
if((double)($rs2['optPriceDiff']) != 0){
$optionshtml .= ' (';
if((double)($rs2['optPriceDiff']) > 0) $optionshtml .= '+';
if(($rs2['optFlags']&1)==1)$pricediff = ($rs['pPrice']*$rs2['optPriceDiff'])/100.0;else $pricediff = $rs2['optPriceDiff'];
if(@$showtaxinclusive===2 && ($rs['pExemptions'] & 2)!=2) $pricediff+=($pricediff*$thetax/100.0);
$optionshtml .= FormatEuroCurrency($pricediff) . ')';
if($rs2['optDefault']!=0)$optpricediff += $pricediff;
}
if($rs2['optDefault']!=0)$gotdefaultdiff=TRUE;
}
if($useStockManagement && @$showinstock==TRUE && @$noshowoptionsinstock != TRUE && (int)$rs["pStockByOpts"] != 0) $optionshtml .= str_replace('%s', $rs2['optStock'], $xxOpSkTx);
$optionshtml .= "</option>\n";
} while($rs2=mysql_fetch_assoc($result));
if(@$hideoptpricediffs != TRUE && ! $gotdefaultdiff) $optpricediff += $firstpricediff;
$optionshtml .= '</select></td></tr>';
}
}
$optionshavestock = ($optionshavestock && $opthasstock);
}
return($optionshtml);
}
Nevermind ... just as lost with this idea!
Before you go with this... I had a thought -
the shopping cart dynamically displays the product images...maybe it would be better to make each background image a product since this is the way the code is already written...
I'm about to peruse my db for a sec...
What do you think about that idea?
Ummm.... I gave yo a MUCH simpler way for your images...
First, rename them
3bamboo.jpg to 414.jpg
9birchlake.jpg to 415.jpg
Then just do this:
Code:<?php
$optn2 = $_POST['optn2'];
echo "<table width='325' height='200' border='0' align='center' cellpadding='0' cellspacing='0' background='designer/images/pics/backgrounds/{$optn2}.jpg'>";
?>
Yes it would and I actually get that now! lol It's been a long weekend - like trying to read chinese...
Now, as I'm sure you guessed... I have another idea....
How would I code this portion:
... to have it say if the optID is optn2 then have this "class" assigned? I know I can change the div class, but don't know how to tell it that only if optn2 is being displayed. Is that possible?PHP Code:
if(is_array($prodoptions)){
if($noproductoptions==TRUE){
$hasmultipurchase=2;
}else{
if($prodoptions[0]['optType']==4 && @$noproductoptions!=TRUE) $thestyle=''; else $thestyle=' width="100%"';
$optionshtml = displayproductoptions('<strong><span class="prodoption">','</span></strong>',$optdiff,$thetax,FALSE,$hasmultipurchase);
if($optionshtml!='') print '<div class="prodoptions"><table border="0" cellspacing="1" cellpadding="1"'.$thestyle.'>' . $optionshtml . '</table></div>';
$rs['pPrice'] += $optdiff;
}
} ?>
My reasoning is this... I have figured out that the shopping cart allows for alt product images based on the product options - and the way I have it coded is to display product options which increase the price - I want to hide the background option in the incproductbody.php page.
Going on to rename images! :)
Anything is possible.
Well I dont see any optID, so I am not sure what you are asking.
You mean if $optID='optn2';
or do you mean if $optID=$_POST['optn2'];
or something else?
In the latter,
#1
This would 'ADD' a class to the div. If the value of optn2 was 415, then it would add the class CLASS415 to the div, with which you could override anything in prodoption or enhance it.Code:$optionshtml = displayproductoptions('<strong><span class="prodoption CUSTOM'.$_POST['optn2'].'">' ,'</span></strong>',$optdiff,$thetax,FALSE,$hasmultipurchase);
If you only need one class for any value of optn2, you could do this:
Code:$extraclass=($_POST['optn2']>0 ? 'optn2class' : '');
$optionshtml = displayproductoptions('<strong><span class="prodoption '.$extraclass.''">' ,'</span></strong>',$optdiff,$thetax,FALSE,$hasmultipurchase);
Yes, this is what I am looking for.Quote:
If you only need one class for any value of optn2
The class I want to assign is hiddenPic
Is this a switch like optn2class or ' '? Or is this where I should place 'hiddenPic'?Code:$extraclass=($_POST['optn2']>0 ? 'optn2class' : '');
Isn't this resulting in prodoptionoptn2class because of the .Code:<span class="prodoption '.$extraclass.'">' ,'</span></strong>',$optdiff,$thetax,FALSE,$hasmultipurchase);
or am I not following this?
I thought it was going to be something like:
but this doesn't work! LOLCode:If ($optionshtml==$_POST['optn2']) print '<div class="hiddenPic"><table border="0" cellspacing="1" cellpadding="1"'.$thestyle.'>' . $optionshtml . '</table></div>';
Code:$extraclass=($_POST['optn2']>0 ? hiddenPic: '');
There is a space. It would end up looking like this:Quote:
Isn't this resulting in prodoptionoptn2class because of the .
or am I not following this?
The way that works is the prodoption class loads first, and the hiddenPic class loads second. hiddenPic would have preference.Code:<span class="prodoption hiddenPic">
This is similar to your #1 problemQuote:
I thought it was going to be something like:
... code ....
but this doesn't work! LOL
optn2 is a code, like 415. $optionshtml appears to be the dynamic html it is creating and then returns to the calling routine at the end. Why would you do such a comparison? Besides, $thestyle is what? Nothing.
okay, I have something wrong in my actual page... back to the drawing board. lol
Thanks for all your hard work today!
Question on using the array to convert it to the db value. Whenever I use a hidden input it doesn't go into the shopping cart information. I don't know why, haven't been able to figure it out, (and would love to use the images as buttons again instead of the radio buttons)!
Here's what I have coded for changing the font style:
I'm using the font selection to change all text in cardTemplate instead of per line (ex. companyName)....Code:<?php
$styleconvert=array('courier'=>'443','verdana'=>'444','amazone bt'=>'445','arial'=>'446','times'=>'447','helvetica'=>'448','sans-serif'=>'449');
?>
<input type="hidden" name="optn25" value="<?php $styleconvert[$_POST['FontcardTemplate']]?>">
<select name="FontcardTemplate" onchange="document.getElementById('cardTemplate').style.fontFamily=this.options[this.selectedIndex].value;">
<option value="courier">Courier</option>
<option value="verdana">Verdana</option>
<option value="amazone bt">Amazone BT</option>
<option value="arial">Arial</option>
<option value="times">Times</option>
<option value="helvetica">Helvetica</option>
<option value="sans-serif">Sans Serif</option>
<option value="choose" selected="selected">-- Choose Style --</option>
</select>
It's changing the text, but not the value from what I can see...
FYI - it takes a few reads to understand what you are doing.
This time I failed. I really dont know what EXACTLY it is you are saying or want.
Did you use my print trick to see what actially IS in 'FontcardTemplate' POST? Because if optn25 is empty, I THINK thats what you are saying, then you need to see what is getting padssed. Because the array command looks fine.
Confusing code, because if your select is on the same page, of COURSE it wont work, because nothing has been posted yet. The array stuff needs to be on the page that gets submitted to.
You have to remember, with PHP, stuff gets loaded in order. It is only with JS that you can go backwards.
Hi John-Marc,
Here's the page I am working on:
Untitled Document
Just below the preview table I have the font selection which will change the font of the entire card based on the select options.
(You can ignore the preview button, I just wanted to learn how to post the info from the designer page to another one.)
When you click on "add to cart" I need the shopping cart to display the font name based on what is in the database.
Similiar to what happens if you select the font on this page:
RL Hanson-Online :: Business Card- Centerbk, Specials
I have managed to pass all the other info by manually assigning the optn# based on the code that from what I gathered loops through and assigns the optn value based on the location on the page (optn0, optn1, optn2).
So, what I am understanding is that this array would have to placed on my cart.php page?
John-Marc - I got it to work with input buttons vs. a select!
Thanks again for all your help! Sometimes it just helps to talk through the code...
I am posting the original designer with the js functions (without my db references) as promised as I am going to be removing the page from my site eventually. :)
Thank you so much for all of your help and especially John-Marc's enduring patience as he tutored me throughout this project!!!!!!
HTML Code:<table width="600" border="0" align="left" cellpadding="20" cellspacing="0">
<tr>
<td><form form="form" id="form1" name="form1" action="" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cont_left"> </td>
<td width="850" rowspan="10" align="center">
<table width="850" border="0" align="right" cellpadding="0" cellspacing="10">
<tr>
<td colspan="7" align="left" valign="top"><strong>Step 2: Customize your Background</strong> </td>
</tr>
<tr>
<td width="100" rowspan="3" align="left" valign="top"><p>
<input name="subject" type="hidden" value="Layout 1" />
<img src="images/pics/backgrounds/thumbnails/3bamboo.jpg" title="Bamboo Hideaway" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;"/> <img src="images/pics/backgrounds/thumbnails/9birchlake.jpg" title="Birch and Small Lake" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/9birchlake.jpg)';document.getElementById ('background').value=this.src;"/><br />
<img src="images/pics/backgrounds/thumbnails/16Egyptian_Desert.jpg" title="Desert Pyramids" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/16Egyptian_Desert.jpg)';document.getElementById ('background').value=this.src;"/>
<input name="noimage" type="radio" tabindex="7" value="transparent" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)'" />
No Image or Uploading Art </p></td>
<td width="74" rowspan="3" align="left" valign="top"><img src="../images/sp.gif" width="15" height="1" /></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top"><table width="310" border="0" align="right" cellpadding="0" cellspacing="10">
<tr>
<td width="80" align="left" valign="top"><img src="../images/sp.gif" width="75" height="1" /><br />
Background Color Mixer: <br />
<div id="colorpicker301" class="colorpicker301"></div></td>
<td width="200" align="left" valign="top"><input type="hidden" name="COLORBkgrd" id="noart" />
<img src="/images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('COLOR','cardTemplate','B')"/>
<input type="text" id="COLORcompanyName" name="COLOR" size="9" />
<br />
<input name="Color_Info" type="checkbox" id="Color_Info" value="checked" />
I understand <strong class="important_bold"><a href="color_info.html" onclick="return GB_showPage('Important Color Information', this.href)">Color Information! </a></strong>(required) <img src="../images/sp.gif" width="200" height="1" /><br />
</td>
</tr>
<tr>
<td width="80" align="left" valign="top"><img src="../images/sp.gif" width="75" height="1" /><br />
Background Color </td>
<td width="200" align="left"><p><img src="../images/sp.gif" width="160" height="1" /><br />
<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;" /> <img src="images/purple_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/purple.jpg)';document.getElementById ('background').value=this.src;" /> <img src="images/cmykgreen_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/cmykgreen.jpg)';document.getElementById ('background').value=this.src;"/> <img src="images/rgbgreen_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbgreen.jpg)';document.getElementById ('background').value=this.src;"/></p></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><strong>Step 3: Input your Information</strong> - all information is optional. </td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><table width="300" border="0" align="right" cellpadding="0" cellspacing="0" class="input_table">
<tr>
<td><table width="300" border="0" align="right" cellpadding="0" cellspacing="10">
<tr>
<td width="75" align="left" valign="top">Company Name </td>
<td width="28"> </td>
<td width="225" align="left" valign="top"><p>
<input name="company_name" type="text" id="company_name" tabindex="5" onchange="document.getElementById('companyName').innerHTML=this.value;" size="25" maxlength="50" />
<select name="SIZEcompanyName" onchange="document.getElementById('companyName').style.fontSize=this.options[this.selectedIndex].value;">
<option value="8pt">8</option>
<option value="10pt">10</option>
<option value="12pt">12</option>
<option value="14pt">14</option>
<option value="18pt" selected="selected">18</option>
</select>
<select name="companyNameColor" tabindex="1" onchange="document.getElementById('companyName').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select>
<input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" />
<img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? 'normal' : 'bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
<input type="hidden" name="ITALcompanyName" id="ITALcompanyName" />
<img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALcompanyName').value=(document.getElementById('ITALcompanyName').value=='italic' ? 'normal' : 'italic'); document.getElementById('companyName').style.fontStyle=document.getElementById('ITALcompanyName').value;"/></p></td>
</tr>
<tr>
<td width="75" align="left" valign="top">Slogan</td>
<td width="28"> </td>
<td width="225" align="left" valign="bottom"><input name="slogan" id="slogan" type="text" tabindex="6" size="25" maxlength="100" onchange="document.getElementById('sloganS').innerHTML=this.value;" />
<select name="SIZEslogan" onchange="document.getElementById('sloganS').style.fontSize=this.options[this.selectedIndex].value;">
<option value="8pt">8</option>
<option value="10pt" selected="selected">10</option>
<option value="12pt">12</option>
<option value="14pt">14</option>
<option value="18pt">18</option>
</select>
<select name="sloganColor" tabindex="1" onchange="document.getElementById('sloganS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select>
<input type="hidden" name="BOLDslogan" id="BOLDslogan" />
<img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDslogan').value=(document.getElementById('BOLDslogan').value=='bold' ? 'normal' : 'bold'); document.getElementById('sloganS').style.fontWeight=document.getElementById('BOLDslogan').value;"/>
<input type="hidden" name="ITALcslogan" id="ITALslogan" />
<img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALslogan').value=(document.getElementById('ITALslogan').value=='italic' ? 'normal' : 'italic'); document.getElementById('sloganS').style.fontStyle=document.getElementById('ITALslogan').value;"/> </td>
</tr>
<tr>
<td width="75" align="left" valign="top">Full Name </td>
<td width="28"> </td>
<td width="225" align="left" valign="bottom"><input name="name" type="text" id="name" tabindex="7" size="25" maxlength="50" onchange="document.getElementById('nameS').innerHTML=this.value;" />
<select name="SIZEname" onchange="document.getElementById('nameS').style.fontSize=this.options[this.selectedIndex].value;">
<option value="8pt">8</option>
<option value="10pt" selected="selected">10</option>
<option value="12pt">12</option>
<option value="14pt">14</option>
<option value="18pt">18</option>
</select>
<select name="nameColor" tabindex="1" onchange="document.getElementById('nameS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select>
<input type="hidden" name="BOLDname" id="BOLDname" />
<img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('nameS').style.fontWeight=document.getElementById('BOLDname').value;"/>
<input type="hidden" name="ITALname" id="ITALname" />
<img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALname').value=(document.getElementById('ITALname').value=='italic' ? 'normal' : 'italic'); document.getElementById('nameS').style.fontStyle=document.getElementById('ITALname').value;"/> </td>
</tr>
<tr>
<td width="75" align="left" valign="top">Job Title </td>
<td width="28"> </td>
<td width="225" align="left"><input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" onchange="document.getElementById('titleS').innerHTML=this.value;" />
<br />
<select name="titleColor" id="titleColor" tabindex="1" onchange="document.getElementById('titleS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" align="left" valign="top">Address - Line 1 </td>
<td width="28"> </td>
<td width="225" align="left"><input name="address_1" type="text" id="address_1" tabindex="9" size="25" maxlength="100" onchange="document.getElementById('address1S').innerHTML=this.value;" />
<br />
<select name="address1Color" id="address1Color" tabindex="1" onchange="document.getElementById('address1S').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" align="left" valign="top">Address - Line 2 </td>
<td width="28"> </td>
<td width="225" align="left"><input name="address_2" type="text" id="address_2" tabindex="10" size="25" maxlength="100" onchange="document.getElementById('address2S').innerHTML=this.value;" />
<br />
<select name="address2Color" id="address2Color" tabindex="1" onchange="document.getElementById('address2S').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" align="left" valign="top">Telephone</td>
<td width="28"> </td>
<td width="225" align="left"><input name="phone" type="text" id="phone" tabindex="12" size="25" maxlength="15" onchange="document.getElementById('phoneS').innerHTML=this.value;" />
<br />
<select name="phoneColor" id="phoneColor" tabindex="1" onchange="document.getElementById('phoneS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" align="left" valign="top">Cell </td>
<td width="28"> </td>
<td width="225" align="left"><input name="cell" type="text" id="cell" tabindex="13" size="25" maxlength="15" onchange="document.getElementById('cellS').innerHTML=this.value;" />
<br />
<select name="cellColor" id="cellColor" tabindex="1" onchange="document.getElementById('cellS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" align="left" valign="top">e-mail Address </td>
<td width="28"> </td>
<td width="225" align="left"><input name="email" type="text" id="email" tabindex="15" size="25" maxlength="50" onchange="document.getElementById('emailS').innerHTML=this.value;" />
<br />
<select name="emailColor" id="emailColor" tabindex="1" onchange="document.getElementById('emailS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select></td>
</tr>
<tr>
<td width="75" height="54" align="left" valign="top">Website Address </td>
<td width="28"> </td>
<td width="225" align="left" valign="bottom"><input name="website" type="text" id="website" tabindex="16" size="25" maxlength="100" onchange="document.getElementById('websiteS').innerHTML=this.value;" />
<br />
<select name="websiteColor" id="websiteColor" tabindex="1" onchange="document.getElementById('websiteS').style.color=this.options[this.selectedIndex].value;">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
<option selected="selected">Color</option>
</select>
<input type="hidden" name="BOLDwebsite" id="BOLDwebsite" />
<img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('websiteS').style.fontWeight=document.getElementById('BOLDname').value;"/>
<input type="hidden" name="ITALwebsite" id="ITALwebsite" />
<img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALname').value=(document.getElementById('ITALname').value=='italic' ? 'normal' : 'italic'); document.getElementById('websiteS').style.fontStyle=document.getElementById('ITALname').value;"/> </td>
</tr>
<tr>
<td width="75" align="left" valign="top">Name your Job: </td>
<td width="28"> </td>
<td width="225" align="left"><input name="jobname" type="text" id="jobname" size="25" maxlength="25" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<br /></td>
<td width="375" rowspan="2" align="left" valign="top"><table width="375" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" align="center" valign="top"><p>
<input name="button2" type="button" onclick="history.go(-1)" value="Change Layout" />
</p>
<table width="350" height="200" border="1" align="center" cellpadding="0" cellspacing="0" id="cardTemplate">
<tr>
<td align="center" valign="middle"><table width="325" height="200" border="0" align="center" cellpadding="0" cellspacing="0" id="cardTemplate">
<tr>
<td colspan="3" align="center" valign="top" class="companyname" id="companyName">Company Name </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="sloganS" id="sloganS">Slogan<br /> </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="name" id="nameS">John W. Doe </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="titleS" id="titleS">Title<br /> </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="content" id="address1S">1234 Any Street </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="content" id="address2S">Any Town, US 12345 </td>
</tr>
<tr>
<td width="165" align="right" valign="top" class="content" id="phoneS">Telephone 1</td>
<td width="10" align="center" valign="top" class="content"> • </td>
<td width="165" align="left" valign="top" class="content" id="cellS">Telephone 2</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="content" id="emailS">email address </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" class="website" id="websiteS">website</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
Font Style:
<select name="cardTemplate" onchange="document.getElementById('cardTemplate').style.fontFamily=this.options[this.selectedIndex].value;">
<option value="courier">Courier</option>
<option value="verdana">Verdana</option>
<option value="amazone bt">Amazone BT</option>
<option value="arial">Arial</option>
<option value="times">Times</option>
<option value="helvetica">Helvetica</option>
<option value="sans-serif">Sans Serif</option>
<option value="choose" selected="selected">-- Choose Style --</option>
</select>
<p></p>
<label> Additional Info:
<textarea name="add_info" cols="25" id="add_info"></textarea>
<br />
<br />
<input name="approval" type="checkbox" id="approval" value="approve" />
</label>
I approve Design! (required)<br />
<span class="content_heading"><br />
Your e-Mail Address:</span><br />
(Required to submit design!)<br />
<input name="vis_email" type="text" id="vis_email" size="25" maxlength="50" />
<br />
<br />
<input type="submit" name="Submit" value="Submit your Design!" /></td>
</tr>
</table></td>
<td width="1" rowspan="2" align="left" valign="top"> </td>
</tr>
</table>
</td>
<td align="left" valign="top" class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"> </td>
</tr>
<tr>
<td class="cont_left"> </td>
<td class="cont_right"></td>
</tr>
</table></form>
</td>
</tr>
</table>
Well Yee Haw then!
Don't get too excited John-Marc! lol
I have many, many more questions still!:thud:
Thanks so much - I have never had anyone totally stick with me as I ask the most obvious questions and for as many as I ask... I truly appreciate your help!
Good morning! I'm back with a couple of questions...
I have accomplished:
-placing the color selector on the page for both the background and the font color.
-successfully updating the preview with the selections
-successfully pass this information to the cart
-learned much more about ID's and stacking js to have mutliple events happen, which is where my question comes in...
I have the js stacked so that if a background image is selected, the background color text box displays a value of "no color". I also have it to where if a background color is selected, the background image button becomes unchecked. Awesome huh?!
The way I achieved the unchecked value is to assign a unique ID to each background image button (id=bkgrd1, id=bkgrd2)...as when I just assign one ID it doesn't uncheck.
Since I will have many images, how can I avoid having to write each and every event for each and every id?
Background Image:
Background Color:Code:<input type="radio" id="bkgrd_image" name="optn2" value="414" onclick="updateoptimage(0,2,0,1);updateprice0();document.getElementById('cardTemplate').style.backgroundImage='url(designer/images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;document.getElementById('background').value='No Color';" />
Thanks in advance!Code:<input type="hidden" name="optn23" value="479" id="noart" />
<img src="/images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('voptn23','cardTemplate','B');document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image').checked=false;document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image2').checked=false;document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image3').checked=false;"/>
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...
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:
I want to be able to have a function that works for id=select1, id=select2, etc...Code: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;
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!
Lets say you have 10 selects.
But what you REALLY want is this:Code: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);};
}
}
}
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.
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.Code:selectIDs=['companyName','sloganS','titleS'];
Note: arrays start with zero, not 1
The numeric reference is called an 'index'
eg: selectIDs[2] will contain the string 'titleS'
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:Code: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]);};
}
}
}
Lets take it one step furtherCode: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;
}
}
Make 1 special 'lookup' array
... etc ...Code:fontData=[];
fontData[443]='Arial';
fontData[444]='verdana';
And our code becomes simpler AND permanent.
Any lights coming on?Code: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];
}
Mastering Javascript Arrays
rofl!!
Yes, intermittent power to lights as I read through....
You said,
This at the top of my html doc or my js file?Quote:
Now, we make an array of our selects - put this aomewhere up top.
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! :)
... 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;
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:
in the htmlCode: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];
}
Sorry, trying to get this.Code:
<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>
Skimming are you? I said
Quote:
Instead of IDing it select2, make the id id=select_sloganS
select3 is select_titleS
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. :)
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?
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. :)