Jiasheng Posted March 9, 2006 Share Posted March 9, 2006 I set up JavaScript to display multiple layers according to selection made on 3 drop-down lists. The hidden layer shows up accordingly with the corresponding selection made. But there is a problem!I align the layers with style sheet and set its position to absolute with corresponding top and left positions. The HTML document does not occupy the full window screen. It is centered using div align=center. My layers are aligned to the rest of the HTML documents based on screen resolution 1024x768. If users use a different screen resolution, the layers will be shown offsided.I tried to use relative position to position the layers with the rest of the document, but relative alignment creates a lot of blank spaces at the bottom of the layers, especially if you are dealing with 25 layers. The blank spaces seem to "stack up" for relative positioning.I try to use Javascript window.innerWidth to adjust the table width within the layer, but it seems that JavaScript does not work within layers. Is there any solution to this problem? Deeply appreciate any help you can offer! Thank you! Link to comment Share on other sites More sharing options...
Webworldx Posted March 9, 2006 Share Posted March 9, 2006 It'd be great to see a working example of where you are at the moment for this, as i'm slightly lost on where these layers are appearing on the page! Link to comment Share on other sites More sharing options...
Jiasheng Posted March 10, 2006 Author Share Posted March 10, 2006 It'd be great to see a working example of where you are at the moment for this, as i'm slightly lost on where these layers are appearing on the page!<{POST_SNAPBACK}> Yes, you can see a working example at http://www.lomont.com/quotes/form1.htmIf you are using screen resolution 1024x768, the data field "Sign Wording" is aligned properly with the other data fields. The Sign Wording data field is offsided if other screen resolution is used.#set1 { position:absolute; top:388px; left:156px; color:#000000; visibility:hidden; }...... and so on. Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 Yes, you can see a working example at http://www.lomont.com/quotes/form1.htmIf you are using screen resolution 1024x768, the data field "Sign Wording" is aligned properly with the other data fields. The Sign Wording data field is offsided if other screen resolution is used.#set1Â { position:absolute; top:388px; left:156px; color:#000000; visibility:hidden; }...... and so on.<{POST_SNAPBACK}> The link you provided didn't work But a wild guess tells me that your page is probably centered and reading your style above, position:absolute that's your problem, the page will move with a higher resolution but your menu wont.Cant say for sure though without a working link Link to comment Share on other sites More sharing options...
Jiasheng Posted March 10, 2006 Author Share Posted March 10, 2006 Yes, you are right on your guess! "The page is centered and reading your style above, position:absolute that's your problem, the page will move with a higher resolution but your menu wont."The correct link is http://www.lomontimt.com/quotes/form1.htm. Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 That's it fixed Your problem was that you had put the sign wording menu in a table of it's own and it wasn't part of the other lists. I just merged it with the main table and it looks fine. <html><head><TITLE>Quality signs for your business with in-mold technology - Lomont IMT</TITLE><META NAME="Description" CONTENT="Signs -Use signs from Lomont IMT to indicate that an immediate hazard exists which could cause death or serious injury."><META NAME="Keywords" CONTENT="danger signs, caution sign, warning signs, traffic signs"><META NAME="Robots" CONTENT="index,follow"><META NAME="Revisit-after" CONTENT="30"><base href="http://lomontimt.com.temp.server102.com/productcart/pc/"><style type="text/css">@import "lomontimt.css";</style><link href="http://www.lomontimt.com/css/stylesheet.css" rel="stylesheet" type="text/css"><link href="http://www.lomontimt.com/quotes/style.css" rel="stylesheet" type="text/css"><script language="JavaScript" src="http://www.lomontimt.com/quotes/script.js"></script></head><body onLoad="setdefault()"><div align="center"><center><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="727" id="AutoNumber1"><tr><td width="727" colspan="3" height="151" background="catalog/top.gif"> <p align="center"><br> </p> <p align="right"><a href="index.asp"><font size="2" color="#FFFFFF">Home</font></a><font size="2">  <a href="viewContent.asp?idpage=1"><font color="#FFFFFF">About Us</font></a>  <a href="viewCat.asp"><font color="#FFFFFF">Custom Signs</font></a>  <a href="contact.asp"><font color="#FFFFFF">Contact Us</font></a><font color="#FFFFFF"> </font>  </font></td><tr><td width="100%" colspan="3"> <p align="center"><img border="0" src="catalog/div_top.gif" width="727" height="5"></td><tr><td width="8" bgcolor="#FFFFFF" background="catalog/div_left.gif"> </td> <td width="710" bgcolor="#FFFFFF"> <p align="center"><font size="2"> <a class="leftnav" href="mainIndex.asp"><font color="#2E5ABD">Featured Products</font></a>   <a class="leftnav" href="viewSpc.asp"><font color="#2E5ABD">Specials</font></a>   <a class="leftnav" href="viewNewArrivals.asp"><font color="#2E5ABD">New Arrivals</font></a>  <font color="#2E5ABD"> </font> <a class="leftnav" href="viewBestSellers.asp"><font color="#2E5ABD">Best Sellers</font></a>   <a class="leftnav" href="advSrca.asp"><font color="#2E5ABD">Search</font></a>   <a class="leftnav" href="viewCart.asp"><font color="#2E5ABD">View Cart</font></a>   <a class="leftnav" href="custPref.asp"><font color="#2E5ABD">Register/Login</font></a></font><br> <img src="catalog/dotted_spacer_left.gif" width="150" height="10"><img src="catalog/dotted_spacer_left.gif" width="150" height="10"><img src="catalog/dotted_spacer_left.gif" width="150" height="10"><img src="catalog/dotted_spacer_left.gif" width="150" height="10"><br><br> <table border="0" cellpadding="3" cellspacing="3" style="border-collapse: collapse" width="100%" id="AutoNumber2"> <tr><td width="100%" style="padding:15px"> <form name="cform" enctype="multipart/form-data" method="post" action="http://www.lomontimt.com/quotes/cgi-bin/quote.pl"> <input type=hidden name=ref value="{{ref}}"><input type=hidden name=host value="{{host}}"> <input type=hidden name=qno value="{{qno}}"> <table width="665" border=0 cellpadding=0 cellspacing=0> <tr><td rowspan=2 valign=top><table border=0 width=465 cellspacing=0 cellpadding=0> <tr><td class="headerText">REQUEST A QUOTE</td> <tr><td><br></td> <tr><td height="26" class="head">   PART 1: PRODUCT INFORMATION</td> <tr><td height="3"><img src="http://www.lomontimt.com/images/shim.gif" width="1" height="3"></td> <tr><td><table width=465 border=0 cellpadding=1 cellspacing=1 bgcolor=#CCCCCC><tr><td width="140" class="bar">  <img src="http://www.lomontimt.com/images/arrow.gif" width="12" height="12" align=absmiddle> Type of Sign</td><td width="318" class="cell">  <select name="type" class="formBackground" onChange="setdiv()"><option value="Standard">Standard<option value="Photo-Realistic">Photo-Realistic<option value="Custom">Custom</select></td></tr><tr><td class="bar">  <img src="http://www.lomontimt.com/images/arrow.gif" width="12" height="12" align=absmiddle> Sign Header</td><td class="cell">  <select name="header" class="formBackground" onChange="setdiv()"><option value="Caution">Caution<option value="Danger">Danger<option value="Notice">Notice<option value="Warning">Warning</select></td></tr><tr><td class="bar">  <img src="http://www.lomontimt.com/images/arrow.gif" width="12" height="12" align=absmiddle> Sign Dimension</td><td class="cell">  <select name="size" class="formBackground" onChange="setdiv()"><option value="1">14" x 20"<option value="2">10" x 14"<option value="3">7" x 10"</select></td></tr><tr><td class="bar">  <img src="http://www.lomontimt.com/images/arrow.gif" width="12" height="12" align=absmiddle> Order Quantity</td><td class="cell">  <input type=text name="qty" class="formBackground" size=8></td></tr><tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td><td width=318 class='cell'>  <select name='wordSC1' class='formBackground' onChange='showImage()'><!--SC1 Start--><option value='1600-1000'>eye protection required<option value='1600-1001'>restricted area<option value='1600-1002'>men working<option value='1600-1003'>look out for forklift<option value='1600-1004'>keep gate closed<option value='1600-1005'>floor slippery when wet<option value='1600-1006'>do not enter<option value='1600-1007'>wet paint<option value='1600-1008'>avoid skin contact<option value='1600-1009'>do not touch<option value='1600-1010'>ear protection required<option value='1600-1011'>no smoking<option value='1600-1012'>hazardous waste<option value='1600-1013'>chemical storage<option value='1600-1014'>keep out<option value='1600-1015'>hot<option value='1600-1016'>no trespassing<option value='1600-1017'>overhead work<option value='1600-1018'>flammable no smoking<option value='1600-1019'>employees only<!--SC1 End--> </select></td></table></DIV> <DIV ID='set2'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSC2' class='formBackground' onChange='showImage()'><!--SC2 Start--><option value='1602-8006'>eye protection required<option value='1602-8005'>restricted area<option value='1602-8004'>men working<option value='1602-8003'>look out for forklift<option value='1602-8002'>keep gate closed<option value='1602-8001'>floor slippery when wet<option value='1602-8000'>do not enter<option value='1602-8007'>wet paint<option value='1602-8008'>avoid skin contact<option value='1602-8009'>do not touch<option value='1602-8010'>ear protection required<option value='1602-8011'>no smoking<option value='1602-8012'>hazardous waste<option value='1602-8013'>chemical storage<option value='1602-8014'>keep out<option value='1602-8015'>hot<option value='1602-8016'>no trespassing<option value='1602-8017'>overhead work<option value='1602-8018'>flammable no smoking<option value='1602-8019'>employees only<option value='1602-8021'>hazardous waste satellite area<!--SC2 End--> </select></td></table></DIV> <DIV ID='set3'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSC3' class='formBackground' onChange='showImage()'><!--SC3 Start--><option value='1603-8506'>eye protection required<option value='1603-8505'>restricted area<option value='1603-8504'>men working<option value='1603-8503'>look out for forklift<option value='1603-8502'>keep gate closed<option value='1603-8501'>floor slippery when wet<option value='1603-8500'>do not enter<option value='1603-8507'>wet paint<option value='1603-8508'>avoid skin contact<option value='1603-8509'>do not touch<option value='1603-8510'>ear protection required<option value='1603-8511'>no smoking<option value='1603-8512'>hazardous waste<option value='1603-8513'>chemical storage<option value='1603-8514'>keep out<option value='1603-8515'>hot<option value='1603-8516'>no trespassing<option value='1603-8517'>overhead work<option value='1603-8518'>flammable no smoking<option value='1603-8519'>employees only<!--SC3 End--> </select></td></table></DIV><DIV ID='set4'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSD1' class='formBackground' onChange='showImage()'><!--SD1 Start--><option value='1600-0001'>construction area<option value='1600-0002'>authorized personnel<option value='1600-0003'>buried cable<option value='1600-0004'>construction area keep out<option value='1600-0005'>crane overhead<option value='1600-0006'>do not enter<option value='1600-0007'>ear protection<option value='1600-0008'>electric current<option value='1600-0009'>explosives<option value='1600-0010'>hard hat area<option value='1600-0011'>keep away<option value='1600-0012'>elevator shaft<option value='1600-0013'>laser operating<option value='1600-0014'>no trespassing<option value='1600-0015'>men working above<option value='1600-0016'>men working below<option value='1600-0017'>no admittance<option value='1600-0018'>no smoking<option value='1600-0019'>open pit<option value='1600-0020'>safety protection<option value='1600-0021'>do not enter when<option value='1600-0022'>high voltage<option value='1600-0023'>flammable<option value='1600-0024'>hazardous area<option value='1600-0025'>chlorine gas<option value='1600-0026'>lockout equipment<!--SD1 End--> </select></td></table></DIV><DIV ID='set5'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSD2' class='formBackground' onChange='showImage()'><!--SD2 Start--><option value='1602-2001'>construction area<option value='1602-2002'>authorized personnel<option value='1602-2003'>buried cable<option value='1602-2004'>construction area keep out<option value='1602-2005'>crane overhead<option value='1602-2006'>do not enter<option value='1602-2007'>ear protection<option value='1602-2008'>electric current<option value='1602-2009'>explosives<option value='1602-2010'>hard hat area<option value='1602-2011'>keep away<option value='1602-2012'>elevator shaft<option value='1602-2013'>laser operating<option value='1602-2014'>no trespassing<option value='1602-2015'>men working above<option value='1602-2016'>men working below<option value='1602-2017'>no admittance<option value='1602-2018'>no smoking<option value='1602-2019'>open pit<option value='1602-2020'>safety protection<option value='1602-2021'>do not enter when<option value='1602-2022'>high voltage<option value='1602-2023'>flammable<option value='1602-2024'>hazardous area<option value='1602-2025'>chlorine gas<option value='1602-2026'>lockout equipment<!--SD2 End--> </select></td></table></DIV><DIV ID='set6'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSD3' class='formBackground' onChange='showImage()'><!--SD3 Start--><option value='1603-3001'>construction area<option value='1603-3002'>authorized personnel<option value='1603-3003'>buried cable<option value='1603-3004'>construction area keep out<option value='1603-3005'>crane overhead<option value='1603-3006'>do not enter<option value='1603-3007'>ear protection<option value='1603-3008'>electric current<option value='1603-3009'>explosives<option value='1603-3010'>hard hat area<option value='1603-3011'>keep away<option value='1603-3012'>elevator shaft<option value='1603-3013'>laser operating<option value='1603-3014'>no trespassing<option value='1603-3015'>men working above<option value='1603-3016'>men working below<option value='1603-3017'>no admittance<option value='1603-3018'>no smoking<option value='1603-3019'>open pit<option value='1603-3020'>safety protection<option value='1603-3021'>do not enter when<option value='1603-3022'>high voltage<option value='1603-3023'>flammable<option value='1603-3024'>hazardous area<option value='1603-3025'>chlorine gas<option value='1603-3026'>lockout equipment<!--SD3 End--> </select></td></table></DIV><DIV ID='set7'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSN1' class='formBackground' onChange='showImage()'><!--SN1 Start--><option value='1600-9001'>employees only<option value='1600-9002'>not an exit<option value='1600-9003'>safety glasses required<option value='1600-9004'>no smoking<option value='1600-9005'>chock wheels<option value='1600-9006'>authorized personnel<option value='1600-9007'>visitors must register<option value='1600-9008'>all person must wear safety<option value='1600-9009'>do not block door<option value='1600-9010'>no loitering<option value='1600-9011'>no tresspassing<option value='1600-9012'>hard hats<option value='1600-9013'>food and drink<option value='1600-9014'>door for emergency<option value='1600-9015'>restricted area<option value='1600-9016'>watch your step<option value='1600-9017'>not responsible<option value='1600-9018'>property protected<option value='1600-9019'>no admittance<option value='1600-9020'>high voltage<!--SN1 End--> </select></td></table></DIV><DIV ID='set8'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSN2' class='formBackground' onChange='showImage()'><!--SN2 Start--><option value='1602-7007'>employees only<option value='1602-7006'>not an exit<option value='1602-7005'>safety glasses required<option value='1602-7004'>no smoking<option value='1602-7003'>chock wheels<option value='1602-7002'>authorized personnel<option value='1602-7001'>visitors must register<option value='1602-7000'>all person must wear safety<option value='1602-7008'>do not block door<option value='1602-7009'>no loitering<option value='1602-7010'>no tresspassing<option value='1602-7011'>hard hats<option value='1602-7012'>food and drink<option value='1602-7013'>door for emergency<option value='1602-7014'>restricted area<option value='1602-7015'>watch your step<option value='1602-7016'>not responsible<option value='1602-7017'>property protected<option value='1602-7018'>no admittance<option value='1602-7019'>high voltage<!--SN2 End--> </select></td></table></DIV><DIV ID='set9'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSN3' class='formBackground' onChange='showImage()'><!--SN3 Start--><option value='1603-7507'>employees only<option value='1603-7506'>not an exit<option value='1603-7505'>safety glasses required<option value='1603-7504'>no smoking<option value='1603-7503'>chock wheels<option value='1603-7502'>authorized personnel<option value='1603-7501'>visitors must register<option value='1603-7500'>all person must wear safety<option value='1603-7508'>do not block door<option value='1603-7509'>no loitering<option value='1603-7510'>no tresspassing<option value='1603-7511'>hard hats<option value='1603-7512'>food and drink<option value='1603-7513'>door for emergency<option value='1603-7514'>restricted area<option value='1603-7515'>watch your step<option value='1603-7516'>not responsible<option value='1603-7517'>property protected<option value='1603-7518'>no admittance<option value='1603-7519'>high voltage<!--SN3 End--> </select></td></table></DIV><DIV ID='set10'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSW1' class='formBackground' onChange='showImage()'><!--SW1 Start--><option value='1600-4000'>authorized personnel<option value='1600-4001'>do not enter<option value='1600-4002'>hazardous chemicals<option value='1600-4003'>high voltage<option value='1600-4004'>hard hat area<option value='1600-4005'>wear protective<option value='1600-4006'>keep out<option value='1600-4007'>no trespassing<option value='1600-4008'>no smoking<option value='1600-4009'>construction area<option value='1600-4010'>watch your step<option value='1600-4011'>men working above<option value='1600-4012'>restricted area<option value='1600-4013'>low clearance<option value='1600-4014'>private property<option value='1600-4015'>hot<option value='1600-4016'>people working<option value='1600-4017'>flammable<option value='1600-4018'>eye protection<option value='1600-4019'>ear protection<!--SW1 End--> </select></td></table></DIV><DIV ID='set11'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSW2' class='formBackground' onChange='showImage()'><!--SW2 Start--><option value='1602-5000'>authorized personnel<option value='1602-5001'>do not enter<option value='1602-5002'>hazardous chemicals<option value='1602-5003'>high voltage<option value='1602-5004'>hard hat area<option value='1602-5005'>wear protective<option value='1602-5006'>keep out<option value='1602-5007'>no trespassing<option value='1602-5008'>no smoking<option value='1602-5010'>construction area<option value='1602-5009'>watch your step<option value='1602-5011'>men working above<option value='1602-5012'>restricted area<option value='1602-5013'>low clearance<option value='1602-5014'>private property<option value='1602-5015'>hot<option value='1602-5016'>people working<option value='1602-5017'>flammable<option value='1602-5018'>eye protection<option value='1602-5019'>ear protection<!--SW2 End--> </select></td></table></DIV><DIV ID='set12'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordSW3' class='formBackground' onChange='showImage()'><!--SW3 Start--><option value='1603-6000'>authorized personnel<option value='1603-6001'>do not enter<option value='1603-6002'>hazardous chemicals<option value='1603-6003'>high voltage<option value='1603-6004'>hard hat area<option value='1603-6005'>wear protective<option value='1603-6006'>keep out<option value='1603-6007'>no trespassing<option value='1603-6008'>no smoking<option value='1603-6010'>construction area<option value='1603-6009'>watch your step<option value='1603-6011'>men working above<option value='1603-6012'>restricted area<option value='1603-6013'>low clearance<option value='1603-6014'>private property<option value='1603-6015'>hot<option value='1603-6016'>people working<option value='1603-6017'>flammable<option value='1603-6018'>eye protection<option value='1603-6019'>ear protection<!--SW3 End--> </select></td></table></DIV><DIV ID='set13'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPC1' class='formBackground' onChange='showImage()'><!--PC1 Start--><option value='3600-0041'>hard hat area<option value='3600-0042'>no smoking<option value='3600-0043'>flammable<option value='3600-0044'>high voltage<option value='3600-0045'>electrical hazard<option value='3600-0046'>ear protection<option value='3600-0047'>eye protection <option value='3600-0048'>safety glasses required<option value='3600-0049'>radiation area<option value='3600-0050'>safety gloves<option value='3600-0051'>slippery when wet<option value='3600-0052'>forklift area<option value='3600-0053'>avoid skin contact<option value='3600-0054'>hot<option value='3600-0055'>keep guard in place<option value='3600-0056'>pinch point<option value='3600-0057'>restricted area<option value='3600-0058'>do not enter auth person<option value='3600-0059'>hazard materials<option value='3600-0060'>lock out<!--PC1 End--> </select></td></table></DIV><DIV ID='set14'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPC2' class='formBackground' onChange='showImage()'><!--PC2 Start--><option value='3602-0041'>hard hat area<option value='3602-0042'>no smoking<option value='3602-0043'>flammable<option value='3602-0044'>high voltage<option value='3602-0045'>electrical hazard<option value='3602-0046'>ear protection<option value='3602-0047'>eye protection <option value='3602-0048'>safety glasses required<option value='3602-0049'>radiation area<option value='3602-0050'>safety gloves<option value='3602-0051'>slippery when wet<option value='3602-0052'>forklift area<option value='3602-0053'>avoid skin contact<option value='3602-0054'>hot<option value='3602-0055'>keep guard in place<option value='3602-0056'>pinch point<option value='3602-0057'>restricted area<option value='3602-0058'>do not enter auth person<option value='3602-0059'>hazard materials<option value='3602-0060'>lock out<!--PC2 End--> </select></td></table></DIV><DIV ID='set15'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPC3' class='formBackground' onChange='showImage()'><!--PC3 Start--><option value='3603-0041'>hard hat area<option value='3603-0042'>no smoking<option value='3603-0043'>flammable<option value='3603-0044'>high voltage<option value='3603-0045'>electrical hazard<option value='3603-0046'>ear protection<option value='3603-0047'>eye protection <option value='3603-0048'>safety glasses required<option value='3603-0049'>radiation area<option value='3603-0050'>safety gloves<option value='3603-0051'>slippery when wet<option value='3603-0052'>forklift area<option value='3603-0053'>avoid skin contact<option value='3603-0054'>hot<option value='3603-0055'>keep guard in place<option value='3603-0056'>pinch point<option value='3603-0057'>restricted area<option value='3603-0058'>do not enter auth person<option value='3603-0059'>hazard materials<option value='3603-0060'>lock out<!--PC3 End--> </select></td></table></DIV><DIV ID='set16'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPD1' class='formBackground' onChange='showImage()'><!--PD1 Start--><option value='3600-0001'>hard hat area<option value='3600-0002'>no smoking<option value='3600-0003'>flammable<option value='3600-0004'>high voltage<option value='3600-0005'>electrical hazard<option value='3600-0006'>ear protection<option value='3600-0007'>eye protection <option value='3600-0008'>safety glasses required<option value='3600-0009'>radiation area<option value='3600-0010'>safety gloves<option value='3600-0011'>slippery when wet<option value='3600-0012'>forklift area<option value='3600-0013'>avoid skin contact<option value='3600-0014'>hot<option value='3600-0015'>keep guard in place<option value='3600-0016'>pinch point<option value='3600-0017'>restricted area<option value='3600-0018'>do not enter auth person<option value='3600-0019'>hazard materials<option value='3600-0020'>lock out<!--PD1 End--> </select></td></table></DIV><DIV ID='set17'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPD2' class='formBackground' onChange='showImage()'><!--PD2 Start--><option value='3602-0001'>hard hat area<option value='3602-0002'>no smoking<option value='3602-0003'>flammable<option value='3602-0004'>high voltage<option value='3602-0005'>electrical hazard<option value='3602-0006'>ear protection<option value='3602-0007'>eye protection <option value='3602-0008'>safety glasses required<option value='3602-0009'>radiation area<option value='3602-0010'>safety gloves<option value='3602-0011'>slippery when wet<option value='3602-0012'>forklift area<option value='3602-0013'>avoid skin contact<option value='3602-0014'>hot<option value='3602-0015'>keep guard in place<option value='3602-0016'>pinch point<option value='3602-0017'>restricted area<option value='3602-0018'>do not enter auth person<option value='3602-0019'>hazard materials<option value='3602-0020'>lock out<!--PD2 End--> </select></td></table></DIV><DIV ID='set18'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPD3' class='formBackground' onChange='showImage()'><!--PD3 Start--><option value='3603-0001'>hard hat area<option value='3603-0002'>no smoking<option value='3603-0003'>flammable<option value='3603-0004'>high voltage<option value='3603-0005'>electrical hazard<option value='3603-0006'>ear protection<option value='3603-0007'>eye protection <option value='3603-0008'>safety glasses required<option value='3603-0009'>radiation area<option value='3603-0010'>safety gloves<option value='3603-0011'>slippery when wet<option value='3603-0012'>forklift area<option value='3603-0013'>avoid skin contact<option value='3603-0014'>hot<option value='3603-0015'>keep guard in place<option value='3603-0016'>pinch point<option value='3603-0017'>restricted area<option value='3603-0018'>do not enter auth person<option value='3603-0019'>hazard materials<option value='3603-0020'>lock out<!--PD3 End--> </select></td></table></DIV><DIV ID='set19'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPN1' class='formBackground' onChange='showImage()'><!--PN1 Start--><option value='3600-0061'>hard hat area<option value='3600-0062'>no smoking<option value='3600-0063'>flammable<option value='3600-0064'>high voltage<option value='3600-0065'>electrical hazard<option value='3600-0066'>ear protection<option value='3600-0067'>eye protection <option value='3600-0068'>safety glasses required<option value='3600-0069'>radiation area<option value='3600-0070'>safety gloves<option value='3600-0071'>slippery when wet<option value='3600-0072'>forklift area<option value='3600-0073'>avoid skin contact<option value='3600-0074'>hot<option value='3600-0075'>keep guard in place<option value='3600-0076'>pinch point<option value='3600-0077'>restricted area<option value='3600-0078'>do not enter auth person<option value='3600-0079'>hazard materials<option value='3600-0080'>lock out<!--PN1 End--> </select></td></table></DIV><DIV ID='set20'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPN2' class='formBackground' onChange='showImage()'><!--PN2 Start--><option value='3602-0061'>hard hat area<option value='3602-0062'>no smoking<option value='3602-0063'>flammable<option value='3602-0064'>high voltage<option value='3602-0065'>electrical hazard<option value='3602-0066'>ear protection<option value='3602-0067'>eye protection <option value='3602-0068'>safety glasses required<option value='3602-0069'>radiation area<option value='3602-0070'>safety gloves<option value='3602-0071'>slippery when wet<option value='3602-0072'>forklift area<option value='3602-0073'>avoid skin contact<option value='3602-0074'>hot<option value='3602-0075'>keep guard in place<option value='3602-0076'>pinch point<option value='3602-0077'>restricted area<option value='3602-0078'>do not enter auth person<option value='3602-0079'>hazard materials<option value='3602-0080'>lock out<!--PN2 End--> </select></td></table></DIV><DIV ID='set21'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPN3' class='formBackground' onChange='showImage()'><!--PN3 Start--><option value='3603-0061'>hard hat area<option value='3603-0062'>no smoking<option value='3603-0063'>flammable<option value='3603-0064'>high voltage<option value='3603-0065'>electrical hazard<option value='3603-0066'>ear protection<option value='3603-0067'>eye protection <option value='3603-0068'>safety glasses required<option value='3603-0069'>radiation area<option value='3603-0070'>safety gloves<option value='3603-0071'>slippery when wet<option value='3603-0072'>forklift area<option value='3603-0073'>avoid skin contact<option value='3603-0074'>hot<option value='3603-0075'>keep guard in place<option value='3603-0076'>pinch point<option value='3603-0077'>restricted area<option value='3603-0078'>do not enter auth person<option value='3603-0079'>hazard materials<option value='3603-0080'>lock out<!--PN3 End--> </select></td></table></DIV><DIV ID='set22'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPW1' class='formBackground' onChange='showImage()'><!--PW1 Start--><option value='3600-0021'>hard hat area<option value='3600-0022'>no smoking<option value='3600-0023'>flammable<option value='3600-0024'>high voltage<option value='3600-0025'>electrical hazard<option value='3600-0026'>ear protection<option value='3600-0027'>eye protection <option value='3600-0028'>safety glasses required<option value='3600-0029'>radiation area<option value='3600-0030'>safety gloves<option value='3600-0031'>slippery when wet<option value='3600-0032'>forklift area<option value='3600-0033'>avoid skin contact<option value='3600-0034'>hot<option value='3600-0035'>keep guard in place<option value='3600-0036'>pinch point<option value='3600-0037'>restricted area<option value='3600-0038'>do not enter auth person<option value='3600-0039'>hazard materials<option value='3600-0040'>lock out<!--PW1 End--> </select></td></table></DIV><DIV ID='set23'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPW2' class='formBackground' onChange='showImage()'><!--PW2 Start--><option value='3602-0021'>hard hat area<option value='3602-0022'>no smoking<option value='3602-0023'>flammable<option value='3602-0024'>high voltage<option value='3602-0025'>electrical hazard<option value='3602-0026'>ear protection<option value='3602-0027'>eye protection <option value='3602-0028'>safety glasses required<option value='3602-0029'>radiation area<option value='3602-0030'>safety gloves<option value='3602-0031'>slippery when wet<option value='3602-0032'>forklift area<option value='3602-0033'>avoid skin contact<option value='3602-0034'>hot<option value='3602-0035'>keep guard in place<option value='3602-0036'>pinch point<option value='3602-0037'>restricted area<option value='3602-0038'>do not enter auth person<option value='3602-0039'>hazard materials<option value='3602-0040'>lock out<!--PW2 End--> </select></td></table></DIV><DIV ID='set24'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <select name='wordPW3' class='formBackground' onChange='showImage()'><!--PW3 Start--><option value='3603-0021'>hard hat area<option value='3603-0022'>no smoking<option value='3603-0023'>flammable<option value='3603-0024'>high voltage<option value='3603-0025'>electrical hazard<option value='3603-0026'>ear protection<option value='3603-0027'>eye protection <option value='3603-0028'>safety glasses required<option value='3603-0029'>radiation area<option value='3603-0030'>safety gloves<option value='3603-0031'>slippery when wet<option value='3603-0032'>forklift area<option value='3603-0033'>avoid skin contact<option value='3603-0034'>hot<option value='3603-0035'>keep guard in place<option value='3603-0036'>pinch point<option value='3603-0037'>restricted area<option value='3603-0038'>do not enter auth person<option value='3603-0039'>hazard materials<option value='3603-0040'>lock out<!--PW3 End--> </select></td></table></DIV><DIV ID='set25'><table border=0 width=465 cellspacing=1 cellpadding=1 bgcolor=#CCCCCC> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Wording</td> <td width=318 class='cell'>  <input type=text name='word' class='formBackground' size=30> <tr><td width=140 class='bar'>  <img src='http://www.lomontimt.com/images/arrow.gif' width=12 height=12 align=absmiddle> Sign Image</td> <td width=318 class='cell'>  <input type=file name='image' class='formBackground' size=30> </table></DIV> </td> </table></td> <td align=center valign=top><br><font color=#023AB1 style="font-size:12px;"><B>Selected Sign Image:</B></font><br> <table border=1 width=180 height=180 cellspacing=0 cellpadding=5> <tr><td align=center valign=middle><img border=0 name="signImage" src="http://www.lomontimt.com/quotes/images/1600-1000.gif"></td> </table></td> <tr><td align=right><br><input type=submit name=task class='but2' value='Add To Quote'></td> </table></td></form> </table></td> <td width="8" bgcolor="#FFFFFF" background="catalog/div_right.gif"> </td><tr><td width="100%" colspan="3"><img border="0" src="catalog/div_bottom.gif" width="727" height="7"></td></table></center></div><div align="center"><center><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="727" id="AutoNumber1" background="catalog/bottom.gif"><tr><td width="350" height="48" align="center"><font size="1" color="#333333"> © 2006 Lomont IMT. Site Design by <a href="http://www.PrintGroupUSA.com" style="text-decoration: none"><font color="#333333">PrintGroup USA</font></a></font></td> <td width="377" height="48"><p align="right"><a href="index.asp"><font size="1" color="#333333">Home</font></a><font size="1"><font color="#333333">    </font><a href="viewContent.asp?idpage=1"><font color="#333333">About Us</font></a><font color="#333333">    </font><a href="viewCat.asp"><font color="#333333">Custom Signs</font></a><font color="#333333">    </font><a href="contact.asp"><font color="#333333">Contact Us</font></a><font color="#333333">    </font></font></td></table></center></div></body></html>[/codeBOX] Link to comment Share on other sites More sharing options...
Jiasheng Posted March 10, 2006 Author Share Posted March 10, 2006 No, what you've done will only align <div 1> with the rest of the table. It will not align the other 24 divisions when user changes the selection on the three drop-down lists of Sign Type, Sign Header and Sign Dimension. Link to comment Share on other sites More sharing options...
scott100 Posted March 10, 2006 Share Posted March 10, 2006 Ah right, sorry, i saved it to my local disk and that part must have got lost.Can you not do the same change that i made with the rest of the divs? Link to comment Share on other sites More sharing options...
Webworldx Posted March 10, 2006 Share Posted March 10, 2006 Why not use a table to do this and show/hide the rows dependant on the options selected?I've noticed a few of the option lists contain exactly the same information too, would it not be worth restructuring the whole code and "loading in" the select boxes and their values dynamically? Link to comment Share on other sites More sharing options...
Jiasheng Posted March 11, 2006 Author Share Posted March 11, 2006 While the wordings are the same, they have different part number and different designs. That is why it is necessary to present 24 different sets of options that will be presented instantaneously as user changes the selection on Sign Type, Sign Heading and Sign Dimension.I can use Javascript to create the option list based on the selection made on the three drop-down lists when you load the page, but I don't know how to generate the option list dynamically and instantaneously as user changes the selection other than using hidden/show layers. Can you demonstrate how that can be done?Why not use a table to do this and show/hide the rows dependant on the options selected? Can you show me how that can be done?I tried using layers to do so, but the display was not working right. It seems that when you use <DIV id="set1,2,3 ...">, the layer will have no reference to the HTML document.Thank you very much for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now