JavaScript - Help With Search Drop-down Box Display/hide Wanted
Hi there,
I have a search function on my website. When a user types something, options (including his characters) are displayed in a box (layer) as hyperlinks using Ajax, a very common feature these days. My problem is that if the user clicks somewhere else in page the links display stays on screen. I tried to fix the issue by adding an onBlur event to the search box (different id that the "display" div): Code: document.getElementById('livesearch').style.display = 'none'; where livesearch is the id of the hyperlinks displaying div. Job done but...the hyperlink "box" dissapear and the problem now is that the links are not working (if you click on one, the div dissapear first (I SUPPOSE) and no redirection to link is made....) I tried a couple of if else tricks I could think of with no success. No need to say that I am not a javascript wizz....hope you like the js1 username Any help will be appreciated. Thank you in advance, Julian Similar TutorialsHello i use a javascript to use drop down lists so i display the appropriate products to user. Atm no matter the user option i display 3 drop down lists in whole products. Lets say the drop down lists are like manufacturer/order by/sochet. When the user wish to see "processors" then the sochet list have values, but when he choose "printers" the sochet list is empty since the printers dont contan sochets. In this case i want to hide the sochet drop down list in order to be more familiar to the user is that possible? My js looks like this Code: <script type="text/javascript"> function showUser() { var q=document.getElementById("manuf"); var q_val = q.options[q.selectedIndex].value; var t=document.getElementById("soch"); var t_val = t.options[t.selectedIndex].value; var c=document.getElementById("order"); var c_val = c.options[c.selectedIndex].value; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { var q=document.getElementById("manuf"); var q_val = q.options[q.selectedIndex].value; var t=document.getElementById("soch"); var t_val = t.options[t.selectedIndex].value; var c=document.getElementById("order"); var c_val = c.options[c.selectedIndex].value; if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","productsdata.php?q=" + q_val + "&t=" + t_val+"&c=" +c_val, true); xmlhttp.send(); } </script> and my drop down lists like PHP Code: <select name="products2" id="soch" onchange="showUser()"> <option value="" selected="selected">Sochet</option> <?php do { ?> <option value="<?php echo $row_sochet['sochet']?>"><?php echo $row_sochet['sochet']?></option> <?php } while ($row_sochet = mysql_fetch_assoc($sochet)); $rows = mysql_num_rows($sochet); if($rows > 0) { mysql_data_seek($sochet, 0); $row_sochet = mysql_fetch_assoc($sochet); } ?> </select> I have a previous post where I asked about showing or hiding a div based on user answers in a form, and I got a great response that let me do that with radio buttons ... but can I do that with drop down lists too? Is there an equivalent to on click for drop down list? Thanks for all the help.
Hi everyone, I'm new here, I actually found this site by searching for the code I have a question for. I'm trying to show/hide different drop down selectors, depending on what is chosen in another drop down selector. I modified a script (I found he http://www.codingforums.com/showthread.php?t=98406) in a way that I thought would work, but its not. Can anyone help me with what I'm doing wrong? Here is my page: http://www.leatherexpressonline.com/...er/testing.php Here is my javascript: http://pastie.org/3344253 And my drop downs: http://pastie.org/3344258 Also, I don't want the drop downs (ids: grade1000color, grade1500color, grade2000color, grade2500color, grade3000color, grade5000color) to be shown when the page is first loaded. Only when the correct option is chosen on the drop down. So I'm guessing I should add a display:none style to those drop downs, then have them shown on the javascript? Thanks so much for the help I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html> <head> <title>Show and Hide</title> <script> //********************************************* // Function that Shows an HTML element //********************************************* function showDiv(divID) { var div = document.getElementById(divID); div.style.display = ""; //display div } //********************************************* // Function that Hides an HTML element //********************************************* function hideDiv(divID) { var div = document.getElementById(divID); div.style.display = "none"; // hide } //***************************************************************************** // Function that Hides all the Div elements in the select menu Value //***************************************************************************** function hideAllDivs() { //Loop through the seclect menu values and hide all var selectMenu = document.getElementById("selectMenu"); for (var i=0; i<=selectMenu.options.length -1; i++) { hideDiv(selectMenu.options[i].value); } } //********************************************* // Main function that calls others to toggle divs //********************************************* function toggle(showID) { hideAllDivs(); // Hide all showDiv(showID); // Show the one we asked for } </script> </head> <body onload="hideAllDivs();"> <select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)"> <option value="formNumber1"> Show Form 1 </option> <option value="formNumber2"> Show Form 2 </option> <option value="formNumber3"> Show Form 3 </option> <option value="formNumber4"> Show Form 4 </option> </select> <div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div> <div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div> <div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div> <div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div> </body> </html> Thanks in advance! Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID) { var div = document.getElementById(divID); div.style.display = ""; //display div } function hideDiv(divID) { var div = document.getElementById(divID); div.style.display = "none"; // hide } function hideAllDivs() { //Loop through the seclect menu values and hide all var courseSelect = document.getElementById("courseSelect"); for (var i=0; i<=courseSelect.options.length -1; i++) { hideDiv(courseSelect.options[i].value); } } function toggle(showID){ hideAllDivs(); // Hide all showDiv(showID); // Show the one we asked for } Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" defer> function cascadeSelect(parent, child){ var childOptions = child.find('option:not(.static)'); child.data('options',childOptions); parent.change(function(){ childOptions.remove(); child .append(child.data('options').filter('.sub_' + this.value)) .change(); }) childOptions.not('.static, .sub_' + parent.val()).remove(); } $(function(){ cascadeForm = $('.cascadeTest'); deptartmentSelect = cascadeForm.find('.deptartmentSelect'); courseSelect = cascadeForm.find('.courseSelect'); cascadeSelect(deptartmentSelect, courseSelect); }); And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest"> <table> <tr> <th>Organization:</th> <td><select name="deptartmentSelect" class="deptartmentSelect"> <option value="0">Select a Department</option> <option value="1">Dept A</option> <option value="2">Dept B</option> <option value="3">Dept C</option> </select></td> </tr> <tr> <th>Territory:</th> <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)"> <option value="0" class="static">- Courses -</option> <option value="A1" class="sub_1">Course A1</option> <option value="B1" class="sub_2">Course B1</option> <option value="C1" class="sub_3">Course C1</option> </select></td> </tr> </table> </form> <div id="A1" style="display:none;">I am Course A1</div> <div id="B1" style="display:none;">I am Course B1</div> <div id="C1" style="display:none;">I am Course C1</div> Thanks again in advance! Hi all, I'm trying to hide a form button in javascipt. Within a function I have the following ... Quote: document.getElementById(button).display='none'; However it just errors and says button is undefined. button is the id and name of the form button btw. Do I need to define which form it is part of or something else? Many thanks for any pointers or help. Sir P Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed? I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you. Broken down into parts I think I need to do the following: a) Standard HTML form with drop downs etc and submit b) Hidden divs c) Submission process locally to javascript function to determine which product to show/hide d) Javascript function that makes the decision e) Javascript that hides/shows products Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks! cheers frank I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records. However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1. I'm using Javascript and div tags. This is what I have so far. <script type="text/javascript"> function hide(obj) obj1 = document.getElementById(obj); obj1.style.display = 'none'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } function show_other(optionValue) { if(optionValue=='C') { show('divClass');} else{hide('divClass'); } if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); } } </script> /* Field1 - is a drop down list */ <select name="ClassType" size="1" onchange="show_other(this.value)"> ... </select> /* Field2 */ <div id="divClass"> ... </div> /* Field 3 */ <div id="divWorkshop"> ... </div> Appreciate any assistance. Thanks Peter So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript"> <!-- function InsertContent(tid) { if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; } } function RemoveContent(tid) { if(document.getElementById(tid).style.display == "") { document.getElementById(tid).style.display = "none"; } else { document.getElementById(tid).style.display = ""; } } //--> </script> These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div> <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div> And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hi Guys, A couple of years ago I came across a Javascript drop down search facility which I used for an eBay shop I built. I don't really have any knowledge at all of Javascript but I did manage to get it to work the way I wanted, somehow! Basically at the moment with the drop down you have to select the product type, your make of vehicle and then your model. This then searches the ebay shop for any relevant listings. However, I now want to add a forth drop down box which also searches the engine size. How would I go about adding another drop down list? Any help would be much appreciated. I've had to split the code into two lots and there is too many characters to fit in one thread! Code: <script type="text/javascript"> product = new Array ("CATALYTIC-CONVERTER","CENTRAL-SILENCER","FRONT-PIPE","Rear-Assembly"); make = new Array ("ALFA_ROMEO","AUDI","BMW","CITROEN","DAEWOO","FIAT","FORD","HONDA","HYUNDAI","JAGUAR","LAND_ROVER","LEXUS","MAZDA","MERCEDES","MG","MITSUBISHI","NISSAN","PEUGEOT","RENAULT","ROVER","SAAB","SEAT","SKODA","SUBARU","SUZUKI","TOYOTA","VAUXHALL","VOLKSWAGEN","VOLVO"); ALFA_ROMEO = new Array ("ALFA ROMEO 145", "145", "ALFA ROMEO 146", "146", "ALFA ROMEO 147", "147", "ALFA ROMEO 155", "155", "ALFA ROMEO 156", "156", "ALFA ROMEO 164", "164","ALFA ROMEO 166", "166","ALFA ROMEO 75", "75","ALFA ROMEO 33","33","ALFA ROMEO GTV", "GTV","ALFA ROMEO SPIDER","SPIDER"); AUDI = new Array ("AUDI 80","80","AUDI 90","90","AUDI 100","100","AUDI 200","200","AUDI A2","A2","AUDI A3","A3","AUDI A4","A4","AUDI A6","A6","AUDI A8","A8","AUDI CABRIOLET","AUDI COUPE","COUPE","AUDI S3","S3","AUDI S4","S4","AUDI S6","S6", "AUDI S8","S8","AUDI TT","TT"); BMW = new Array ("BMW 316","316","BMW 318","318","BMW 320","320","BMW 323","323","BMW 325","325","BMW 328","328","BMW 518","518","BMW 520","520","BMW 523","523","BMW 525","525","BMW 528","528","BMW 530","530","BMW 535","535","BMW 540","540","BMW 728","728","BMW 730","730","BMW 735","735","BMW 750","750","BMW 840","840","BMW 850","850","BMW M3","M3","BMW M5","M5","BMW Z3","Z3","BMW MINI","MINI"); CITROEN = new Array("CITROEN AX","AX","CITROEN BERLINGO","BERLINGO","CITROEN BX","BX","CITROEN C15","C15","CITROEN C5","C5","CITROEN DISPATCH","DISPATCH","CITROEN RELAY","RELAY","CITROEN SAXO","SAXO","CITROEN SYNERGIE","SYNERGIE","CITROEN XANTIA","XANTIA","CITROEN XM","XM","CITROEN XSARA","XSARA","CITROEN ZX","ZX"); DAEWOO = new Array("DAEWOO ESPERO","ESPERO","DAEWOO KORANDO","KORANDO","DAEWOO LANOS","LANOS","DAEWOO LEGANZA","LEGANZA","DAEWOO MATIZ","MATIZ","DAEWOO MUSSO","MUSSO","DAEWOO","NEXIA","DAEWOO","NUBIRA","DAEWOO TACUMA","TACUMA"); FIAT = new Array("FIAT BARCHETTA","BARCHETTA","FIAT BRAVA","BRAVA","FIAT BRAVO","BRAVO","FIAT CINQUECENTO","CINQUECENTO","FIAT COUPE","COUPE","FIAT CROMA","CROMA","FIAT DOBLO","DOBLO","FIAT DUCATO","DUCATO","FIAT FIORINO","FIORINO","FIAT MAREA","MAREA","FIAT MULTIPLA","MULTIPLA","FIAT PANDA","PANDA","FIAT PUNTO","PUNTO","FIAT SCUDO","SCUDO","FIAT SEICENTO","SEICENTO","FIAT TEMPRA","TEMPRA","FIAT TIPO","TIPO","FIAT ULYSSE","ULYSSE","FIAT UNO","UNO"); FORD = new Array("FORD COUGAR","COUGAR","FORD ESCORT","ESCORT","FORD EXPLORER","EXPLORER","FORD FIESTA","FIESTA","FORD FOCUS","FOCUS","FORD GALAXY","GALAXY","FORD GRANADA","GRANADA","FORD KA","KA","FORD MAVERICK","MAVERICK","FORD MONDEO","MONDEO","FORD ORION","ORION","FORD PROBE","PROBE","FORD PUMA","PUMA","FORD SCORPIO","SCORPIO","FORD SIERRA","SIERRA","FORD TOURNEO","TOURNEO","FORD TRANSIT","TRANSIT"); HONDA = new Array("HONDA ACCORD","ACCORD","HONDA CIVIC","CIVIC","HONDA CONCERTO","CONCERTO","HONDA CRV","CRV","HONDA HRV","HRV","HONDA INTEGRA","INTEGRA","HONDA JAZZ","JAZZ","HONDA LEGEND","LEGEND","HONDA PRELUDE","PRELUDE","HONDA SHUTTLE","SHUTTLE","HONDA STREAM","STREAM"); HYUNDAI = new Array("HYUNDAI ACCENT","ACCENT","HYUNDAI ATOS","ATOS","HYUNDAI COUPE","COUPE","HYUNDAI LANTRA","LANTRA","HYUNDAI PONY","PONY","HYUNDAI S COUPE","S COUPE","HYUNDAI SONATA","SONATA"); JAGUAR = new Array("JAGUAR S TYPE","S TYPE","JAGUAR XJ12","XJ12","JAGUAR XJ6","XJ6","JAGUAR XJ8","XJ8","JAGUAR XJR","XJR","JAGUAR XJS","XJS","JAGUAR XK8","XK8"); LAND_ROVER = new Array("LAND-ROVER 110","110","LAND-ROVER 90","90","LAND-ROVER DEFENDER","DEFENDER","LAND-ROVER DISCOVERY","DISCOVERY","LAND-ROVER FREELANDER","FREELANDER","RANGE-ROVER","RANGE ROVER"); LEXUS = new Array("LEXUS ES","ES SERIES","LEXUS GS","GS SERIES","LEXUS IS","IS SERIES","LEXUS LS","LS SERIES","LEXUS LX","LX SERIES","LEXUS RX","RX SERIES","LEXUS SC","SC SERIES","LEXUS SOARER","SOARER"); MAZDA = new Array("MAZDA 121","121","MAZDA 2","2","MAZDA 323","323","MAZDA 323F","323F","MAZDA 6","6","MAZDA 616","616","MAZDA 626","626","MAZDA 929","929","MAZDA DEMIO","DEMIO","MAZDA MPV","MPV","MAZDA MX3","MX3","MAZDA MX5","MX5","MAZDA MX6","MX6","MAZDA PREMACY","PREMACY","MAZDA RX7","RX7","MAZDA RX8","RX8","MAZDA TRIBUTE","TRIBUTE","MAZDA XEDOS","XEDOS"); MERCEDES = new Array("MERCEDES 180","180","MERCEDES 190","190","MERCEDES 200","200","MERCEDES 220","220","MERCEDES 230","230","MERCEDES 240","240","MERCEDES 280","280","MERCEDES 300","300","MERCEDES 320","320","MERCEDES 400","400","MERCEDES 420","420","MERCEDES 430","430","MERCEDES 500","500","MERCEDES 600","600","MERCEDES A CLASS","A CLASS","MERCEDES C CLASS","C CLASS","MERCEDES E CLASS","E CLASS","MERCEDES G WAGON","G WAGON","MERCEDES ML","ML","MERCEDES SPRINTER","SPRINTER","MERCEDES V","V","MERCEDES VITO","VITO"); MG = new Array("MG 25","25","MG MGF","MGF","MG RV8","RV8","MG TF","TF","MG ZR","ZR","MG ZS","ZS","MG ZT","ZT"); MITSUBISHI = new Array("MITSUBISHI 3000","3000","MITSUBISHI CARISMA","CARISMA","MITSUBISHI COLT","COLT","MITSUBISHI ECLIPSE","ECLIPSE","MITSUBISHI EVO","EVO","MITSUBISHI FTO","FTO","MITSUBISHI GALANT","GALANT","MITSUBISHI GTO","GTO","MITSUBISHI L200","L200","MITSUBISHI L300","L300","MITSUBISHI L400","L400","MITSUBISHI LANCER","LANCER","MITSUBISHI PAJERO","PAJERO","MITSUBISHI SHOGUN","SHOGUN","MITSUBISHI SIGMA","SIGMA","MITSUBISHI SPACE STAR","SPACE STAR","MITSUBISHI SPACEWAGON","SPACEWAGON"); NISSAN = new Array("NISSAN 100 NX","100 NX","NISSAN 200 SX","200 SX","NISSAN 300 ZX","300 ZX","NISSAN 350 Z","350 Z","NISSAN 1800 SX","1800 SX","NISSAN ALMERA","ALMERA","NISSAN BLUEBIRD","BLUEBIRD","NISSAN CABSTAR","CABSTAR","NISSAN CHERRY","CHERRY","NISSAN MICRA","MICRA","NISSAN MAXIMA","MAXIMA","NISSAN PRIMERA","PRIMERA","NISSAN SERENA","SERENA","NISSAN SKYLINE","SKYLINE","NISSAN SUNNY","SUNNY","NISSAN TERRANO","TERRANO","NISSAN X TRAIL","X TRAIL"); PEUGEOT = new Array("PEUGEOT 106","106","PEUGEOT 107","107","PEUGEOT 205","205","PEUGEOT 206","206","PEUGEOT 306","306","PEUGEOT 307","307","PEUGEOT 309","309","PEUGEOT 405","405","PEUGEOT 406","406","PEUGEOT 407","407","PEUGEOT 605","605","PEUGEOT 607","607","PEUGEOT 806","806","PEUGEOT 807","807","PEUGEOT 1007","1007","PEUGEOT BOXER","BOXER","PEUGEOT EXPERT","EXPERT","PEUGEOT PARTNER","PARTNER"); RENAULT = new Array("RENAULT CLIO","CLIO","RENAULT ESPACE","ESPACE","RENAULT KANGOO","KANGOO","RENAULT LAGUNA","LAGUNA","RENAULT MEGANE","MEGANE","RENAULT SAFRANE","SAFRANE","RENAULT SCENIC","SCENIC","RENAULT R19","R19","RENAULT R21","R21"); ROVER = new Array("ROVER 111","111","ROVER 114","114","ROVER 211","211","ROVER 214","214","ROVER 216","216","ROVER 218","218","ROVER 220","220","ROVER 25","25","ROVER 323","323","ROVER 414","414","ROVER 416","416","ROVER 420","420","ROVER 45","45","ROVER 618","618","ROVER 620","620","ROVER 623","623","ROVER 75","75","ROVER 820","820","ROVER 825","825","ROVER 827","827","ROVER MAESTRO","MAESTRO","ROVER METRO","METRO","ROVER MG","MG","ROVER MGF","MGF","ROVER MINI","MINI","ROVER MONTEGO","MONTEGO","ROVER STREETWISE","STREETWISE"); SAAB = new Array("SAAB 9-3","9-3","SAAB 9-4","9-4","SAAB 9-5","9-5","SAAB 90","90","SAAB 99","99","SAAB","900","SAAB 9000","9000"); SEAT = new Array("SEAT ALHAMBRA","ALHAMBRA","19AUK35","ALTEA","SEAT AROSA","AROSA","SEAT CORDOBA","CORDOBA","SEAT IBIZA","IBIZA","SEAT INCA","INCA","SEAT LEON","LEON","SEAT MALAGA","MALAGA","SEAT MARBELLA","MARBELLA","SEAT TERRA","TERRA","SEAT TOLEDO","TOLEDO"); SKODA = new Array("SKODA FABIA","FABIA","SKODA FAVORIT","FAVORIT","SKODA FELICIA","FELICIA","SKODA OCTAVIA","OCTAVIA","SKODA SUPERB","SUPERB","SKODA TAVRIA","TAVRIA"); SUBARU = new Array("SUBARU FORESTER","FORESTER","SUBARU IMPREZA","IMPREZA","SUBARU JUSTY","JUSTY","SUBARU LEGACY","LEGACY","SUBARU LIBERO","LIBERO","SUBARU SVX","SVX","SUBARU VIVIO","VIVIO"); SUZUKI = new Array("SUZUKI ALTO","ALTO","SUZUKI BALENO","BALENO","SUZUKI CARRY","CARRY","SUZUKI GRAND VITARA","GRAND VITARA","SUZUKI JIMMY","JIMMY","SUZUKI ESTEEM","ESTEEM","SUZUKI IGNIS","IGNIS","SUZUKI LIANA","LIANA","SUZUKI SAMURAI","SAMURAI","SUZUKI SWIFT","SWIFT","SUZUKI VITARA","VITARA","SUZUKI WAGON","WAGON"); TOYOTA = new Array("TOYOTA AVENSIS","AVENSIS","TOYOTA CAMRY","CAMRY","TOYOTA CARINA","CARINA","TOYOTA CELCIA","CELICA","TOYOTA COROLLA","COROLLA","19S35","ESTIMA","TOYOTA HI-ACE","HI-ACE","TOYOTA HI-LUX","HI-LUX","TOYOTA LAND CRUISER","LAND CRUISER","TOYOTA MR2","MR2","TOYOTA PASEO","PASEO","TOYOTA PICNIC","PICNIC","TOYOTA PREVIA","PREVIA","TOYOTA PRIUS","PRIUS","TOYOTA RAV 4","RAV 4","TOYOTA SPACECRUISER","SPACECRUISER","TOYOTA STARLET","STARLET","TOYOTA SUPRA","SUPRA","TOYOTA YARIS","YARIS"); </script> <script type="text/javascript"> VAUXHALL = new Array("VAUXHALL ASTRA","ASTRA","VAUXHALL BRAVA","BRAVA","VAUXHALL CALIBRA","CALIBRA","VAUXHALL CAVALIER","CAVALIER","VAUXHALL COMBO","COMBO","VAUXHALL CORSA","CORSA","VAUXHALL FRONTERA","FRONTERA","VAUXHALL MERIVA","MERIVA","VAUXHALL MONTERRY","MONTERRY","VAUXHALL NOVA","NOVA","VAUXHALL OMEGA","OMEGA","VAUXHALL SENATOR","SENATOR","VAUXHALL SIGNUM","SIGNUM","VAUXHALL SINTRA","SINTRA","VAUXHALL TIGRA","TIGRA","VAUXHALL VECTRA","VECTRA","VAUXHALL ZAFIRA","ZAFIRA"); VOLKSWAGEN = new Array("VOLKSWAGEN BEETLE","BEETLE","VOLKSWAGEN BORA","BORA","VOLKSWAGEN CADDY","CADDY","VOLKSWAGEN CARAVELLE","CARAVELLE","VOLKSWAGEN CORRADO","CORRADO","VOLKSWAGEN GOLF","GOLF","VOLKSWAGEN JETTA","JETTA","VOLKSWAGEN LUPO","LUPO","VOLKSWAGEN PASSAT","PASSAT","VOLKSWAGEN POLO","POLO","VOLKSWAGEN SANTANA","SANTANA","VOLKSWAGEN SCIROCCO","SCIROCCO","VOLKSWAGEN SHARAN","SHARAN","VOLKSWAGEN TRANSPORTER","TRANSPORTER","VOLKSWAGEN VENTO","VENTO"); VOLVO = new Array("VOLVO 240","240","VOLVO 340","340","VOLVO 440","440","VOLVO 460","460","VOLVO 480","480","VOLVO 740","740","VOLVO 760","760","VOLVO 850","850","VOLVO 940","940","VOLVO 960","960","VOLVO C70","C70","VOLVO S40","S40","VOLVO S60","S60","VOLVO S70","S70","VOLVO S80","S80","VOLVO S90","S90","VOLVO V40","V40","VOLVO V50","V50","VOLVO V70","V70","VOLVO V90","V90"); function writeoptions(selectname) { var arr = selectname; var k=arr.length; for (i=0; i<k; i++) { if (arr[i] == "REAR_SILENCER") { document.write ("<OPTION value=\"\">"+arr[i]+"</OPTION>"); } else { document.write ("<OPTION value="+arr[i]+">"+arr[i]+"</OPTION>"); } } } function writeselect(selectedoption) { var opt = selectedoption; var optarray = window[opt] var frm1 = document.myForm; frm1.model.disabled=(frm1.make.selectedIndex==0 || frm1.product.selectedIndex==0); frm1.model.selectedIndex = 0; frm1.model.length = 1; count=1 if(frm1.make.selectedIndex > 0) for(i=0;i<optarray.length;i=i+2) { frm1.model.options[count] = new Option(optarray[i+1],optarray[i]); count++ }} </script> I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> Hi all, Only recently started, self-teaching, html and Java in order to get a project idea of mine up and running. First barrier I've come across is trying to sort out a drop down with search button that will then reveal the connected hidden div, I've mangled together some code from a couple of sources with what I've learnt, but not really sure how to tie in the "Search" button to the showDiv(divname) function. Wondering if anyone could help out. Many thanks in advance Code: <head> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divname) { if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } </script> </head> <body> <h1> <form name="form" > <select name="select"> <option selected>Choose <option value="one"> one <option value="two"> two <option value="other"> other </select> <input type="button" value="Search" onClick="showDiv(this.value)"> </form> </h1></br> <h2> Results: <p id="one" class="hiddenDiv">one</p> <p id="two" class="hiddenDiv">two</p> <p id="other" class="hiddenDiv">other</p> </h2> </body> </html> From my stylesheet: Code: .hiddenDiv { display: none; } .visibleDiv { display: block; } Hello, I am trying to set up this Javascript to work with my XML exported from Microsoft Access for support on an Intranet page. I borrowed from a tutorial code but I cant seem to figure out how to get the Javascript to recognize my values in the xml file. I believe my issue is related to the formatting of the xml file. The example is formatted like Code: <index> <name><![CDATA[ Paul ]]></name> <age><![CDATA[ 26 ]]></age> <height><![CDATA[ 6'0" ]]></height> </index> While my access file exports a little messy... Sadly, unless this can be changed.. I would love to just enter the code myself for each entry.. but I need it to be exportable and immediately updated to the Javascript search. Access exports like this. Code: <Employee_x0020_Database> <Employee_x0020_Number>200786</Employee_x0020_Number> <First_x0020_Name>Stacey</First_x0020_Name> <Middle_x0020_Name>Leanne</Middle_x0020_Name> <Last_x0020_Name>Evans</Last_x0020_Name> <Gender>F</Gender> <Date_x0020_of_x0020_Hire>2005-04-07T00:00:00</Date_x0020_of_x0020_Hire> <Position>Cashier</Position> </Employee_x0020_Database> Any advice on how I can get Javascript to recognize the values without a CDdata tag? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Search</title> <script type="text/javascript"> window.onload = loadIndex; function loadIndex() { // load indexfile // most current browsers support document.implementation if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.load("index.xml"); } // MSIE uses ActiveX else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("index.xml"); } } function searchIndex() { // search the index (duh!) if (!xmlDoc) { loadIndex(); } // get the search term from a form field with id 'searchme' var searchterm = document.getElementById("searchme").value; var allitems = xmlDoc.getElementsByTagName("item"); results = new Array; if (searchterm.length < 3) { alert("Enter at least three characters"); } else { for (var i=0;i<allitems.length;i++) { // see if the XML entry matches the search term, // and (if so) store it in an array var name = allitems[i].lastChild.nodeValue; var exp = new RegExp(searchterm,"i"); if ( name.match(exp) != null) { results.push(allitems[i]); } } // send the results to another function that displays them to the user showResults(results, searchterm); } } // Write search results to a table function showResults(results, searchterm) { if (results.length > 0) { // if there are any results, write them to a table document.write('<div><a href="search.html">New Search</a></div>You searched for <b><i>'+searchterm+'</i></b><br><br>'); document.write('<table border="1" style="width: 100%;">'); document.write('<tr><th>NAME</th><th>AGE</th><th>HEIGHT</th><th>WEIGHT</th></tr>'); for(var i=0; i<results.length; i++) { document.write('<tr>'); document.write('<td>' + results[i].getAttribute("name") + '</td>'); document.write('<td>' + results[i].getAttribute("age") + '</td>'); document.write('<td>' + results[i].getAttribute("height") + '</td>'); document.write('<td>' + results[i].getAttribute("weight") + '</td>'); document.write('</tr>'); } document.write('<table>'); document.close(); } else { // else tell the user no matches were found var notfound = alert('No results found for '+searchterm+'!'); } } </script> </head><body> <form action=""><b>Search: </b><input id="searchme" type="text" size="20"> <input value="Submit" onClick="searchIndex(); return false;" type="submit"></form> </body></html> Thanks for helping me with this... Totally way over my head on this one. Delvok This is a follow up to my older thread, about tables and finding images within them. So after getting some help from "Krupski" I found myself stuck again. I'm trying to go at this rather from an other point of view, instead of getting the cell information I am now trying to get the alt text value. from within the image tag. but being a novice at this well ive hit a wall. My code so far. searches though the table finding the sad images then i want it to display the Alt-text or an other value table_id or similar. also is there a fast way of putting in Alt text like A1,2,3 B1,2,3 etc like an automated loop. (might work on this after the main problem is dealt with) Code: <html> <head> <script type="text/javascript"> var findImg = function(name) { var e = document.getElementsByTagName('img'); var i = e.length; // how many img elements total var str = ''; while (i--) { if (e[i].src.indexOf(name) != -1) // if match... str += e[i].src + '\n'; //...copy to str with a newline } alert(str); // display all matches } function searchFor(){ findImg('smiley%20sad%20Icon.jpg'); // call the function with the name to be matched } </script> </head> <body> <table width="200" border="1"> <tr Id="A"> <td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="A1"> </td> <td Id="2"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="A2"> </td> <td Id="3"><img src="http://www.iconeasy.com/icon/thumbnails/System/Icons%20for%20Developers/smiley%20sad%20Icon.jpg" Alt="A3"></td> </tr> <tr Id="B"> <td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="B1"></td> <td Id="2"><img src="http://www.iconeasy.com/icon/thumbnails/System/Icons%20for%20Developers/smiley%20sad%20Icon.jpg" Alt="B2"></td> <td Id="3"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="B3"></td> </tr> <tr Id="C"> <td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="C1"></td> <td Id="2"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="C2"></td> <td Id="3"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png" Alt="C3"></td> </tr> </table> <br> <input type="button" value="Search" id="Search" onClick="searchFor();"/> </body> </html> Thanks in advance anyone who can help. ~Mark j hi, im fairly new to javascript but i know the basics. im just wondering is there a possibility to make a search that will connect to my databse with a product list in it, and then display any matches to what the user searched for? help is always helpful Hello; New to Javascripting, new to forum. I searched the forum, and tried to adapt, to no avail. I am building a store and want users to be able to see how two items look together. I have it working, but it uses a drop down. I would like to display many items and have the user click on one "image", from the display of "top" images, to display it on top, and from another section of "bottom" images, click another image to display it on bottom. For instance to see what one plant would look like in different vases. If I could be picky, is there a way to make it all happen in the BODY of the page? I use DW and a template. Code: <html> <head> <script language="javascript"> function showimage() { if (!document.images) return document.images.pictures.src= document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value document.images.pictures2.src= document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value } //--> </script> </head> <body> <p class="style1">Try a few selections for your gift.</p> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><form name="mygallery"><select name="picture" size="1" onChange="showimage()"> <option selected value="images/bear1.jpg">Bear 1</option> <option value="images/bear2.jpg">Bear 2</option> <option value="images/plant1.jpg">Plant 1</option> <option value="images/plant2.jpg">Plant 2</option> <option value="images/plant3.jpg">Plant 3</option> </select> </form> </td> <td><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/bear1.jpg" name="pictures" width="150" border=0></a></td> </tr> <tr> <td><form name="mygallery2"><select name="picture2" size="1" onChange="showimage()"> <option selected value="images/cup1.jpg">Mug 1</option> <option value="images/cup2.jpg">Mug 2</option> </select> </form> </td> <td><a href="javascript:linkrotate(document.mygallery2.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/cup1.jpg" name="pictures2" width="150" border=0></a></td> </tr> </table> </body> </html> Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?
Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" type="text/css" href="<?php $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/php/fleet/includes/website.php"; include_once($path); ?>/php/font.css"></style> </head> <body> <script type="text/javascript"> var showndiv=false; function show() { document.getElementById('fleet1').innerHTML=""; if (showndiv){document.getElementById(showndiv).style.display = 'none'; } theval=Number(document.getElementById('tb').value); switch (theval){ case 120: showndiv='fleet2' break; case 121: showndiv='fleet3' break; case 122: showndiv='fleet4' break; default: document.getElementById('fleet1').innerHTML="Sorry, nothing found" return; } document.getElementById(showndiv).style.display = 'block'; } </script> <script type="text/javascript"> ///////////////////////////////////////////////////// // Between the quotation marks, list the id values of each div. var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4"; ///////////////////////////////////////////////////// IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," "); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," "); var IDlist = IDvaluesOfEachDiv.split(" "); function ShowAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = ""; } } function HideAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = "none"; } } </script> <form name="myForm"> <input type="text" id="tb"> <input type="button" value="Search" onclick="show()"> </form> <div id="fleet1" style="display:block"> </div> <div id="fleet2" style="display:none" class="fleetdiv"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W599 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table> <table align="right"> <TR> <TD> <a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr> </table> <div id="fleet3" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W601 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> <div id="fleet4" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">122</FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W602 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> </body> </html> http://nctfleetlist.co.uk/div3.php I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. |