JavaScript - Cross Browser Issue?
Hello all,
I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide. The site works great on the iphone, firefox, and safari, but not in Internet Explorer. I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help! Thanks Similar Tutorialsok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx() The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari. but will not work in Firefox or IE (Firefox does nothing, and IE has a couple of css issues and doesnt work either...) http://calumk.com/else/blogpoststuff...ng_Option_Box/ if anyone could help me i would really appreciate it. (obviously view in Chrome or safari to see how it is meant to respond) So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code: http://www.w3schools.com/xml/xml_dom.asp It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents: Code: <html> <body> <h1>W3Schools Internal Note</h1> <div> <b>To:</b> <span id="to"></span><br /> <b>From:</b> <span id="from"></span><br /> <b>Message:</b> <span id="message"></span> </div> <script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","note.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.getElementById("to").innerHTML= xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue; document.getElementById("from").innerHTML= xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue; document.getElementById("message").innerHTML= xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue; </script> </body> </html> And then the xml file named "note.xml": Code: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie. I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out. You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx To start, go to the box for duty amount or freight charges and press enter The following code is what I used to handle this event. Code: function handleKeyPress2(e,control) { var evt = e ? e : window.event; var bt = control.id; if (bt) { if (evt.keyCode == 13) { //bt.click(); jumptoNext(control, e); stopEvent(e); return false; } } } function jumptoNext(field, event) { for (i = 0; i < field.form.elements.length; i++) if (field.form.elements[i].tabIndex == field.tabIndex + 1) { field.form.elements[i].focus(); if (field.form.elements[i].type == "text") field.form.elements[i].select(); break; } } function stopEvent(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } Is there a method for breaking out of frames that's truly cross-browser compatible? I've seen a ton of examples on how to do this, but I'm not sure which method works the best. Thanks! Hi I have spent some time writing a javascript online calculator. The calculator works on Safari and Firefox but not on IE or Opera. I am sure there are multiple errors in the code but have gone as far as my limited self taught experience will take me. Any help will be greatly appreciated! Here's the code I have put together. Thanks David [code] <html> <head> <script> function bettype(elm) { var bettype = elm.options[elm.selectedIndex].value; if(bettype == "qualifyingbet") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = parseFloat(betamount) document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn)-parseFloat(betamount) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = 100+parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else if(bettype == "freebetstakereturned") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = parseFloat(betamount) document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else if(bettype == "freebetstakenotreturned") { var betamount = document.form.betamount.value; var betodds = document.form.betodds.value; var betcommission = document.form.betcommission.value; var layodds = document.form.layodds.value; var laycommission = document.form.laycommission.value; var betstakereturn = 0 document.form.betstakereturn.value = (betstakereturn.toFixed(2)); var betwincommissioncharged = parseFloat(betamount)*parseFloat(betodds-1)*parseFloat(betcommission/100) document.form.betwincommissioncharged.value = (betwincommissioncharged.toFixed(2)); var betreturn = parseFloat((betodds-1)*parseFloat(betamount))-parseFloat(betwincommissioncharged)+parseFloat(betstakereturn) document.form.betreturn.value = (betreturn.toFixed(2)); var betprofit = parseFloat(betreturn) document.form.betprofit.value = (betprofit.toFixed(2)); var layamount = parseFloat(betreturn)/parseFloat(layodds-laycommission/100) document.form.layamount.value = (layamount.toFixed(2)); var layliability = parseFloat(layamount)*parseFloat(layodds-1) document.form.layliability.value = (layliability.toFixed(2)); var netprofit = parseFloat(betprofit)-parseFloat(layliability) document.form.netprofit.value = (netprofit.toFixed(2)); var percentretained = parseFloat(netprofit/betamount*100) document.form.percentretained.value = (percentretained.toFixed(2)); } else { window.alert("Please select a bet type!"); } } </script> </head> <body> 1. Select bet type<br> 2. Enter bookmaker and betting exchange details<br> 3. Apply betting exchange details<br> 4. Results for your information </span> <table width="100%" align="center"> <tr align="center"> <td> <table border="1" width="445"> <tr align="center"> <td> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <form name="form"> <select name="betoption" id="betoption" style="width:273px;"> <option value="typeofbet">Type of Bet. Please Select</option> <option value="qualifyingbet">Qualifying Bet</option> <option value="freebetstakereturned">Free Bet Stake Returned</option> <option value="freebetstakenotreturned">Free Bet Stake Not Returned</option> </select> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="3"> Bet (Bookmaker) Details </td> </tr> <tr> <td width="140" align="center"> Bet Amount: £ </td> <td width="140" align="center"> Bet Odds: </td> <td width="140" align="center"> Bet Commission: % </td> </tr> <tr> <td width="140" align="center"> <input type="text" name="betamount" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="140" align="center"> <input type="text" name="betodds" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="140" align="center"> <input type="text" name="betcommission" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="4"> Lay (Betting Exchange) Details </td> </tr> <tr> <td width="210" align="center"> Lay Odds: </td> <td width="210" align="center"> Lay Commission: % </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="layodds" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> <td width="212" align="center"> <input type="text" name="laycommission" value="0" onfocus="(value='')" size="5" maxlength="5"> </td> </tr> <tr> <td width="212" align="center"> Lay Amount: £ </td> <td width="212" align="center"> Lay Liability: £ </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="layamount" size="5" readonly="readonly"> </td> <td width="212" align="center"> <input type="text" name="layliability" size="5" readonly="readonly"> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0"> <tr align="center"> <td colspan="2" align="center"> For Your Information </td> </tr> <tr> <td width="212" align="center"> Net Profit: £ </td> <td width="212" align="center"> Percentage retained: % </td> </tr> <tr> <td width="212" align="center"> <input type="text" name="netprofit" size="5" readonly="readonly"> <td width="212" align="center"> <input type="text" name="percentretained" size="5" readonly="readonly"> </td> </tr> </table> <input type="hidden" name="betstakereturn" value="0" size="5" > <input type="hidden" name="betwincommissioncharged" value="0" size="5" > <input type="hidden" name="betreturn" size="5" > <input type="hidden" name="betprofit" size="5" > <table border="0"> <tr align="center"> <td width="212" align="center"> <button type="reset" value="Reset">Reset</button> </td> </form> <td width="212" align="center"> <input type="submit" value="Calculate" onclick="bettype(betoption);"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> [code] Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
The topic of event handler management has been covered in many places in the past. One location is in the contest by PPK. The winning submission by John Resig has a few problems, and the commentary on the site seems to gravitate to the implementation by Dean Edwards after the analysis of the Resig code. I was also able to find a few more implementations on stackoverflow from: Bill Ayakatubby and Marco Demaio. Outside of the JavaScript frameworks, what is generally done for supporting event functionality? There are numerous options each with their own benefits and drawbacks. I'm uncertain of which one to use myself. Is there an undeclared de facto? Hi there, I am trying to come out with a Cross-Browser JavaScript codes to drag & drop some pictures. It seems to work well in IE, but when I tried it in Non-IE type of browsers (Safari, Chrome, Firefox), it did not come out that good... I would be very happy if anyone can enlighten me on the reasons why the script misbehave in Non-IEs. To try, you need to create a not-too-big-sized jpeg image and name it "x.jpg". Many thanks ! Chris ================================= <html> <head> <style> .drag{position:relative;cursor:hand} </style> <script language="JavaScript1.2"> var dragapproved=false var z,x,y var temp1, temp2; // ------------------------------------------------------------------------- function MouseEvent(e) { // Class used to standardize Cross-Browser event object. if (!e) { e = window.event; // IE this.target = e.srcElement; this.button = e.button; this.X = e.clientX; this.Y = e.clientY; } else { // Non-IE this.target = e.target; this.button = e.button; this.X = e.pageX; this.Y = e.pageY; } } // ------------------------------------------------------------------------- function move(e) { var e = new MouseEvent(e); if (e.button <= 1 && dragapproved) { z.pixelLeft = temp1 + e.X - x; z.pixelTop = temp2 + e.Y - y; return false } } // ------------------------------------------------------------------------- function startDrag(e) { var e = new MouseEvent(e); if (e.target.className=="drag") { dragapproved=true; z=e.target.style; temp1=z.pixelLeft; temp2=z.pixelTop; x=e.X; y=e.Y; document.onmousemove=move; } } // ------------------------------------------------------------------------- function stopDrag() { dragapproved = false; } // ------------------------------------------------------------------------- document.onmousedown=startDrag document.onmouseup=stopDrag </script> </head> <!-- ========================================================================== --> <body> <img src="x.jpg" class="drag"><br> </body> </html> Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems. What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself? I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility. Thanks a million in advance. HTML Code: <div id="rollover" onmouseout="addStyleDiv(event,'feat_main');"> <ul id="featured"> <li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li> <li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li> <li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap™</a></li> <li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a href="equipment/parts_washing/hurricane">Hurricane</a></li> <li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li> </ul> <div id="flyout" > <ul id="feat_main"> <h1>Midbrook</h1> standard page no rollover </ul> <ul id = feat_medical> <h1>Medical</h1> </ul> <ul id = feat_fabrication> <h1>Fabrication</h1> </ul> <ul id = feat_capsnap> <h1>CapSnap</h1> </ul> <ul id="feat_hurricane"> <h1>Hurricane</h1> </ul> <ul id = feat_media> <h1>Media</h1> </ul> </div> </div> JS Code: function addStyleDiv(e, x) { if (!e) var e = window.event; var tg=(window.event) ? e.srcelement : e.target; if (tg.id != 'rollover') { alert('leaving '+tg.tagName + ' '+tg.id); return; } /*These next two lines are NEVER reached no matter what*/ alert('It must have finally seen rollover'); addStyle('feat_main'); } function addStyle(x){ removeAllStyle(); document.getElementById(x).style.display="block"; } function removeAllStyle() { removeStyle('feat_main'); removeStyle('feat_hurricane'); removeStyle('feat_fabrication'); removeStyle('feat_capsnap'); removeStyle('feat_medical'); removeStyle('feat_media'); } I have a video (.wmv) that has markers in it one can access these markers in video players like "Windows Media Player" at "view" -> "file markers" I want to embed the video object in an HTML page and be able to let the user jump to these markers via JavaScript or such. I managed to do this with Internet Explorer ודןמע JavaScript but I can't get any other browser to access these markers or any timeline function for that matter. I need to be able to do so cross browser. any ideas? I have been working for days it seems, trying to resolve many issues with a js drop down menu. I am attempting to place a hyperlinked image into a js drop down menu and have been successful in firefox, but I cannot seem to hyperlink the image in ie, saf, chr, and opera. The website's location is http://crescentcay.com/04_index.html and I'll list the code below. By clicking on 'location' in drop down under the nav bar's 'welcome' a new flash movie is inserted by the getelementbyid function. It seems that the hyperlink is all that changes from browser to browser, and again, this works for me in firefox but not in any other browser. Thanks for your help in advanced. function mopen(subCat){ window.clearTimeout(); var identifier; var subCat; if (subCat = '0'){ identifier = 'sddm'; } else if (subCat = '1'){ identifier = 'sddm_alt'; } subCat = typeof(subCat) == "undefined" ? "" : subCat; var mopen=new Array() mopen[0]= '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(0)" onMouseOver="javascript:bt_alt_loc(0);javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(1);javascript:mclosetime();"><img src="images/buttons_02_a_up.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' mopen[1]= '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(0)" onMouseOver="javascript:bt_alt_loc(0);javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(1);javascript:mclosetime();"><img src="images/buttons_02_a_up.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' document.getElementById(identifier).innerHTML = mopen[subCat]; } function bt_alt_loc(bt_lc_a){ var bt_lc_a; var bt_lc_a_b; var bt_desc; if (bt_lc_a = '0'){ bt_lc_a_b = '1'; bt_desc = 'dn'; } else if (bt_lc_a = '1'){ bt_lc_a_b = '0'; bt_desc = 'up'; } document.getElementById("locale").innerHTML = '<div id="locale"><a href="javascript:menu(6)" rel="nofollow" target="_top" onClick="javascript:bt_alt_loc(' + bt_lc_a + ')" onMouseOver="javascript:bt_alt_loc(' + bt_lc_a + ');javascript:mcancelclosetime();" onMouseOut="javascript:bt_alt_loc(' + bt_lc_a_b + ');javascript:mclosetime();"><img src="images/buttons_02_a_' + bt_desc + '.jpg" alt="Location" name="Home" width="75" height="35" border="0" onload=""></a></div>' } function mclose(){ document.getElementById("sddm").innerHTML = '' } var closetimer = 0; function mclosetime(){ closetimer = window.setTimeout(mclose, 500); } function mcancelclosetime(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; } } Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. Hi I am trying to develop a Qwerty Shifter http://www.cross-browser.com/toys/qwertyshifter.html by handling keyboard events. I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n" for internet explorer I have script function InputEventKeyPress(event){ window.event.keyCode = shifter (window.event.keyCode); } //Key press function shifter (keyAscii) { switch (keyAscii){ //CAPITAL LETTERS A - Z case 65 : return 83; break; //A case 66 : return 78; break; //B case 67 : return 86 ; break; //C } } Hi, I've a photo gallery with a navigation panel made of little buttons with numbers which, after clicking on them, load the relative photo on the right hand side. This is the page: http://www.newtreedesign.co.uk/test/douglas/_test.html When a number from the navigation panel is clicked, it should turn purple. It all works fine in safari/mac latest versions but there are problems under IE/Win and FireFox/Win, the other 2 environments I'm keen to have compatibility. Could please anyone suggest me what corrections I've to make on the code in order to be sure I've this compatibility issues sorted? Thank you paquito I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head> <script type="text/javascript"> lastone='empty'; function showIt(lyr) { if (lastone!='empty') lastone.style.display='none'; lastone=document.getElementById(lyr); lastone.style.display='block'; } </script> </head> <body> <!--links--> <a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a> <a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a> <a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a> <a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a> <!--layers--> <div id="divID1" style="display:none;">content1</div> <div id="divID2" style="display:none;">.content2</div> <div id="divID3" style="display:none;">..content3</div> <div id="divID4" style="display:none;">...content4</div> </body> Here is a demo of it in action: http://www.mousegrey.com/layers.html Hi i have a php file that contain below content and it works great on firefox but not in IE8 actually IE8 doesnt reload the div Code: <?php print <<<HERE <script type="text/javascript"> $(document).ready(function() { $("#loader").load("content.php?uname=$uname"); var refreshId = setInterval(function() { $("#loader").load("content.php?uname=$uname"); }, 5000); }); </script> HERE; ?> <div id="loader"></div> also i tried like this and same thing happens Code: <?php print <<<HERE <script type="text/javascript"> setInterval("calldiv()", 5000); function calldiv(){ $("#loader").load("content.php?uname=$uname"); } </script> HERE; ?> <div id="loader"></div> any help would be great Thanks. I have the following script on my page: <![if !IE]> <div id='logowrapper'> <span class='siteLogo'><img src='logo2.png' align=abstop /></span> <span class='findUs'><img src='fLogo.png' border=0 title='Follow us on Facebook' align=abstop /><span class='topdvr'><img src='top_nav_dvr.png' alt=' - ' /></span><a href='www.twitter.com/' rel="nofollow" target='_blank'><img border=0 title='Follow us on Twitter' src='tLogo.png' align=abstop /></a></span> </div> <![endif]> <!--[if IE]> ***** APPLY SAME DIV SO IE RECOGNIZES SAME WAY AS OTHER BROWSER <![endif]--> And i use the following CSS to style the NOT IE browser above: #logowrapper{ margin:15px auto; padding:0px 22px 0px 75px; width:1049px; } .siteLogo { width:45%; } .findUs { padding: 0px 0px 0px 400px; width:45%; } +++++++++++++++++++++++++++ Now my question is how do I achieve the same effect when the user in Internet Explorer browser, either thru DIV or TABLE style? Thank you I'm trying to use SmoothGallery 2.1 on my website as a featured box. I tried opening the demos provided with the code in all browsers to make sure it was compatible and it showed fine in them all. I copied the javascript onto my site and I'm able to show the gallery. However in Chrome and Internet Explorer it shows fine, but Firefox the images are spread vertically down my site and the javascript gallery box doesn't show. I don't understand why this is an issue because it shows fine opening the demo pages and the javascript code and css is a straight copy from the folder :S Can anyone help me out? Website I'm having the issue on is www.deewon.com -Thanks |