JavaScript - Mac & Pc Compatibility For Javascript....
Hi, I am not very experienced in programming, but I've noticed I keep running into a problem. I've got a particular javascript coding and for some reason it is only working for my mac visitors, but not PC.
What can I do to make this coding compatible for both? Where might the issues be? thanks Similar TutorialsHi, I have an application in which a popup window is opened from main window, from that popup window on clicking a button, the control goes to a servlet and after some calculations the control returns to the popup window. This works fine in IE6. But the same code behaves improperly in IE8. In IE8 on clicking button on popup window instead of control coming back to same popup window a new popup is opened. Can anybody help me on this? Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=UTF-8"> <SCRIPT type="text/javascript"> function showDiv(divIndex) { var f=document.forms[0]; var d=f.getElementsByTagName('div'); for(i=0;i<d.length;i++)d[i].style.display='none' d[divIndex].style.display = 'block'; } </SCRIPT> </HEAD> <BODY> <form> <select onchange="showDiv(this.value); "> <option value="0" selected>option 1</option> <option value="1">option 2</option> <option value="2">option 3</option> </select> <div style="display:block;"><form action="001.htm" method="get" > Your state<br> <select name="statecode" id="statecode"> <option value="">Choose State for option 1...</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> </select> <input type="submit" name="search" value="Get Quotes" /> </form></div> <div style="display:none;"><form action="002.htm" method="get" > Your state<br> <select name="statecode" id="statecode"> <option value="">Choose State for option 2...</option> <option value="AK">California</option> <option value="AL">Colorado</option> <option value="AR">Connecticut</option> </select> <input type="submit" name="search" value="Get Quotes" /> </form></div> <div style="display:none;"><form action="003.htm" method="get" > Your state<br> <select name="statecode" id="statecode"> <option value="">Choose State for option 3...</option> <option value="AK">Massachusetts</option> <option value="AL">Maryland</option> <option value="AR">Maine</option> </select> <input type="submit" name="search" value="Get Quotes" /> </form></div> </form> </BODY></HTML> Hello, so i got one question. I have this Java Script of old facebook chat which works great at chrome and firefox with greasemonkey but when i tried to put this at IE9 with IEPro plugin , facebook just went crazy. Cant open chat at all, also all site is broken. What is problem with this script at IE,Safari or Opera? Maybe you can help me thx. You can find that script here : www.fu.sk/107159.user.js I am trying to dynamically add rows to a table when the user clicks a button. here my function Code: function addFocusArea() { if(addTlFocusAreaCount <= 5) { //Create new Title row var titleRow = document.createElement("tr"); var titleCol = document.createElement("th"); var titleText = document.createTextNode("Additional Focus Area " + addTlFocusAreaCount); titleCol.appendChild(titleText); titleRow.appendChild(titleCol); document.getElementById("focusTable").appendChild(titleRow); //Create new category row var categoryRow = document.createElement("tr"); var categoryCol = document.createElement("td"); var categorySelect = document.createElement("select"); var categories = document.getElementById("<%=DecisionToolKeys.PRIMARY_FOCUS%>"); //copy a dropdown menu that is already existing on the page for(var i=0; i<categories.length; i++) { var option = document.createElement("option"); option.value = categories[i].value; option.text = categories[i].text; categorySelect.options.add(option); } categoryCol.appendChild(categorySelect); categoryRow.appendChild(categoryCol); document.getElementById("focusTable").appendChild(categoryRow); addTlFocusAreaCount++; } else { alert("You cannot add more than five additional practice areas."); } } And here is my button Code: <input type="button" value="Add Focus Area" onclick="JavaScript:addFocusArea()"/> This is working in Firefox and Chrome, but not IE 8. Any clue as to why? Thanks, Nick Hi, I have a piece of code that when executed will change the .onclick and .value of a button, Code: /* JAVASCRIPT */ function selectAllDays() { var len = document.booking.days.length; for (var i=0; i<len; i++) { document.booking.days[i].checked = true; } changeDaysButtonD(); } function deselectAllDays() { var len = document.booking.days.length; for (var i=0; i<len; i++) { document.booking.days[i].checked = false; } changeDaysButtonS(); } function changeDaysButtonD() { var obj = document.getElementById('selectall'); obj.onclick = deselectAllDays; obj.value = "Deselect All Days"; } function changeDaysButtonS() { var obj = document.getElementById('selectall'); obj.onclick = selectAllDays; obj.value = "Select All Days"; } Code: HTML <input type="button" id="selectall" name="selectall" value="Select All Days" onclick = "selectAllDays();"><br/> <input type="checkbox" name="days" value="Monday">Monday<br/> <input type="checkbox" name="days" value="Tuesday">Tuesday<br/> <input type="checkbox" name="days" value="Wednesday">Wednesday<br/> <input type="checkbox" name="days" value="Thursday">Thursday<br/> <input type="checkbox" name="days" value="Friday">Friday<br/> So, when the button is initially clicked it runs the selectAllDays() function, which will also run the function to change the state of the button to "Deselect all days" however when I run this in FireFox it gives the error of Error: selectAllDays is not defined Source File: http://davidc.herobo.com/groupsite/booking.html Though in Internet Explorer this runs fine and selects/deselects the checkboxes without any problem. I'd like to know if anyone knows why it won't work in FireFox? Help would be much appreciated, Thanks, Dave. EDIT: i think the problem was i had an html element named 'comment' so IE was getting confused when i made a js variable 'comment' (don't use IE it is the worst browser) i am in the process of debugging a website, it works wel in Google Chrome and firefox but not in IE i am putting all the relevant code below. this is in the head tag, and is the only JavaScript executed when the debugger show the error Code: function first_run(){ answer_state=document.getElementById('state');//set node for 'show_answer' function answer_ab=document.getElementById('ab');//set node for 'show_answer' function answer_capitol=document.getElementById('capitol');//set node for 'show_answer' function answer_next=document.getElementById('next'); comment=document.getElementById('comment')//line marked with error ui=document.getElementById('UI');//sets 'ui' to form location score_right=document.getElementById('right');//returns null score_wrong=document.getElementById('wrong'); score_right=score_wrong.previousElementSibling//score_right work around score_show_ans=document.getElementById('show_ans'); runs above code on page load Code: <body onkeydown="if (event.keyCode == 13){check()}" onload="first_run()"> in body tag, node that erred line refers to. Code: <div id=comment> </div> the error message in IE's developer tools debugger is "Object doesn't support this property or method" States javascript.html, line 395 character 1" i've done all of my coding in Chrome and have no expirence in IE's syntax, any ideas what the problem is? Hi-- I have the following javascript which is setting up a quiz (delivered from off-site) into an iframe. The javascript code determines if the visitor has Flash or not, and then sets up the page, on button click, to deliver the appropriate version of the quiz into the iframe. For some reason, this code works in everything (it seems) except IE8. In IE8 without Flash, something (perhaps in the code itself?) kicks the viewer into a blank page. If someone could just test the URL below and tell me if they get the same problem, that would help! Maybe (I am thinking) it is because the computer I tested it on did not have JS enabled? Or maybe there is something in the code? Or maybe with the quiz delivered from off-site? Here is the code: Quote: <!--QUIZ BEGINS--> <article id="page_7c"> <div class="box" id="page1"> <a href="#page_1" class="close"></a> <div class="wrapper pad_bot1"> <div class="grid_16 prefix_4"> <p></p> <div id="tester"> </div> </div> </div> </div> </article> <!--QUIZ ENDS--> <SCRIPT> <!-- // courtesy of http://www.kirupa.com/developer/mx/detection.htm function FLASH_CHECK(){ var MM_contentVersion = 6; var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0; if ( plugin ) { var words = navigator.plugins["Shockwave Flash"].description.split(" "); for (var i = 0; i < words.length; ++i) { if (isNaN(parseInt(words[i]))) continue; var MM_PluginVersion = words[i]; } var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion; } else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0 && (navigator.appVersion.indexOf("Win") != -1)) { document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag document.write('on error resume next \n'); document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n'); document.write('</SCR' + 'IPT\> \n'); } if ( MM_FlashCanPlay ) { document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMyMzUyNDMmcHQ9MTMxNjcyMzIzNzA*OCZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>' } else{ document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMzMTU3NDUmcHQ9MTMxNjcyMzMxODA5NyZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>'; } } //--> </SCRIPT> And here is the URL of the site: Quote: http://www.ABCsofUFOs.com If you click on the link bottom left ("Test Your Knowledge of UFOs") that should send you to the appropriate version of the quiz. Many thanks for any help! 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. Hello I have this var set: var floatingMenu = { targetX: -270 , targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever! I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped. In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth). The obvious question: HOW DO I FIX IT?!!? Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33 My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box). But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs. I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question. If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it. Hello all. I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas? here is the HTML: Code: <div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div> <div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div> <div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div> <div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div> here is the JavaScript: Code: function blackit(elemID) { document.getElementById(elemID).style.backgroundColor="#000"; } function fadeit(elemID) { setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000); } there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second. thanks <BODY onLoad="populateYearSelect()"> <font face="Verdana"> <title>owner Calendar</title> </font> <!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --> function populateYearSelect() { d = new Date(); curr_month = d.getMonth(); document.getElementById('arrivemonth').options[curr_month + 1].selected=true; curr_year = d.getFullYear(); for(i = 0; i <= 3; i++) { document.getElementById('arriveyear').options[i] = new Option(curr_year+i,curr_year+i); } } </script> This is the function I am using and it works great in IE but all other browsers are not even loading the function at all. What must i do to make this work in other browsers? I need them to work more so in Firefox and Safari more so than Opera, Avant or Netscape. 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'); } Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith 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 Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks |