JavaScript - Javascript Fails In Chrome N Safari But Works In Ie, Multiple Dependancy Form Select
hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone.
i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. Similar TutorialsI am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over. Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari. I tried it in IE and everything still works. Any ideas on why it would stop working for those two browsers? Here is the javascript: Code: function init(){ document.getElementsByTagName('area')[0].onmouseover=function(){ document.getElementById('crocodileImg').src='Images/crocodileHover.png'; this.onmouseout=function() { document.getElementById('crocodileImg').src='Images/crocodile.png'; } } document.getElementsByTagName('area')[1].onmouseover=function(){ document.getElementById('historyImg').src='Images/historyHover.jpg'; this.onmouseout=function() { document.getElementById('historyImg').src='Images/history.jpg'; } } document.getElementsByTagName('area')[2].onmouseover=function(){ document.getElementById('applyImg').src='Images/applyHover.jpg'; this.onmouseout=function() { document.getElementById('applyImg').src='Images/apply.jpg'; } } document.getElementsByTagName('area')[3].onmouseover=function(){ document.getElementById('applyImg').src='Images/membersHover.jpg'; this.onmouseout=function() { document.getElementById('applyImg').src='Images/apply.jpg'; } } document.getElementsByTagName('area')[4].onmouseover=function(){ document.getElementById('mediaImg').src='Images/mediaHover.jpg'; this.onmouseout=function() { document.getElementById('mediaImg').src='Images/media.jpg'; } } } if(window.addEventListener){ window.addEventListener('load',init,false); } else { if(window.attachEvent){ window.attachEvent('onload',init); } } I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case: Code: <div id="crocodile"> <img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" /> <map id="crocodileImg" name="crocodileImg"> <area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" /> </map> </div> <div id="history"> <img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" /> <map id="historyImg" name="historyImg"> <area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" /> </map> </div> <div id="apply"> <img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" /> <map id="applyImg" name="applyImg"> <area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" /> <area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" /> </map> </div> <div id="media"> <img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" /> <map id="mediaImg" name="mediaImg"> <area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" /> </map> </div> Thank you for any replies. Can anyone tell me why the following works in IE but not the other browsers? It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm Code: <TD> <form name="whichCat" style="margin-bottom:0" method="get"> <select name="catChoice" onChange="sendValue(this);"> <option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option> <option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option> <option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option> <option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option> <option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option> <option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option> <option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option> <option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option> <option class="news4" value="php/Naval.php?q=Naval">Naval</option> <option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option> <option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option> <option class="news4" value="php/Other.php?q=Other">Other</option> </select> </form> </TD> I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error: Error: document.getElementById("SB_Frame") is null Source File: http://savasbeatie.com/jscripts/SB_util.js Line: 11 I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag. Thanks for any help. - David Hey Everyone, I have a simple Java Script function I setup for a pop up that requests a discount code. Works awesome in Chrome, FF and on smart phones... but IE and Safari don't work at all. Here is the code.. This is in my header <script> function passWord1018() { var testV = 1; var pass1 = prompt('Please Enter The Discount Code',' '); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "ultra") { alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page'); window.open('discounted101018.aspx'); break; } if (pass1.toLowerCase() == "sexydiscount") { alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page'); window.open('discounted201018.aspx'); break; } testV+=1; var pass1 = prompt('Code Denied - Code Incorrect, Please Try Again.','Code'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; } </script> This is in the body <center> <form> <br /> <input type="button" value="Enter Discount Code" onclick="passWord1018()" /> </form> </center> I found on another site where someone mentioned the <center> tags are not used anymore, but i tried removing those and still nothing... Any insight would be helpful...Thanks Jason ok so ive nearly finished the animated javascript in my site. http://calumk.com/ to see the effect launch in chrome or safari, it works fine.. but its not working in Firefox (and i havent tested IE.. if someone could, i would appreciate it) i have no-idea why.. . im using the http://berniecode.com/writing/animator.html library which works fine in all browsers.. Any help would be apreciated... I would post the code, but its probably easier if you just view source I have an "animated slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. There is an error in there somewhe <html> <head> <title>My webpage</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <SCRIPT language="JavaScript" type="text/JavaScript"> <!-- var speed=1333; var counter = 1; function rollPics() { document.display.src=counter+".jpg"; //Display image "counter".jpg counter ++; // Add 1 to counter if (counter>29) { // If counter is greater than 29 images then reset it counter=1 } } <!-- END --> </SCRIPT> </head> <body> <center> <table> <tr><td> <IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)"> </td></tr> </table> </center> </body> </html> hi, i got this javascript function which run perfectly in IE but does not work in Mozilla. Any idea ? function Changed() { var theGridView = document.getElementById('MainContent_GridViewRDR1_Hidden'); var sum = 0; var total = 0; var totalFinal = 0; for (var i = 0; i < theGridView.rows.length; i++) { var csValue = document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + ''); var pcsValue = document.getElementById('MainContent_GridViewRDR1_Hidden_PCSTxt_' + i + ''); if (csValue.value != '') { if (pcsValue.value != '') { alert('Pcs already have value') document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = ''; break; } if (isNaN(csValue.value)) { alert('Please enter number') document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = 0; document.getElementById('MainContent_TextBox1').innerText = 0; document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = 0; break; } var unitPriceValue = theGridView.rows(i + 1).cells(7).innerText; var unitUOM = theGridView.rows(i + 1).cells(5).innerText; sum = (parseFloat(csValue.value) * parseFloat(unitPriceValue) * parseFloat(unitUOM)).toString(); sum = roundVal(sum); document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = sum; total += sum; total = roundVal(total); document.getElementById('MainContent_TextBox1').innerText = total; } else { sum = 0; } } total = roundVal(total); totalFinal += total document.getElementById('MainContent_TextBox1').innerText = totalFinal; } Code: function toggle(div_id) { var el = document.getElementById(div_id); if ( el.style.display == 'none' ) { el.style.display = 'block';} else {el.style.display = 'none';} } function blanket_size(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } else { viewportheight = document.documentElement.clientHeight; } if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { blanket_height = viewportheight; } else { if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { blanket_height = document.body.parentNode.clientHeight; } else { blanket_height = document.body.parentNode.scrollHeight; } } var blanket = document.getElementById('blanket'); blanket.style.height = blanket_height + 'px'; var popUpDiv = document.getElementById(popUpDivVar); popUpDiv_height=200 popUpDiv.style.top = popUpDiv_height + 'px'; } function window_pos(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerHeight; } else { viewportwidth = document.documentElement.clientHeight; } if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { window_width = viewportwidth; } else { if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { window_width = document.body.parentNode.clientWidth; } else { window_width = document.body.parentNode.scrollWidth; } } var popUpDiv = document.getElementById(popUpDivVar); window_width=window_width/2-150;//150 is half popup's width popUpDiv.style.left = window_width + 'px'; } function popup(windowname) { blanket_size(windowname); window_pos(windowname); toggle('blanket'); toggle(windowname); } I have know much about javascript, but the code above works fine in safari and firefox but not IE. it's for a popup, when you click a link it blankets the page and theres a popup window. here's other parts of supporting css/php Code: <?php if(!$_POST['submit'] == 'login'){ echo "<div id=\"blanket\" style=\"display:none;\"></div>\n"; echo "<div id=\"popUpDiv\" style=\"display:none;\">\n"; echo "<div id=\"loginform\">\n"; echo '<div id="close">'; echo "<a href=\"#\" onclick=\"popup('popUpDiv')\">\n"; echo '<img src="images/login/close.png" border="0">'; echo "</a>\n"; echo '</div>'; echo '<div class="clear"></div>'; echo "<form name=\"login\" method=\"post\" action=\"#\">\n"; echo "<div id=\"usernametext\">Username</div>\n"; echo "<input name=\"username\" type=\"text\" id=\"usernameinput\">\n"; echo '<div class="clear"></div>'; echo "<div id=\"passwordtext\">Password</div>\n"; echo "<input name=\"password\" type=\"password\" id=\"passwordinput\">\n"; echo '<div class="clear"></div>'; echo '<div id="loginsubmit"><input type="submit" name="submit" value="Submit"></div>'; echo "</form>\n"; echo "</div>\n"; echo "</div>\n"; echo "<span class=\"login_text\"><a href=\"#\" onclick=\"popup('popUpDiv')\">LOG IN</a></span>\n"; ?> Code: #blanket { background-color:#000000; opacity: 0.40; filter:alpha(opacity=40); position:absolute; z-index: 10; padding:0; top:0; right:0; left:0; bottom:0; width:100%; height:100%; margin:0 0 0 0; } #popUpDiv { position:absolute; background-color:#FFFFFF; width:280px; height:135px; z-index: 10; } any help would be VERY much appreciated. thanks Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){ var imgTitle = $(this).find('a').attr("href"); var imgDesc = $(this).find('.block').html(); var imgDescHeight = $(".main_image").find('.block').height(); if ($(this).is(".active")) { return false; } else { console.log(imgTitle); $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image embed").attr({ src: imgTitle}); }); } $(".image_thumb ul li ul li").removeClass('active'); $(this).addClass('active'); return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); Thanks for response. I have a form that passes values to a next step. It has two sub divs that show depending on what's selected from the dropdowns in the top two divs. I'm trying to keep the selected sub divs open if the user hits previous step. The divs stay open in FF but not in IE. Any ideas? dropdowns Code: <table border="0" cellspacing="0" cellpadding="2"> <tr valign="top"> <td align="right">Morning:</td> <td><select name="wcsave_10_msession" id="wcsave_10_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Concurrent sessions 1-6');"> <option value="" selected="selected">Choose one</option> <option value="Mastery session 1 - Computer Lab: Searching Essentials"> <strong>Mastery session 1</strong> - Computer Lab: Searching Essentials</option> <option value="Concurrent sessions 1-6">Concurrent sessions 1-6</option> </select> </td> </tr> <tr valign="top"> <td> </td> <td> <div id="Concurrent sessions 1-6" style="display: none;"> <table class="special"> <tr valign="top"> <td>Choose a session for each time slot.<br /> (9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session 1 - IRB 101 for Research Nurses">Concurrent session 1 - IRB 101 for Research Nurses</option> <option value="Concurrent session 2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session 2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option> <option value="Concurrent session 3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session 3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option> </select> </td> </tr> <tr valign="top"> <td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session 4 - Making Sense of Statistics When Reading Research">Concurrent session 4 - Making Sense of Statistics When Reading Research</option> <option value="Concurrent session 5 - Original Research Presentations">Concurrent session 5 - <em>Original Research Presentations</em></option> <option value="Concurrent session 6 - IRB Considerations with Vulnerable Populations">Concurrent session 6 - IRB Considerations with Vulnerable Populations</option> </select> </td> </tr> </table> </div> </td> </tr> <tr valign="top"> <td colspan="2"> </td> </tr> <tr valign="top"> <td align="right">Afternoon:</td> <td><select name="wcsave_10_asession" id="wcsave_10_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Concurrent sessions 7-12');"><!--showDiv(this.value)--> <option value="" selected="selected">Choose one</option> <option value="Mastery session 2 - Beyond the Basics of Searching!"><strong>Mastery session 2</strong> - Beyond the Basics of Searching!</option> <option value="Concurrent sessions 7-12">Concurrent sessions 7-12</option> </select> </td> </tr> <tr valign="top"> <td> </td> <td> <div id="Concurrent sessions 7-12" class="hiddenDiv"> <table class="special"> <tr valign="top"> <td>Choose a session for each time slot.<br /> (1:45 p.m. - 2:45 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1"> <option value="" selected="selected">Choose one</option> <option value="" selected="selected">Choose one</option> <option value="Concurrent session 7 - EBP Protocols">Concurrent session 7 - EBP Protocols</option> <option value="Concurrent session 8 - Writing for Publication">Concurrent session 8 - Writing for Publication</option> <option value="Concurrent session 9 - Original Research Presentations">Concurrent session 9 - Original Research Presentations</option> </select> </td> </tr> <tr valign="top"> <td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2"> <option value="" selected="selected">Choose one</option> <option value="Concurrent session 10 - Writing a Research Question Using PICO">Concurrent session 10 - Writing a Research Question Using PICO</option> <option value="Concurrent session 11 - EBP Project Presentations">Concurrent session 11 - EBP Project Presentations</option> <option value="Concurrent session 12 - The Role of the Research Facilitator">Concurrent session 12 - The Role of the Research Facilitators</option> </select> </td> </tr> </table> </div> </td> </tr> </table> javascript: Code: var lastDiv = ""; function showDiv(divName) { var items = document.getElementById('wc_addItem_ADV'); var form = document.getElementById('webcredit'); var total = document.getElementById('Total'); var amount = document.getElementById('amount'); // set checkboxes to 0 for (var i = 0; i < form.elements.length; i++ ) { if (form.elements[i].type == 'checkbox') { form.elements[i].checked = false; document.getElementById(form.elements[i].id).value = "0"; } } total.value = ''; amount.value= ''; // hide last div if (lastDiv) {document.getElementById(lastDiv).className = "hiddenDiv";} //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } function showInitialDiv() { var selBox = document.getElementById('wcsave_10_session_mconc1'); if (selBox == undefined || selBox == null) return; var val = selBox.options[selBox.selectedIndex].value; if (val == null || val == '') return; showDiv(val); } I only call one of the sub div ID's but it seems to work in FF with no errors. Everything is called with: Code: <body onload="showInitialDiv();"> Ok, This one has plagued me for some time now. I am parsing an XML file for a search feature. On my local machine, the code below works fine in FF, but when I upload it, I get an error stating y[0] (the root element) is undefined. I think the problem may be with my onload method but I can't be sure. Code: function importXML() { if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.onload = createTable; } else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.onreadystatechange = function () { if (xmlDoc.readyState==4) createTable(); } } else { alert('Your browser can\'t handle this script'); return; } xmlDoc.load("catalog.xml"); } // and now for the part that fails var y = xmlDoc.getElementsByTagName('data'); var dcount = 0; for (t=0;t<y[0].childNodes.length;t++) { //this is the line where FF reports the error if (y[0].childNodes[t].tagName == "record") { dcount++; } } The xml syntax is as follows Code: <data> <record> <item 1>text</item 1> <item 2>text</item 2> <item 3>text</item 3> </record> <record> <item 1>text</item 1> <item 2>text</item 2> <item 3>text</item 3> </record> </data> I just can't figure out why this works locally and not on the server. IE works fine, but then again it uses the activeXObject method so it should function differently. hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 My page is working as I want it to in firefox and IE. well almost fully in IE... Anyways at the top of my page I am using an fx.slide that does not work at all in safari or chrome and was wondering if anyone here could shed some light as to why? here is the page in question Any help would be great. Thanks so much. Hello all, I'm back with more silly newbie questions. I'm building a website that includes 3 javascript codes: 1. Onmouseover image switch for the nav bar. 2. On a specific page, onmouseover display of hidden divs. 3. Particletree's Dynamic Resolution Dependent Layout script (http://particletree.com/features/dyn...ndent-layouts/) All three scripts work fine in firefox, but the 2nd script doesn't work in safari and chrome, and the 3rd one doesn't work in safari, chrome and IE(8). Since the 1st one works fine in all browsers, I'm guessing this isn't a problem with my javascript link or anything like that. The website is: www.sheket.co.il/index4.html The specific page that runs the 2nd code is: www.sheket.co.il/services.html My javascript is: http://www.sheket.co.il/javascript.js And my default stylesheet is: http://www.sheket.co.il/style.css (I apologize for possible jibrish- the website is in Hebrew...) Any help with these two problems would be greatly appreciated! Go figure huh??? Anyways I have a script a co-worker wrote and it works in FF and Chrome but IE will not work. Get's a 'activeTab' is null or not an object error, I checked for commas and fixed a semi-colon that was missing in two spots but not change in IE. Anyone willing to throw me a bone? code below: Code: <table class="tan-header rounded-box" style="padding:0px;border:0px;width:560px" cellspacing=0 cellpadding=0> <tr class="headerrow"> <td class="main"> <div style="font-weight:bold;padding-top:4px;"> <span ID="Sample Pricing _show" class="arrow-box" style="display:none;"><a href="javascript:Expand('Sample Pricing ');"> <img alt="Click arrow to expand this panel" src="images/right.png" border=0 align="absmiddle"></a></span> <span ID="Sample Pricing _hide" class="arrow-box"><a href="javascript:Contract('Sample Pricing ');"> <img alt="Click arrow to collapse this panel" src="images/down.png" border=0 align="absmiddle"></a></span> Sample Pricing </div> </td> <td class="end"></td> </tr> <tr class="contentrow"> <td class="main"> <div id="Sample Pricing "> <p><em>Based on the following spec's: </em></p> <ul> <li>8.5 x 11 </li> <li>70# high quality opaque paper</li> </ul> <p align="center"> </p> <div align="center"> <table id="pricing_table_tabs"> <th> <td id="option1" class="active_pricing_table_tab">Option 1</td> <td id="option2" class="">Option 2</td> </th> </table> <table width="494" border="1" id="pricing_table1" class="active_table"> <tr> <th width="80" height="30" scope="col">Quantity</th> <th width="95" scope="col">1 Color </th> <th width="95" scope="col">2 Colors</th> <th width="95" scope="col">4 Colors</th> <th width="95" scope="col"> </th> </tr> <tr> <td><div align="center">250</div></td> <td><div align="center">$197.69</div></td> <td><div align="center">$221.58</div></td> <td><div align="center">$420.26</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">500</div></td> <td><div align="center">$210.78</div></td> <td><div align="center">$233.79</div></td> <td><div align="center">$434.75</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">1000</div></td> <td><div align="center">$238.92</div></td> <td><div align="center">$262.30</div></td> <td><div align="center">$446.18</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">2000</div></td> <td><div align="center">$298.84</div></td> <td><div align="center">$316.78</div></td> <td><div align="center">$481.68</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">2500</div></td> <td><div align="center">$328.26</div></td> <td><div align="center">$345.55</div></td> <td><div align="center">$499.10</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">3000</div></td> <td><div align="center">$358.50</div></td> <td><div align="center">$373.05</div></td> <td><div align="center">$513.08</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">4000</div></td> <td><div align="center">$416.68</div></td> <td><div align="center">$430.29</div></td> <td><div align="center">$548.58</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">5000</div></td> <td><div align="center">$476.63</div></td> <td><div align="center">$485.45</div></td> <td><div align="center">$585.15</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">10000</div></td> <td><div align="center">$713.26</div></td> <td><div align="center">$758.94</div></td> <td><div align="center">$751.91</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">15000</div></td> <td><div align="center">$879.51</div></td> <td><div align="center">$925.01</div></td> <td><div align="center">$919.47</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">20000</div></td> <td><div align="center">$1041.92</div></td> <td><div align="center">$1092.30</div></td> <td><div align="center">$1085.25</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> </table> <table width="494" border="1" id="pricing_table2" class="inactive_table"> <tr> <th width="80" height="30" scope="col">Quantity</th> <th width="95" scope="col">1 Color </th> <th width="95" scope="col">2 Colors</th> <th width="95" scope="col">4 Colors</th> <th width="95" scope="col"> </th> </tr> <tr> <td><div align="center">250</div></td> <td><div align="center">$1</div></td> <td><div align="center">$2</div></td> <td><div align="center">$4</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">500</div></td> <td><div align="center">$2</div></td> <td><div align="center">$2</div></td> <td><div align="center">$4</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">1000</div></td> <td><div align="center">$238.92</div></td> <td><div align="center">$262.30</div></td> <td><div align="center">$446.18</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">2000</div></td> <td><div align="center">$298.84</div></td> <td><div align="center">$316.78</div></td> <td><div align="center">$481.68</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">2500</div></td> <td><div align="center">$328.26</div></td> <td><div align="center">$345.55</div></td> <td><div align="center">$499.10</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">3000</div></td> <td><div align="center">$358.50</div></td> <td><div align="center">$373.05</div></td> <td><div align="center">$513.08</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">4000</div></td> <td><div align="center">$416.68</div></td> <td><div align="center">$430.29</div></td> <td><div align="center">$548.58</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">5000</div></td> <td><div align="center">$476.63</div></td> <td><div align="center">$485.45</div></td> <td><div align="center">$585.15</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">10000</div></td> <td><div align="center">$713.26</div></td> <td><div align="center">$758.94</div></td> <td><div align="center">$751.91</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">15000</div></td> <td><div align="center">$879.51</div></td> <td><div align="center">$925.01</div></td> <td><div align="center">$919.47</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> <tr> <td><div align="center">20000</div></td> <td><div align="center">$1041.92</div></td> <td><div align="center">$1092.30</div></td> <td><div align="center">$1085.25</div></td> <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td> </tr> </table> </div> <p align="center"> </p> <p align="center"><strong>Can't find what you are looking for - <a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Request_Estimate/form.mdl&FORM_Form_ID=42195">click here</a> to request a custom quote. </strong></p> </body> </html> </div> <div ID="Sample Pricing _instr" class="detail" style="display:none"> (Click the triangle above to expand this panel.) </div> </td> <td class="end"></td> </tr> <tr class="footerrow"> <td class="main"></td> <td class="end"></td> </tr> </table> <br> <style> #pricing_table_tabs{ border-collapse: collapse; } #pricing_table_tabs td{ border: 2px solid #ccc; padding: 5px; font-size:1.2em; font-weight:bold; } #pricing_table_tabs td:hover{ cursor: pointer; } .active_pricing_table_tab{ background-color: black; border-style: inset; color:white; } .active_table{display:block;} .inactive_table{display:none;} </style> <script language="javascript" type="text/javascript"> var activeTab = document.getElementById("option1"); var activePricingTable = document.getElementById("pricing_table1"); function activateTab() { if(activeTab) { activeTab.className = ""; activeTab = document.getElementById(this.id); activeTab.className = "active_pricing_table_tab"; activatePricingTable(activeTab.id); } else { activeTab = document.getElementById(this.id); activeTab.className = "active_pricing_table_tab"; activatePricingTable(activeTab.id); } } function activatePricingTable(activeTabId) { if(activePricingTable) { activePricingTable.className = "inactive_table"; activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1)); activePricingTable.className = "active_table"; } else { activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1)); activePricingTable.className = "active_table"; } } for(i=1; i<=2; i++){ if (window.addEventListener){ document.getElementById("option" + i).addEventListener("click", activateTab, false); } else{ document.getElementById("option" + i).attachEvent("onclick", activateTab); } } </script> Hi, I'm new to this forum so please forgive me on any errors I may have made. I am working on a simple site for the company that I work for that allows a customer to input a 5 digit code in and returns what prize they have won. I found some code on a website which done the trick but it doesn't work in Chrome and Safari. My Javascript knowledge is extremely limited but I think I've narrowed it down to the "document.implentation.createDocument" line although the few fixes I've found, I can't get to work. Here is the code I have at the moment before I applied the fixes (this works in FF and IE). Code: <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("results.xml"); } // MSIE uses ActiveX { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("results.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 < 4) { alert("Please re-check and enter your 5 digit code"); } 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('<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="cno-competition.css" rel="stylesheet" type="text/css" /></head><body>'); document.write('<div id="container"><div id="logo"></div><div id="prizeContent"><img src="media/new-york.jpg" width="750" height="500" alt="New York" />'); for(var i=0; i<results.length; i++) { document.write('<h1>Congratulations</h1><p>You entered prize code <b><i>'+searchterm+'</i></b> and have won a <span style="font-weight:bold; color:#75ACC1">' + results[i].getAttribute("prize") + '</span>.</p>'); } document.write('<p>To claim your prize please contact the Complete Night Out team on 01908 544445.</p>'); document.write('</div></div></body></html>'); document.close(); } else { // else tell the user no matches were found var notfound = alert('No results found for '+searchterm+'! Please re-check and enter your 5 digit code'); } } </script> The fix I found added the below into the code but I couldn't get it to work using this. Link here. Code: var xmlhttp = new window.XMLHttpRequest(); xmlhttp.open("GET","results.xml",false); xmlhttp.send(null); xmlDoc = xmlhttp.responseXML.documentElement; Any help would be much appreciated. If you would like to see the site live please click here Thank you. Kishan Scroll down to the bottom. Click on an "X" button to bring up a DHTML popup. Select an item. When the DHTML closes and the original HTML is updated the browser scrolls to top. Is there a way to stop this by wrapping it somehow in a container, since you can't stop the scroll event?
Code: <html> <head> <title> Vendor Management</title> </head> <body> <table border="0" width="100%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="2" align="left" valign="top"> <img src=""/> </td> <td><img src=""/></td> </tr> <tr> <td align="left" valign="top"> <a href=""/></a> <a href=""/></a> <a href=""/></a> </td> <td align="left"> <img src=""/> </td> <td> <img src=""/> </td> </tr> <tr> <td> <span class="pageHeading" align="left"> Web Administrator </span> </td> </tr> </table> <br/> <form name="form" method="post" action=""> <table width="100%"> <tr> <td width="5%"></td> <td align="left"> <p class="filter"> All<br/> All<br/> </p> </td> <td> <table width="40%" border="1" > <tr> <td class="h" colspan="2">Color Key </td> </tr> <tr> <td class="S "> </td><td class="small">The is being negotiated. The administrator may finalize the when it is complete.</td> </tr> <tr> <td class="SAVA">Awaiting Vendor Approval </td><td class="small">The has been finalized and is waiting for the Vendor to sign it.</td> </tr> <tr> <td class="SLocked">Locked</td><td class="small">The has been finalized and signed. All the Locked items in the will be in the show.</td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <table align="center"> <tr> <td>Search:</td> <td> <input name="searchValue" id = "searchValue" type="text" size="24" value=""> </td> <td> By </td> <td> <select name="searchColumn" id="searchColumn"> <option value="VENDOR_NAME" SELECTED> Vendor Name</option> <option value="VENDOR_NUMBER" > Vendor Number</option> </select> </td> <td> And </td> <td> <select name="searchQualifier" id="searchQualifier"> <option value="CONTAINS" SELECTED>Contains</option> <option value="STARTS_WITH" >Starts With</option> <option value="ENDS_WITH" >Ends With</option> </select> </td> <td> <input type="button" name="SearchButton" id="SearchButton" value="Search" onClick="onVendorSearch()"> </td> <td> <input type="button" name="ClearSearchButton" id="ClearSearchButton" value="Clear" onClick="onVendorClear()"> </td> </tr> </table> </td> </table> <table width="90%" align="center" > <tr align="center"> <td colspan="3"> <br> <input name="reference" type="hidden" value="viewVendorUsersCheck"> <input name="action" type="hidden" value="delete"> </td> </tr> </table> <table id="results" width="100%" border="1" style="border-color:black" align="left"> <!-- START OF DATA --> <tr class="S "> <td> <a name="">005890</a></td> <td> Ivy-Dry, Inc</td> <td> </td> <td> </td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_005890" name="vendorBooth_005890" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_005890" id="vendorBoothBtn_005890" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td> <a href=""> </a> </td> <td>8</td> <td>0</td> <td>0</td> <td></td> <td>20141</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="006867">006867</a></td> <td> Pacific World Corporation</td> <td> </td> <td> </td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_006867" name="vendorBooth_006867" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_006867" id="vendorBoothBtn_006867" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20154</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">006952</a></td> <td> Prince Of Peace Enterprises</td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_006952" name="vendorBooth_006952" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_006952" id="vendorBoothBtn_006952" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20155</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">006996</a></td> <td> Bayer , Division</td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_006996" name="vendorBooth_006996" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_006996" id="vendorBoothBtn_006996" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>21</td> <td>0</td> <td>0</td> <td></td> <td>20156</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007003</a></td> <td> Kerr Group, Inc. / Kerr </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007003" name="vendorBooth_007003" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007003" id="vendorBoothBtn_007003" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>92</td> <td>0</td> <td>0</td> <td></td> <td>20157</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007010</a></td> <td> Unilever</td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007010" name="vendorBooth_007010" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007010" id="vendorBoothBtn_007010" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>160</td> <td>0</td> <td>0</td> <td></td> <td>20158</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007057</a></td> <td> Pfizer </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007057" name="vendorBooth_007057" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007057" id="vendorBoothBtn_007057" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>9</td> <td>0</td> <td>0</td> <td></td> <td>20159</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007060</a></td> <td> Johnson & </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007060" name="vendorBooth_007060" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007060" id="vendorBoothBtn_007060" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>71</td> <td>0</td> <td>0</td> <td></td> <td>20160</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007112</a></td> <td> Colgate-Palmolive </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007112" name="vendorBooth_007112" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007112" id="vendorBoothBtn_007112" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>39</td> <td>0</td> <td>0</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007120</a></td> <td> W.F. Young, </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007120" name="vendorBooth_007120" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007120" id="vendorBoothBtn_007120" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20162</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007120</a></td> <td> W.F. Young, </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007120" name="vendorBooth_007120" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007120" id="vendorBoothBtn_007120" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td> <a href=""> </a> </td> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20162</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007120</a></td> <td> W.F. Young, </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007120" name="vendorBooth_007120" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007120" id="vendorBoothBtn_007120" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20162</td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="">007120</a></td> <td> W.F. Young, </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007120" name="vendorBooth_007120" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007120" id="vendorBoothBtn_007120" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td> </td> <td>0</td> <td>0</td> <td>0</td> <td></td> <td></td> <td> </td> <td> </td> <td> </td> <td></td> </tr> <tr class="S "> <td> <a name="">007167</a></td> <td> 3M </td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_007167" name="vendorBooth_007167" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_007167" id="vendorBoothBtn_007167" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>0</td> <td>0</td> <td>0</td> <td></td> <td>20163</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="S "> <td> <a name="008877">008877</a></td> <td> x Brands</td> <td></td> <td></td> <td> <table> <tr> <td> <input type="text" id="vendorBooth_008877" name="vendorBooth_008877" readonly title="" /> </td> <td> <input type="button" value="X" name="vendorBoothBtn_008877" id="vendorBoothBtn_008877" onclick="DCCshowBoothList(this.id)" </td> </tr> </table> <td>3</td> <td>0</td> <td>0</td> <td></td> <td>20168</td> <td></td> <td></td> <td></td> </tr> <tr align="center" bgcolor="9999FF" class="e"> <td></td> </tr> <tr bgcolor="9999FF" class="h"> <td colspan="11" class="h"> Vendor Users and s: </td> <td class="h" align="center"><input type="submit" name="Submit" value="Submit"></td> <td colspan="4" class="h"></td> </tr> </table> <script type="text/javascript"> window.onload = function () { DCCinitPage(); }; function DCCinitPage() { var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEDOWN); document.onmousedown = DCCmousePosition; } function DCCmousePosition(e) { var IE = document.all?true:false; var tempX = 0; var tempY = 0; if (IE) { tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { tempX = e.pageX; tempY = e.pageY; } if (tempX < 0){tempX = 0;} if (tempY < 0){tempY = 0;} DCCmouse.setLeft(tempX); DCCmouse.setTop(tempY); return true; } function DCCmouseClass() { this.left = 0; this.top = 0; this.setLeft = function (left) { this.left = left; } this.getLeft = function() { return this.left; } this.setTop = function (top) { this.top = top; } this.getTop = function() { return this.top; } } var DCCmouse = new DCCmouseClass(); function DCCshowBoothList(thisId) { var indexOfNumber = thisId.indexOf("vendorBoothBtn_"); var thisNumber = thisId.substring(indexOfNumber + 15); document.forms[0].tempVendorNumber.value = thisNumber; document.getElementById("DCCboothList").style.top = (DCCgetWindowTop() + 20) + "px"; document.getElementById("DCCboothList").style.left = (DCCmouse.getLeft() + 15) + "px"; document.getElementById("DCCboothList").style.display=""; } function DCCcloseBoothList() { document.getElementById("DCCboothList").style.display="none"; } function DCCboothSelected(boothId) { document.getElementById("DCCboothList").style.display="none"; var indexOfNumber = boothId.indexOf("boothNumber_"); var indexOfIndex = boothId.indexOf("index_"); var indexOfName = boothId.indexOf("name_"); var boothNumber = boothId.substring(indexOfNumber + 12, indexOfIndex); var boothIndex = boothId.substring(indexOfIndex + 6, indexOfName); var boothName = boothId.substring(indexOfName + 5); var vendorNumber = document.getElementById("tempVendorNumber").value; var displayBoothNumber = "vendorBooth_" + vendorNumber; document.getElementById(displayBoothNumber).value = boothNumber; document.getElementById(displayBoothNumber).name = displayBoothNumber + "_dirty"; document.getElementById(displayBoothNumber).title = boothName; } function DCCgetWindowTop() { var winTop = 0; if( typeof( window.pageYOffset ) == 'number' ) { winTop = window.pageYOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { winTop = document.body.scrollTop; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { winTop = document.documentElement.scrollTop; } return winTop; } function DCCgetWindowLeft() { var winLeft = 0; if( typeof( window.pageXOffset ) == 'number' ) { winLeft = window.pageXOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { winLeft = document.body.scrollLeft; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { winLeft = document.documentElement.scrollLeft; } return winLeft; } </script> <style> .DCChiglightHover:hover { background-color: rgb(200,200,200); } </style> <div id="DCCboothList" style=" position: absolute; top: 200px; left: 350px; height: 360px; width: 300px; background-image: url(/DCC5/pages/shared/images/transp.gif); display: none; "> <input type="hidden" name="tempVendorNumber" id="tempVendorNumber" value="" /> <p align="right" style="padding: 0; margin: 0;"> <input style="height: 18px; width: 20px; background-image: url(dummy.gif); border-top: 1px solid rgb(210,210,210); border-left: 1px solid rgb(210,210,210); border-right: 1px solid rgb(210,210,210); border-top: 0px solid rgb(210,210,210); color: rgb(210,0,0);" type="button" id="closeBoothList" name="closeBoothList" value ="X" onclick="DCCcloseBoothList()" /> </p> <div id="DCCboothListInner" style="background: rgb(240,240,240); border: 1px solid rgb(130,130,130); height: 334px; overflow: auto; "> <p style="padding: 0; margin: 0"> <a href="" class="DCChiglightHover" id="boothNumber_D010index_0name_Beef Booth" style="text-decoration: none; color: black;" onclick="DCCboothSelected(this.id)">D010Beef Booth</a> </p> <p style="padding: 0; margin: 0"> <a href="" class="DCChiglightHover" id="boothNumber_D006index_1name_DCC Test Booth D006" style="text-decoration: none; color: black;" onclick="DCCboothSelected(this.id)">D006DCC Test Booth D006</a> </p> <p style="padding: 0; margin: 0"> <a href="" class="DCChiglightHover" id="boothNumber_D005index_2name_DCC Test Booth D005" style="text-decoration: none; color: black;" onclick="DCCboothSelected(this.id)">D005DCC Test Booth D005</a> </p> <p style="padding: 0; margin: 0"> <a href="" class="DCChiglightHover" id="boothNumber_D004index_3name_DCC Test Booth D004" style="text-decoration: none; color: black;" onclick="DCCboothSelected(this.id)">D004DCC Test Booth D004</a> </p> <p style="padding: 0; margin: 0"> <a href="" class="DCChiglightHover" id="boothNumber_269index_92name_ARCHTECH" style="text-decoration: none; color: black;" onclick="DCCboothSelected(this.id)">269ARCHTECH</a> </p> </div> </div> <!-- End code for custom booth list drop down --> </form> </body> </html> NOTE: If you are tempted to respond "validate your code" or some other useless response, save your breath. This is a real world problem. The code is an fragment output from a JSP. I don't have the luxury of updating 2000 jsp files to make it up to standard. I built a registration and edit profile form using java to show or hide drop down selectors dependent on parent selection. I'm also using an ajax script to pull the selector values from txt files for the city selector. This works fine in chrome, but will not work in ie or ff. I've also found that the ajax script simply doesn't work in ff at all period even with the formmanager scrip removed. The site is erecoverydev.com. Click on the join now tab to see the registration form, or you can log in with un test and pw test123, then click on edit my page in the left hand menu to view the edit profile form. Here is what's in the head to call these scripts: Code: <script src="/js/FormManager.js"> /**************************************************** * Form Dependency Manager- By Twey- http://www.twey.co.uk * Visit Dynamic Drive for this script and mo http://www.dynamicdrive.com ****************************************************/ </script> <script type="text/javascript"> window.onload = function() { setupDependencies('cbcheckedadminForm', 'weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' ) }; </script> <script src="/js/request.js"> /**************************************************** * Ajax call to fill city values ****************************************************/ </script> <script> function handleOnChange(dd1) { var idx = dd1.selectedIndex; var val = dd1[idx].text; var par = document.forms["adminForm"]; var parelmts = par.elements; var cb_citysel = parelmts["cb_city"]; var state = val; if (cb_state != "Select state") { var directory = ""+document.location; directory = directory.substr(0, directory.lastIndexOf('/')); Http.get({ url: "./regvalues/" + state + ".txt", callback: fillcb_city, cache: Http.Cache.Get }, [cb_citysel]); } } function fillcb_city(xmlreply, cb_cityelmt) { if (xmlreply.status == Http.Status.OK) { var cb_cityresponse = xmlreply.responseText; var cb_cityar = cb_cityresponse.split("|"); cb_cityelmt.length = 1; cb_cityelmt.length = cb_cityar.length; for (o=1; o < cb_cityar.length; o++) { cb_cityelmt[o].text = cb_cityar[o]; } } else { alert("Cannot handle the Ajax call."); } } </script> Any ideas? I'll post the rest of the script codes in a reply. I'm just starting JavaScript and wrote a quick script for Next/Back buttons for a page showing a family outing on our boat. I proudly uploaded the webpage and emailed it out, but people running IE are unable to use the buttons, they simply do nothing. Here is the .js file, I don't think anything in the HTML or CSS is causing the issue but could post those as well if necessary. Code: var step = 1; //preload images var numImages = 13; var images = new Array( numImages ); var i = 0; for ( i = 0; i < numImages; i++ ) { images[i] = new Image(); images[i].src = "images/boat" + ( i + 1 ) + ".jpg"; } function back() { if( step > 1 ) { step--; } else { step = numImages; } document.images.slide.src = images[step-1].src; } function next() { if( step < numImages ) { step++; } else { step = 1; } document.images.slide.src = images[step-1].src; } function init() { document.getElementById("back").onclick = back; document.getElementById("next").onclick = next; } window.onload = init; I've checked a lot of sites and can't figure this one out. Also, if I'm practicing any bad coding techniques, I'm open to suggestions on that as well I had to develop a word game for a class project. The final is revolving around this class project but I was marked down some points for this project. I need to find out what I did wrong so I can pass my Final Exam. The program passed Google Chrome and Safari, but the teacher said it didn't pass Firefox Error Console. Any pointers will help. <html> <head> <title> Project </title> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function GetLetter() // Assumes: There are 5 letters // Results: Returns a single letter { var letter letter = RandomOneOf(['a', 'e', 'l', 'm', 'n']); return letter; } </script> <script type="text/javascript"> function GetWord(lastLetter) // Assumes: There is a letter the user has selected // Results: Returns a four letter word ending with the letter the user has selected { var word lastLetter = document.getElementById('lastLetter').value word = ''; l = 0; while (l < 3) { word = word + GetLetter(); l = l + 1; } return word + lastLetter; } </script> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function CheckWord(word) // Assumes: The user entered a word // Results: Will check to see if the word matched the winning word { var cWord cWord = false; if (word=="lane" || word=="lean" || word=="mama" || word=="meal" || word=="name") { cWord = true; } return cWord } </script> <script type="text/javascript"> function trytowin() // Assumes: The user returned a true or false answer // Results: Will Check to see if the user has won or lost { var word, t = 0; document.getElementById('winningWord').value = ""; document.getElementById('winLoss').value = 'Lose'; document.getElementById('lowords').innerHTML = ''; valid = false; while (t < 20 && valid == false) { word = GetWord(lastLetter); valid = CheckWord(word); document.getElementById('lowords').innerHTML = document.getElementById('lowords').innerHTML + word + '<br>'; t = t + 1; if (valid == true) { document.getElementById('winningWord').value = word; document.getElementById('winLoss').value = 'Won after ' + t + ' times!'; } } } </script> </head> <body> <p> Your word is: <input type="text" id="winningWord" size=10><br> You: <input type="text" id="winLoss" size=20><br> Type in a letter chosen from a,e,l,m,n <input type="text" id="lastLetter" size=2 value=""> Press the button to get a word ending with that letter and see if you won<input type="button" value="Try to Win!" onclick="trytowin();"> <hr> <div id="lowords"></div> </body> </html> |