Chrome Not Firing Window.addEventListener Keypress?
Aug 20, 2010
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)
[Code]....
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).
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)
[Code]....
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?
my understanding is that one of the great benefits of $(document).ready() is that it will execute code once the DOM is ready, yet prior to content being loaded.
For my example, with what I'm observing in Chrome (I'm on a MAC), I'd like to replace a default image with a different image, without seeing jQuery do the work. However, in Chrome, I see the original image for a brief instant before the jQuery replacement pops in. Why the flicker of the original image? Perhaps I'm not understanding the particulars of what is firing, and when its firing...
You can view online here, and refresh a few times to see the flicker in Chrome:
I've been using window.onerror to capture and report JavaScript errors from other users for debugging an application I've written. But I've run into a strange issue with Firefox and window.onerror.
It seems that any code that executes, having originated from an "element.addEventListener", causing an error does not activate "window.onerror". But it does at least show up in Firefox's JavaScript error console. Internet Explorer doesn't appear to suffer from the same issue when it uses it's equivalent "element.attachEvent".
Does anyone know why this is and if there is any workarounds or if it's possibly a bug? Code:
I've got a script which is called by a keypress event, something like this:
<html> <head> <script type="text/javascript"> function respondToKey(e) { keyPressed = String.fromCharCode(e.which); if(keyPressed == 'g'){ alert('you pressed the g key'); window.open('http://google.com'); } }
</script> <title>Untitled</title> </head> <body onkeypress="respondToKey(event)"> hit the g key to open a google window </body> </html>
when you hit the right key, the alert appears, but the window.open() never happens. There's not even a message in the Error Console, just nothing.
Is this a security feature? Any way I can get around it? And, if it's a security feature, is the fact that it fails silently with no error message also a security feature? Because it's rather annoying.
I'm creating a script which causes the page to scroll when the mouse is held down within 1/3 of the page height of the window edge. An example can be found at [URL], and is working fine in Firefox, Safari and Chrome, but not in IE. I'm 90% certain this is due to the browser's non-handling of addEventListener, but I'm not sure how to fix this...I've tried the following so far:
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:
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:
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'
<body> <a href="javascript:openNewWindow();">Click Here</a> <script type="text/javascript"> function openNewWindow()
[Code]....
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??
I have a small script that tries to open a child window. if successful, it then closes the child window and redirects the parent window. If this process fails, there is no child window, no redirection.
the script below works fine in FireFox but in Chrome, if the process fails, the redirection still happens. code...
I have done some ugly hacking in JavaScript before but nothing serious. Now I have decided to learn the language properly, so yesterday I threw together a function plotter that you can see here: balazsbotond dot hu/plotterThe script is here: balazsbotond dot hu/plotter/raphael-test.jsI use Google Chrome as my primary browser. My script works perfectly in every other browser (IE6, IE8, FF, Opera, Safari), but there are some problems in Chrome. Some functions do not work at all (exp()), some do not always work (sin(x) works, x*sin(x) works sometimes, 0.7*x*sin(x) never works). Since I am new to JS and this seems to be a very subtle problem, I have no idea where to start.
I have read that the use of eval() is not recommended because of performance and security reasons. erformance is not a problem here (eval is definitely better here than writing my own expression parser), but what about security? Did my use of eval introduce a security risk in my site (I find this quite unlikely because the whole thing runs on the client side but who knows...)?By the way, is there a way to detect if eval() was not successful?And finally, is there a reliable, cross-browser way of getting the client size of the window? I'm talking about the size without the title bar, toolbars, etc. My solution does not work in IE6 and IE8.
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.
[Code]...
Same code pasted within a local html file works fine.
In SECTION 1 I've clcking on button for open the popup. In SECTION 2 have submit button for submitting and closing the window. In ie and mozilla it works fine but in chrome after the popup submittion the parent is not refreshed.
Works fine with ie and firefox. All the script is there to do is open a new window but delayed so that users can see the button unpress.
[Code]....
This is my favourite way of doing things. The problem is that Chrome wont do a window.open launched from a set timeout. (buttons are an image background that shows just half of the image at a time) But its nerfed if i cant get it to work on 0.00005% of the browsers that visits the sites! (ive come to really dislike chrome)
This makes my life a bit easier. After executing this script you should be able to addEventListener on all elements instead of determining if you want to call attachEvent or addEventListener. Edit: This is the original version. The revised version is below if (!document.addEventListener && document.attachEvent) { Object.prototype.addEventListener = function(eventName, func, capture) { if (this.attachEvent) this.attachEvent('on' + eventName, func); }
var i, l = document.all.length;
for (i = 0; i < l; i++) document.all[i].addEventListener = Object.prototype.addEventListener;
This one is harder to use but it is nicer to the DOM and all newly created objects. The problem with it is that addEventListener will only be available after the page loads.
If you want to use addEventListener from a window.onload script make sure that this code is included in the body, not in the head. document.body.onload is called before window.onload.
Now, only elements that already have attachEvent will get an addEventListener. Elements created with document.createElement will automatically get addEventListener.
function createIEaddEventListeners() { if (document.addEventListener || !document.attachEvent) return;
function ieAddEventListener(eventName, handler, capture) { if (this.attachEvent) this.attachEvent('on' + eventName, handler); }
function attachToAll() { var i, l = document.all.length;
for (i = 0; i < l; i++) if (document.all[i].attachEvent) document.all[i].addEventListener = ieAddEventListener; }
var originalCreateElement = document.createElement;
document.createElement = function(tagName) { var element = originalCreateElement(tagName);
if (element.attachEvent) element.addEventListener = ieAddEventListener;
Today I have been testing the event models from Netscape 4.8 and IE 4 to the current crop of browsers. I'd like to write a small event library similar in purpose to the Yahoo! UI event library but with less features and code. The Yahoo! event library is one of the best libraries in YUI but it still seems to me to have some confused code...that or I'm still confused.
The Yahoo! UI library focuses on using addEventListener and attachEvent. However, due to the click and dblclick bugs in Safari a long legacy event workaround is included to use a Netscape4-type event model for Safari. Something like this
var listeners = [function(event){}, function(event){}]; document.getElementById('blue').onmouseover = function(event) { for (var i=0; i<listeners.length; i++) { listeners[i](event); } };
With this above example, multiple handler functions can be fired for a single event. I imagine that this is an old trick that has been around for a long time, yes?
With all the new browsers I tested with this legacy workaround, the listener handlers can use event.stopPropogation() or event.cancelBubble=true and they work as desired. The handler functions can also use event.preventDefault() and event.returnValue=false and they too work. These seem to work because the event object passed to the handlers is a modern event object and not one from Netscape4.
My question is, if Safari needs this legacy workaround, and the legacy workaround seems to work in all the browsers that have addEventListener or attachEvent, then why bother with the addEventListener and attachEvent functions at all? Why not just use the legacy way for all browsers and all type of events.?
I was using this script to learn how to use event listeners and I need to know how to make it work for IE. I keep finding attachEvent scripts that look like they will work, but I get nothing. I've spent several hours finding script after script that simply don't work. I don't know where to turn next. Any script to attach these events to IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]"> <html> <head> <title>Test</title> </head> <body><div> <script type="text/javascript">
if(!Array.prototype.link) Array.prototype.link = function(f) { for(var Obect1 = new Array(), i = 0, n = this.length, t = arguments[1]; i < n; i++) Obect1[i] = f.call(t, this[i], i, this);return Obect1;}; Array.prototype.linkMethod = function(m) { var n = this.length, args = this.slice.call(arguments, 1);if(typeof m == "string" && n > 0) m = this[0][m];for(var Obect2 = [], i = 0; i < n; i++) Obect2[i] = m.apply(this[i], args);return Obect2;}; .....
I'm trying to add a clickevent to an anchor that I created trough DOM. This his how the code looks:
var oSubLink = document.createElement("A"); oSubLink.appendChild(document.createTextNode("+")); oCel.appendChild(oSubLink); oSubLink.addEventListener("click", klapUit(oTabel.id, eigenschappen[2]), false);
It failes at the addEventListener call, saying "No such interface supported" (appears to be one of the two default error messages IE gives when it can't handle your JS :mad: ).
How can I fix this? The solution should work in IE6, FF, Opera, Mozilla and Safari.
