|
JavaScript - Chrome Not Firing Window.addeventlistener Keypress
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:
igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! Similar TutorialsHi How I can simulate keypress in google chrome. I want to press a button to fire keypress event to print "X" in input box. hi, i have aded window unload event handler to my code. my page calls some function that takes few secs and page then loads in 5-6 secs. while ths page is loading, if user clicks 'x' on browser window, then code inside unload event handler doesnt get executed. if user waits for page to be loaded fully and hten clicks 'x', then unload event handler gets executed. but i want if during loading user decides to click 'x' button, then also unload handler shold get exucted. i am pasting a sample code that simulates my situation: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function unloadPage() { alert('unloaded page'); } function pauseJS(timeInMilliS) { var date = new Date(); var curDate = null; do { curDate = new Date(); }while(curDate-date < timeInMilliS); } </script> </head> <body onload="pauseJS(6000)" onunload="unloadPage()"> <p>Test Page</p> </body> </html> Hello, I'm working on a quote generator and I'm running into an issue with onChange events not firing when a text field is dynamically populated via a child window. Here's my setup: I have 3 text boxes (quantity, price, markup) that are multiplied together in order to give the total of that product. Each text box has an onChange event [called calculator()] that calls an external javascript file, which handles the multiplication and instantly updates the total of that product. Up to this point, everything works fine - - when I manually edit any of the 3 inputs, the total updates correctly. However, my problem is that I now have the "price" text box being dynamically populated, and when it updates it is not firing the onChange event attached to it. The text box is being filled by way of launching a child window and running the following code within it: Code: function call_submit()
{
opener.document.quote_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
self.close();
}
I've also tried to call the calculator function from within the child window, with no luck: Code: function call_submit()
{
opener.document.estimator_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
calculator ()
self.close();
}
So, as of right now, the following is happening - - I launch the child window, I select the product to add to the quote, the child window closes and the price is correctly populates within the "price" text box, BUT the total stays at zero. If I manually edit any of the fields, it then catches back up and properly updates the total. Is their any way to fire the onChange event at the time when the text field is populated from the child window? Any help would be appreciated. Thanks in advance. Hi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. Hi, I am trying to get the Chrome Height of a browser window. I tried window.outerHeight - window.innerHeight but that gives me the height of the chrome plus the status bar. Does anyone know of a way to just get the height of the chrome of a browser window? Or, get the screen coordinates of the inner body of the browser window. Because, then I can subtract those coordinates from screenX and screenY. Thanks for your help. Hi Friends, I am really tired with Chrome , one of my window.open() Stuff work fine in FF and Opera in Fedora O.S. But Chrome Did not , my code is like: <script type="text/javascript"> function getpage(id, type){ $.ajax({ type: "POST", data: "key="+id, async: false, url: "<?php echo site_url(); ?>/server/precp/"+type, success: function (msg) { window.open("<?php echo site_url(); ?>/server/cplogin/"+msg, "autologin"); } }); } </script> and it call in another JavaScript function like: function doKeyup(id,e) { if(e == 13) { //alert("e:"+e); var cp = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#cp").html(); var dc = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#dc").html(); if(cp != null || dc != null ) { var firstId = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(1) input[type=checkbox]").val(); } if(cp != null) { alert("Enter here"); getpage(firstId,'cp'); return false; } and it firstly call from onkeyup as : <input type="text" name="find_text0" id="find_text0" autocomplete="off" <?php if ('B' == $sb_pos) { ?> onfocus="document.getElementById('find_text1').value='';" <?php } ?> onkeyup = "return doKeyup('0',event.keyCode);" /> Please Give me a Solution ASAP. Thankfully Anes Hi, I have some JavaScript that is being used to open a new window and display a PDF file. This is working fine apart from the title of the new window being open. I am using the window.open function and I have set the title of the page using the document.write function (see code below). The code works fine for FF and IE but for some reason Google Chrome just displays 'Untitled - Google Chrome' Code: <body>
<a href="javascript:openNewWindow();">Click Here</a>
<script type="text/javascript">
function openNewWindow()
{
var pdfWindow = window.open('', "window",
'resizable=1,scrollbars=0,width=800,height=600');
pdfWindow.document.write('<html><head><title>Window Title</title></head>');
pdfWindow.document
.write('<body><iframe src="" id="ifrm" name="ifrm" width="100%" height="100%"></iframe>');
pdfWindow.document.write('</body></html>');
pdfWindow.document.close();
}
</script>
</body>
Note: I have also tried adding - pdfWindow.document.title="Title"; - to the JavaScript, with no luck. Is there anything specific that is required for Chrome or am I just missing something?? Thanks in advance for any help! I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code: JavaScript: Code: function printCoupon(couponID)
{
var originalContents = document.body.innerHTML;
var printable = document.getElementById(couponID);
var printContents = printable.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.getElementById(couponID).scrollIntoView(true);
}
HTML: Code: <body>
<div id="coupon1"><p>Coupon 1 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div>
<div id="coupon2"><p>Coupon 2 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div>
</body>
This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content. UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal. Hi there, I hope I post this in the right section. I'm trying to do a redirect using the below code: <script type="text/javascript"> window.location.href = "http://google.com" </script> FF and IE work as they should. Chrome doesn't. The request above to http://google.com, gets a 'canceled' status in Chrome browser > Development tools > "Network". I've tried several other functions: location.href = url location.replace(url) document.location = url location.assign(url) window.open(url, '_self') Same code pasted within a local html file works fine. Below is the redirect request that it's canceled by chrome: http://pastebin.com/hD36M1RG Any clues? Thanks Hi, I would like to increase my table row when users hit enter. Please find my html code below. Code: <form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" id="tblSample">
<tr>
<td align="center"><strong>NO</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center"><strong>QTY</strong></td>
<td align="center"><strong>PRICE</strong></td>
<td align="center"><strong>TOTAL</strong></td>
</tr>
<tr>
<td align="center"><label>
<input name="textfield2" type="text" id="textfield2" size="8" />
</label></td>
<td align="center"><label>
<input name="textfield" type="text" id="textfield" onclick="addRowToTable();" size="80"/>
</label></td>
<td align="center"><input name="textfield3" type="text" id="textfield3" size="8" /></td>
<td align="center"><input name="textfield4" type="text" id="textfield4" size="8" /></td>
<td align="center"><input name="textfield5" type="text" id="textfield5" size="8" /></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">total</td>
</tr>
</table>
</form>
Hey CodingFourm-ites! Ive scoured the internet for scripts that make a <div> follow the mouse, and have found one that seems to work well. However, I want the <div> to stop moving when the CTRL or the SHIFT key is pressed, I dont care which. Hopefully, I can have a div that follows the mouse at an offset that contains some click-able items, so a menu is always by your mouse. Ive tried now more than a few times to put together a piece of code that can achieve this, but none have worked. Can somebody write a script that can achieve this, or point me in the right direction? Thanks guys! Current JS for mouse follow: Code: var divName = 'mouseFollow'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 15; // X offset from mouse position
var offY = 15; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
The original code can be found at: http://javascript.about.com/library/blfollow2.htm Okay, I'm really am not getting this. So I came here hopefully for some help. I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code: Code: function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
//Which is then call by
addEvent('click', someFunction, theElementObject);
So say I had the following code like so: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="./css/global.css" />
<script type="text/javascript">
function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
function clearTxt() {
var username = document.getElementById('username');
if(username.value == 'Screen Name') {
username.value = '';
}
}
addEvent('click', clearTxt, document.getElementById('username'));
</script>
</head>
<body>
<label for="username">Username:</label> <input name="username" type="text" value="Screen Name" id="username" maxlength="20" />
</body>
</html>
From what I can see and what I understand it should just on event of a click on the username input it should clear the username field. But instead I get a error message from IE saying, "null is null or not a object"???? Like that was any help. So could someone please help me figure out my misunderstanding of this method? Thanks, Jon W I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox. Here's the relevant parts of the code: Javascript (in an external file) Code: var body = document.body;
body.addEventListener("load", Foo(), false);
function Foo(){
addEventListener(document.getElementsByName("start"),"click", alert("hello"), false);
}
HTML Code: <html> <head> <title>BREAKOUT!</title> <script src="breakout.js" type="text/Javascript" > </script> <LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css"> </head> <body id="body"> <!-- etc.... --> A common javascript function that capitalizes input as user types (onkeypress) no longer works as of IE9. Need a function that also works in IE 9 that doesn't not change method call or interface (as it's used in 150 places throughout application). CALL: [CODE] el.onkeypress = function(el) { return c_capitalizeInput(el); } [CODE] FUNCTION: [CODE] // Intercepts keyboard input and capitalizes keystrokes. // Call with onkeypress="return capitalizeInput(event);" // Compatible with both IE and Netscape/Mozilla function c_capitalizeInput(evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (window.event) { // IE if ((evt.keyCode >= 97) && (evt.keyCode <= 122)) { evt.keyCode = evt.keyCode - 32; } return true; } else if (evt.which) { // Netscape and Mozilla key = evt.which; if ((key >= 97) && (key <= 122)) { key = key - 32; evt.target.value = evt.target.value + String.fromCharCode(key); return false; } return true; } else { return true; // Can't do anything for other browsers } } [CODE] Any suggestions to make this work in IE9? I am doing a program to teach pre-schoolers on how to use the keyboard. If there any possible if I press the arrow up key, It will then show a excellent swf, that I have make. if wrong if will come out try again swf using javascript. please help me. im stuck. On http://kisa.ca/cc/ I'm using JQuery's .keydown() to grab arrow keys. http://pastie.org/938572 But my friends using Linux are unable to use arrows to play the game: http://alteeve.com/files/cc.png Halp? I've spent days searching without luck. I need help with the following: I have a program that have some hotkeys set to trigger some events. I would like to activate those hotkeys from inside firefox by clicking on a button. I'm not looking for keypress events, it has to be a button click. So, let's say I click on the button that executes a javascript code that emulates F7 or CTRL+A or whatever key or key combination. Can you guys please help with to find a solution? Oh, and I need it to work with Firefox only. Thanks! Is it possible to add events using addEventListener to multiple radio buttons with same id ? <input id="radId" type="radio" value="0" name="radioname">No <input id="radId" type="radio" value="1" name="radioname">Yes I tried to attach event using document.getelementByID BUT it always picks the first radio button. Is there a way around this, any help would be highly appreciated. Thanks Hi folks, I'm having problem setting up event handling using member functions. Consider the following code snippet: Code: function Widget()
{
...
this.register = function()
{
...
document.getElementById(this.id).addEventListener('click', this.default_click_handler, false);
}
this.default_click_handler = function(event)
{
this.do_something_useful(); //<--???
}
this.do_something_useful = function()
{...}
}
However I don't manage to call do_something_useful(), I get a this.do_something_useful() is not a function error. What am I doing wrong? Any help is appreciated, Thanks, A. |
|||||||