JavaScript - Firefox Document.onkeydown Problem, Help!
This is an example piece of code which I wish to add to an onkeydown event:
Code: function keyListen(param1,param2,e) { // keycode for ie if(window.event) { e = window.event; var keycode = e.keyCode; } // keycode for firefox, safari and opera else { var keycode = e.which; } // if right arrow key was pressed execute a function if(keycode == '39') { someFunction(param1,param2); } } Then somewhere else in my code I dynamically add the function to an onkeydown event like so: Code: document.onkeydown = function() { keyListen(param1,param2,event) }; This works great in Internet Explorer, Opera, Safari and Google Chrome but not Firefox. Firefox keeps reporting that event is not defined, is there a way around this problem? I have also tried this: Code: document.onkeydown = function() { keyListen(param1,param2) }; I excluded the event, but still the same outcome, works well in all browsers apart from Firefox. Please help me, thankyou. Similar TutorialsMy web pages are built with JSP + javascript + AJAX, so a little dynamic when loading a page (it is NOT a static HTML text page). As a common practice, when users visits my website, they can click on a hyperlink to open another webpage. When they want to go back, they can click the browser's BACK button that will bring them back to where they were. What happened to the firefox is that when its default CACHE runs out, it will display: Document Expired This document is no longer available. The requested document is not available in Firefox'x cache. ... [Try Again] The general solution is that I can go to the Options page to either increase the CACHE limit ot clean up the CACHE. But for a public user, they either do not know what to do or assume that my website has problem! Please offer some suggestion to solve this problem such that regardless the caching, the browser's BACK button (or script window.history.back() will always bring it back to the previous page. Thanks Scott P.S. I have tried: <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> --> <!-- <meta http-equiv="Pragma" content="no-cache" /> --> <!-- <meta http-equiv="Expires" content="0" /> --> I'm working on my own site for layouts for sites like Myspace and Ning. Myspace changed their layouts to no longer include CSS so I am working on a new way to post their layouts. I used this same method to post all our other layouts. For some reason this is not showing up in IE. Firefox: IE: Interestingly enough, when I run the debugger in IE it loads when it is done. If not I get the black hole effect above. ERRORS: Object required Not implemented Any help will be greatly appreciated! Code: bgImg = document.getElementById('bg').innerHTML; tile = document.getElementById('bgtile').innerHTML; att = document.getElementById('bgatt').innerHTML; pos = document.getElementById('bgpos').innerHTML; top = document.getElementById('mar').innerHTML; ht = document.getElementById('marht').innerHTML; alink = document.getElementById('sel').innerHTML; col = document.getElementById('bgcol').innerHTML; hed = document.getElementById('hdr').innerHTML; bord = document.getElementById('bdr').innerHTML; con = document.getElementById('ct').innerHTML; div3 = document.getElementById('MS3css').innerHTML; if (document.getElementById('bg')){ document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;" onclick="select()" ><img src="'+bgImg+'"></textarea><br />';} if (document.getElementById('bgtile')){ document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+tile+'</textarea><br />';} if (document.getElementById('bgatt')){ document.getElementById('bgattEmpty').innerHTML='Background Attachment: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+att+'</textarea><br />';} if (document.getElementById('bgpos')){ document.getElementById('bgposEmpty').innerHTML='Background Position: <br /><textarea id="MS3" style="width: 250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+pos+'</textarea><br />';} if (document.getElementById('mar')){ document.getElementById('marEmpty').innerHTML='Marquee: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"><a href="http://skemaholicsanonymous.com/"><img src="'+top+'"></a></textarea><br />';} if (document.getElementById('marht')){ document.getElementById('marhtEmpty').innerHTML='Marquee Height: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+ht+'</textarea><br />';} if (document.getElementById('sel')){ document.getElementById('selEmpty').innerHTML='Selected: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+alink+'</textarea><br />';} if (document.getElementById('bgcol')){ document.getElementById('bgcolEmpty').innerHTML='Background Color: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+col+'</textarea><br />';} if (document.getElementById('hdr')){ document.getElementById('hdrEmpty').innerHTML='Header: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+hed+'</textarea><br />';} if (document.getElementById('bdr')){ document.getElementById('bdrEmpty').innerHTML='Borders: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+bord+'</textarea><br />';} if (document.getElementById('ct')){ document.getElementById('ctEmpty').innerHTML='Content: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+con+'</textarea><br />';} if (document.getElementById('MS3css')){ document.getElementById('code2Empty').innerHTML='<form id="genDone"action="http://blog.skemaholicsanonymous.com/MSPreview3/preview.php" method="post" rel="nofollow" target="_blank"><textarea id="codebox" style="display: none;" name="genCode">'+div3+'</textarea><br /><input type="submit" value="Preview" id="prevLoad" /></form>';} I'm new to JavaScript, just started an adult education class in it. I wrote a simple script to view a list of document properties and their values. This part works in Internet Explorer: for (var prop in document){ p_prop = prop; p_list[i] = p_prop + " : " + document[prop] + "<br />"; but doesn't in FireFox. I was wondering how to get the value of a property in FireFox. Thanks. I want to code a script that when you press the right arrow key, it goes to a page. any ideas? Hi coders, I have an .asp page on which you can change the background picture of a cell by simply selecting the desired color from a dropdown field. When running the page in Firefox its Error console tells me the following: Error: document.getElementById.bgtd is undefined Source File: [localhost...] Line: 29 Here is the code: <select name=ADDITIONALINFO1 ID="Select1" onchange="changebg(document.forms[0].ADDITIONALINFO1[document.forms[0].ADDITIONALINFO1.selectedIndex].value)"> <option value="White"> White <option value="Black"> Black <option value="Blue"> Blue </select> And here is the changebg script: function changebg(color){ if (color=="Black") document.getElementById("bgtd").background = "img/bg-tshirt5.jpg"; else if (color=="Blue") document.getElementById("bgtd").background = "img/bg-tshirt_bl.jpg"; else document.getElementById("bgtd").background = "img/bg-tshirt2.jpg"; document.forms[0].bgimg.value = document.getElementById("bgtd").background; } Here is the table where the image is displayed as bachground: <td width="353" background="img/bg-tshirt2.jpg" height="269" id="bgtd"> <p align="center"><font size="1"> <br> <img src="<%=imgSrc%>"></font></td> Internet Explorer does not complain and does the job without any errors. I Could not find out how to make it work also with Firefox. Any comments are appreciated. New to this. This code works in IE but does not work in firefox. It just stays on the same page and does nothing. Please Help! Code: <table> <CFFORM action="mypage.cfm METHOD="post" name="Login" rel="nofollow" target="_blank" id="go"> <cfinput type="hidden" name="decrypted" value="#decrypted#"> <tr> <td> <a class="K" HREF="javascript:document.go.submit();">My Page</a> </td> </tr> <tr> <td > <table> <tr> <td> <a HREF="javascript:document.go.submit();"><img border="0" src="images/icon.PNG" align="left" /></a> </td> </tr> </table> </td> </tr> </CFFORM> </table> Hi Coders, I have a javascript function which lets a user to choose one of the 7 option buttons on a "mainsub.asp" page and the page will then be forwarded to one of the 7 process pages depending on what has been chosen. The problem is that firefox is angry with the first line ("if" statement) and tells the following in its error console: Error: document.forms[0].C1 is not a function Source File: [localhost...] Line: 117 Here is the code: function fSubmit(){ if (document.forms[0].C1(0).checked) document.forms[0].action="process.asp"; else if (document.forms[0].C1(1).checked) document.forms[0].action="process1.asp"; else if (document.forms[0].C1(2).checked) document.forms[0].action="process2.asp"; else if (document.forms[0].C1(3).checked) document.forms[0].action="process3.asp"; else if (document.forms[0].C1(4).checked) document.forms[0].action="process4.asp"; else if (document.forms[0].C1(5).checked) document.forms[0].action="process5.asp"; else if (document.forms[0].C1(6).checked) document.forms[0].action="process6.asp"; else document.forms[0].action="process.asp"; return; } Internet explorer does not complain about anything and does its job great. But I could not figure out how to change the code to be also compliant with Firefox? Thanks for all the comments. I was wondering if anyone could shed some light on this little problem. Code: function lostfocus(current,productNum,e) { var keycode; if (window.event) { keycode = window.event.keyCode; } else if (e) { keycode = e.which; } if(keycode == 0) { if(current == ($("#itemCount"+productNum).val()-1)) { newItem(productNum); } } else { alert(keycode); } } Works great in FireFox, but not in IE7 - it doesn't even get to the else alert statement. This is how it is called.. onkeypress='lostfocus($current,$productNum,event)' And that is inside of a input type=text element. And help would be greatly appreciated. Hello All, This is my first post here, so hopefully I don't make to big an *** out of myself. Anyway, I am working on a small 2D game in javascript, and have character movement bound to the onkeydown event. The problem is, that there is a momentary delay between pressing the key, and then it realizing you are still holding it down. So it's Move->stop->Move smoothly You can see what I'm talking about here http://www.digitalswordsmen.com/at/townmap.cfm I know that the delay is happening at the operating system level (you see the same kind of delay if you open up notepad and hold down a letter key, first letter appears instantly, then a short delay before continuing). I was wondering if anyone has a possible solution though, or someway I could smooth out that delay. Also, the walking animations only seem to work in firefox. I guess IE doesn't play animated gifs while the onkeydown even is being fired. Not sure if there is a fix for that, other than animating the individual frames with JS, but that would be pretty laggy I think. Anyway, any input is appreciated. You can see all the code by of course just viewing source, its still fairly simple at this point. Thanks in advance. Hello, I have WordPress installed in a directory of my website, and I'm using an iframe on the homepage to embed the blog. I'm using a javascript code that I found online to automatically resize the iframe based on the content inside of it. This is the code: Code: <script type="text/javascript"> function resizeIframe() { document.getElementById('blog').style.height = document.getElementById ('blog').contentWindow.document.body.scrollHeight + 'px'; } </script> This works perfectly in Google Chrome. However, in Firefox I get this error in the console: Code: Error: Permission denied to access property 'document' Source File: http://mysite.com/index1.html Line: 24 I don't have any experience with javascript, but this makes no sense to me, because it should work since the iframe document is on the same domain and server as the parent page. The parent is "mysite.com/index1.html" and the iframe document is "mysite.com/blog/". Why is Firefox complaining about this? It shouldn't violate the "same origin policy" that I have read about. Any help with getting this to work would be appreciated. Just like the title says. What would make a block of code that runs an "onkeydown" work perfectly fine, but when changed to "onkeyup" it fails. I could post code, but I dont even think it would matter? onkeypress also fails.
I am trying to assign the left and right arrows, but I cannot get the code to work. It would be great to get some help--I am a newbie to coding. <html> <head> <script language="javascript" type="text/javascript"> document.onkeydown=function(e) { var thelink if (e.keyCode==37) thelink='prevlink' else if (e.keyCode==39) thelink='nextlink' else return document.location.href=document.getElementById(thelink).href} </script> </head> <body> <a href="#" onkeydown="return previous(this)" id="prevlink">PREVIOUS</a><br /> <br /> <a href="#" onkeydown="return next(this)" id="nextlink">NEXT</a> </body> </html> here's my javascript code
Code: <script type="text/javascript"> function sel(id){ document.getElementById(id).className="selected"; var getEls = document.getElementById("countrytabs").getElementsByTagName("a"); var getAgn = getEls; for(var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { for (var x=0; x<getAgn.length; x++) { getEls[i].className=getAgn[x].className.replace("selected", ""); } } } } </script> <style> a:hover {color: #FFFF00;} .selected{color: #FFFF00; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 15px; background-color: #ACAAAB; border: 0px none #ACAAAB; height: 20px; width: 125px; text-align: left;} a{color: #333333; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 15px; background-color: #ACAAAB; border: 0px none #ACAAAB; height: 20px; width: 125px; text-align: left;} </style> here's my html code Code: <a href="#" class="selected" id="one" onclick="sel('one')"> Bharati Axa </a><br /> <a href="#" id="two" onclick="sel('two')"> BPCL</a> <br /> <a href="#" id="three" onclick="sel('three')"> Hypercity </a><br /> <a href="#" id="four" onclick="sel('four')"> Idea </a> the problem is when i select a link the first time. it works fine. but when i select another link the next time the script does not work. Basically it works only once when page is loaded and then its not working at all. Its not showing any errors either. don't know whats happing.? Can someone please help me its urgent? Any help will be really gratefull! document.write("<table><tr><td><a href='#' onMouseOver='MM_swapImage('changeMe','','images/calNum/calNum4g.jpg',1);'><img id='changeMe' name='changeMe' src='images/calNum/calNum1.jpg' border='0'/></a></td></tr></table>"); basically the one thing I am know is a problem or at least where the problem starts is when the ","(comma) is added in the parathesis for the params of MM_swapImage. Whats the correct way to write those commas? Hi all, I am attempting to create an element (to be added later to the document DOM) using createElement. My test case is just: document.createElement("<p>Hello World</p>"); My error console shows the following error: Error: uncaught exception: [Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://192.168.1.10/projects/test/public_html/js/test.js Line: 10"] Any ideas? Hey I'm having a problem with this line: Code: var val1 = document.sform.sel1.value; sform is the name of a form that the data is being put onto. Problem is I want to change that name to verifypage.php When I replace sform with the verifypage.php I believe (I have no clues on JS) that the . if the extension of verifypage.php is screwing the code up. It's a dynamic drop down list that I want to display the results on another page. Thanks! Code: onload=function() {progress1();} var repeat=0; function progress1() { document.getElementById('clib').style.display="inline"; if (repeat<9) { repeat=repeat+1; setTimeout('progress1()',1000); old = document.getElementById('cliba').innerHML; document.getElementById('cliba').innerHML=old+'.'; } else { progress2(); } } var repeata=0; function progress2() { document.getElementById('wlib').style.display="inline"; if (repeata<23) { repeata=repeata+1; setTimeout('progress2()',1000); old = document.getElementById('wliba').innerHML; document.getElementById('wliba').innerHML=old+'.'; } else { progress3(); } } var repeatb=0; function progress3() { document.getElementById('dlib').style.display="inline"; if (repeatb<17) { repeatb=repeatb+1; setTimeout('progress3()',1000); old = document.getElementById('dliba').innerHML; document.getElementById('dliba').innerHML=old+'.'; } else { progress4(); } } var repeatc=0; function progress4() { document.getElementById('slib').style.display="inline"; if (repeatc<4) { repeatc=repeatc+1; setTimeout('progress4()',1000); old = document.getElementById('sliba').innerHML; document.getElementById('sliba').innerHML=old+'.'; } else { progress5(); } } var repeatd=0; function progress5() { document.getElementById('vlib').style.display="inline"; if (repeatd<17) { repeatd=repeatd+1; setTimeout('progress5()',1000); old = document.getElementById('vliba').innerHML; document.getElementById('vliba').innerHML=old+'.'; } else { progress6(); } } var repeate=0; function progress6() { document.getElementById('xlib').style.display="inline"; if (repeate<33) { repeate=repeate+1; setTimeout('progress6()',1000); old = document.getElementById('xliba').innerHML; document.getElementById('xliba').innerHML=old+'.'; } else { pyws(); } } var repeatf=0; function pyws() { document.getElementById('pyws').style.display="inline"; if (repeatf<7) { repeatf=repeat+1; setTimeout('pyws()',1000); old = document.getElementById('pywsa').innerHML; document.getElementById('pywsa').innerHML=old+'.'; } } HI.....idk why it is not working......when I load site, it will start counting, but dots after that .lib files.....look: http://ikoos.tk/load_os/ ......if you don't know what I mean....try to send me a PM. Thank you. document.write("<script type='text/javascript' src='http://www.website.com/javscript.js'></script>"); For some reason this will not output correctly. It ouputs "); Which is the last three characters. Hi all, I'm working on an internal site for my company and I have a snippet of code that works 100% fine indepentantly but when I try to use it inside a document.write I can't get it to work. I'm pretty sure it's down to the structure of it but I'm inexperienced with JS so I'm not sure how do correctly structure it. Here is the code I want inside of a document.write(): Code: <a href='javascript: void(0);' style="text-decoration:none; font-size:14px;" onclick=" document.getElementById('my_hidden_div_id_1').innerHTML = '<iframe src=\'{file:link}\' width=\'880\' height=\'500\'></iframe>' $('#my_hidden_div_id_1').koverlay({title: '{file:filename}'}); $('.css_koverlay').css({'background-color':'#9c183a'}); ; "> Pop-Up</a> Could anyone help me correctly insert it inside document.write() so that it outputs without errors? Thanks! Hello everyone. As lame as this may sound, I can't for the life of me get the document by the id. All looks fine to me, but I get the following error that just simply doesn't make sense. Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 15 Jan 2010 01:37:06 UTC Message: Object required Line: 7 Char: 4 Code: 0 Here's the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript"> function doSomething() { var elem = document.getElementById('doFade'); alert(elem.src); } window.onload = doSomething(); </script> </head> <body> <img src="/images/aero.jpg" id="doFade" width="300" height="200" /> </body> </html> |