<select id="aSelect"> <option value="0">a first option</option> <option value="1">a second option</option> <option value="2">a third option</option> <option value="3">a fourth option</option> </select>
but this doesn't work in IE. i've also tried to wire these up manually: document.body.onchange = function (e) { alert('foo); }; and document.onchange, but those don't work either. what's the story here (other than the fact that IE is sucking balls)?
Does jquery have an event defined for when the user changes the size of his browser window? I couldn't find one, but sometimes I don't see the forest for the trees.
I'm working on a small plugin that extends a checkbox to behave as if it has 3 states. Basically it just adds an anchor above the underlying checkbox, intercepts mouse clicks, and cycles the checkbox between: disabled + unchecked enabled + unchecked enabled + checked
It works fine in FF. But in IE7, for some reason, the click events are always sent to the underlying checkbox instead of the overlaid anchor. The anchor is sized to completely overlay the checkbox (and in fact, I made it's slightly bigger so clicking at the very edges works). Incidentally, I'm using jQuery 1.2.6 since this is part of a much larger web application and we haven't yet worked out the incompatibilities we're seeing with the latest jQuery version.
Here's the plugin code (the alerts are for debugging in IE) (function($) { $.fn.checkbox3s = function(options) { var opts = $.extend({}, $.fn.defaults, options); return this.each(function() { var proxy, cbx = $(this), parent = cbx.parent(); parent.css({position:"relative"}); proxy = $("<a href='#'></a>").css({ position:"absolute", .....
I have a nested lists. I'm using hover event to trigger an event. But when I hover child nodes, the event of theancestor list is being fired. How can I get rid of this situation
I need to call a function when user copy and paste the text value in the text box. I tried using "mousedown" event. But "mousedown" event handles left and right clicks when user clicks on the paste link on right click unable to handle the event. I am using jquery 1.5.
I am currently following the image popup example from:[URL]If I run the demo on Windows XP on Chrome or Safari, the escape keydoesn't close the popup window. How do I handle this in jQuery for
When I upgraded to jQuery 1.7.1 (from 1.5.x), I found that an exception was suddenly thrown on every keydown event on an INPUT type="text". I still get the exception when I remove my change and keyup events. Previously I bound to these elements with .live, but I have the same issue with the new .on, so I don't think this problem is even related to my bindings.
The exception is as follows (from the custom WebKit frame where my script runs):
This occurs on line 3255 of jquery-dev-1.7.1.js, which reads:
I did some poking around and found that handleObj.origType is "keydown". There is no jQuery.event.special["keydown"] defined, meaning that the first part of the expression evaluates to undefined (there is no such thing as {}.handle). The second part of the expression, handleObj.handler, evaluates to true. The entire expression therefore evaluates to true, which can't be applied as a function.
I'm trying to load some html content into a page via the ajax .load() method (wrapped within the $(document).ready() function).After I execute this, I'd like to bind all new span elements from the loaded content to a context menu plugin like this:
$("#selector").contextMenu({ menu: ''myMenu'' },
[code]....
Unfortunately since the span elements are coming from the ajax request,I don't think I can bind a normal event handler as per the plugin. [URL] how to use event bubbling in this situation.
I have two div elements (both dynamically created, one within the other). The parent div has an event attached to it:
contextmenuDIV.onmouseout = function () {doSomething()}
for example. However the onmouseout event will fire when you mouseover the child div as (of course) I am technically leaving the div layer (despite it being the parent).
Is there anyway to cancel this? I've read all about bubbling and all that, but it's just confusing me even more!
Anyway, at all, to allow me to have divs within another div element but only allow the event to fire for the parent!
I work in a team of developers and our pages are dynamically created using Java.I can at any moment change the inline JS across a site due to this so changes are easier then if the site was just static HTML.As far as reasons to use dom 2 over inline, I looking for something beyond:
it separates behavior from html
it is a best practice
it is the 'modern' way of doing it
I need facts that explain why it is a best practice or why 'modern' is better like : you can only assign one function action to the event.That was just an example which I see but is not true to me.I can either assign multiple functions to it like:
and then have a function defined before the inline call like
Code JavaScript: function myMultiFunctionCall() {[code].....
Here the second statement overwrites the first.By the way, here is a con for using dom and to me a big one considering debugging: you can't see what event handlers are assigned to what unlike inline where it is obvious because it is in the page. see http:[url].......
I am having a list (ul) in which a mouse over will populate its sub categories as list under that(like tree) and so on. My problem is, when passes mouse over a 2nd or 3rd level element, 2 mouse over events will be fired (The actual one and its parent) The sample code is given below
Each of those div's is positioned differently using css, as displayed in the image below: Each div has an event listener for the click event.In the image above I marked a point. If the user would click on that point, are all 3 event listeners supposed to fire? As I understood it, there's a capture and a bubbling phase, but these only go down through and up from the ancestors of the target right? And none of the div's are ancestors of eachother, they just happened to overlap because of the css position.
How would I let all registered eventsHandlers be fired whenever a user clicks on overlapping HTML elements? (so the eventHandlers for each of the 3 div's should be fired).
I have a document with a parent element that has mousedown,mouseup and mousemove events registered to it. The parent element has some child elements as well. I observe inconsistent behaviours between browser types when I hold the mouse button down, move the pointer and release the button.
ie7 - mouseup fires when over a child or parent
op9 - mouseup fires only when over the parent
ff2 - mouseup fires only over a child or parent but only if the pointer has moved since the mousedown occured
Because much of the talented JS community doesn't frequent the 'looking to hire' marketplace boards, I wanted to link to my post looking for help in understanding fully a group of functions I would like to use. While much of this I understand, along with some of the OOP principles used, there are some hang-ups I'm running into. Therefore, I'm looking for someone to walk me through the functions and help me understand the logic behind it. And since time is money, especially for those who are more skilled, I would rather respect this and pay for the conversation.
Further, if the person who takes up the task doesn't object, I will document the functions use for the community to benefit, since these are public boards. Of course, giving full credit to the original writers and the person who helped me understand.
Which javascript event should be used to call logout on window close and url change. I want to call logout function on window close and URL change on my application.
I am calling logout functionon on <body onunload="doLogout();">, but onunload event is also called when refreshing the page. is there any specific event for Windoe close and URL change.
I have a question regarding how to prevent memory leaks in Internet Explorer when using closures. I already knew about the circular reference problem, and until now was able to prevent memory leak problems. But I needed to store DOM elements and can't solve it anymore. So I search the group archive to see if I missed any valuable information. I found some interesting articles, but somehow could not apply it to my problem or I did not understand it fully. In particular the articles that talked about setting variables to NULL seemed as an easy solution, but I think I didn't understand it, because it didn't seem to work.
So, let me explain my problem in more detail. I am working on some very dynamic and complex page. It uses AJAX (XMLHttpRequest) to alter different parts of the page. This already disqualifies the finalize method solution to cleanup memory leak problems. I use several "component classes" to do the work of creating DOM elements in some container element and provide an easy to use interface for manipulation the content. For example I can call component.setBackgroundColor("red") and the component takes care of changing the style on the correct DOM element that is encapsulated in the component. In reality the component uses more complex interface method, but I hope you get the picture of why I do this.
Let me show you some example code:
function MyComponent() { var div; var handler = null;
this.generate = function generate() { div = document.createElement("div"); div.onclick = MyComponent.createClickHandler(this); // normally more elements are created here return div; }
this.setBackgroundColor = function setBackgroundColor(value) { div.style.backgroundColor = value; }
this.getHandler = function getHandler() { return handler; }
this.setHandler = function setHandler(value) { handler = value; }
}
MyComponent.createClickHandler = function createClickHandler(component) { return function(event) { var handler = component.getHandler(); if (handler != null) handler(event); } }
This "component class" can be used like this:
var container = document.getElementById("container"); var component = new MyComponent(); container.appendChild(component.generate()); .... component.setBackgroundColor("red"); component.setHandler(function(event) {alert("Stop touching me!")});
The problem, of course, is that this code will create a memory leak in Internet Explorer. I need the component in the event handler to get the handler dynamically, but the div is stored there too, creating a circular reference.
One of the things I tried doing is making a DOMStorage "class" like this:
function DOMStorage() { var map = new Object();
this.get = function get(id) { return map[id]; }
this.put = function put(id, obj) { map[id] = obj; }
}
var storage = new DOMStorage(); //global
Instead of storing the div element directly in the component, I store it under an id in the DOMStorage and use it to retrieve it later. This actually prevented the memory leak. I don't really understand why, because I still see a circular reference. Maybe Internet Explorer does not count references in the global scope as a circular reference? When I move the global storage to inside the container object I get the memory leak again.
Unfortunately I am unable to use a global DOMStorage, because the "component class" in instantiated many times, and they must all have their seperate DOM elements.
Perhaps I have to generate unique ID's when I put a DOM element into the global storage? It seems so over-the-top for something that works perfectly fine in Firefox.
I create two iframes dynamically to get data from the server. I want to deal with the data after it's downloaded, so I set the two iframes' onload event handlers to current document(not the iframe self), the handlers' JS code is generated dynamically too.
But I found only the second event is triggered and I can't get the first iframe's onload event.
Why? The data in the first iframe is really arrived, but it doesn't trigger the onload event.
Is there any other better way to conceal download data from server, not refresh current document?
I understand that when loading a page, the html parser is suspended until any script that it comes across is executed. i also believe that certain browsers will allow user input for those parts rendered whilst the rest of the page is still being parsed. suppose that a user clicks a button that is visible and 'active' and fires off some lengthy javascript execution causing the ui to 'freeze' for a while. my question is, on a page that is still being parsed but allows user input on those parts parsed and rendered, will the parsing of the rest of the page cease whilst the event handler (onclick) is working or will the user see the page render simultaneously as the event handler does its job?
I'm trying to augment Object.prototype with an addEvent method that will add event listeners, and will work regardless of whether the browser is IE or not.Here's what I have: So far it seems to work in non-IE browsers, but in IE8 it doesn't work. Where am I going wrong?
//Some other code //Here I create an input element of type text and assign a onclick event property var quantityTxt = document.createElement("input"); quantityTxt.type = "text"; quantityTxt.onclick = calcAmount();
[Code]...
Now my problem is that the above function gets called even when the cell has not been clicked, hope am clear enough,
$(function(){ $('input').bind('keypress',null,b).bind('change',null,a); }); function a(){
[Code].....
this script bind both keypress and change of the text box to functions b and a. at keypress event handler if user type a char on input box the value of input box change to x and the user char discarded. In this case we expected to run the onchange (change) event because the textbox value is changed BUT this doesn't happen.
I have a HTML and I am opening another link in a separate window using window.open() . The child window is something like 'http://yahoo.com' which is out side html. I need to refresh the parent window when the child window is closed.
I have an HTML page where I am opening a child window using window.open. the child window is something like yahoo.com. I want to refresh the parent window when the child window is closed.
