Which functions needs to be overwritten to recognize any DOM content changes (Application-Side), including plugins like jquery ? Do not suggest Mutation.
You might want to take a look at this technique that relies on CSS animation keyframes.
As said above, mutation specs are either deprecated or not implemented yet.
You can try using jQuery itself and bind a handler to the DOMSubtreeModified event.
$(document).on('DOMSubtreeModified', function() {
console.log('changed');
})
There is actually a warning on w3.org that says it is deprecated. This is the only way I know of, though.
Related
Is it possible to call an jQuery function on newly matched items automatically?
For example I have the following code:
$(document).ready(function(){
$('[draggable]').draggable();
});
This adds the 'draggable' to each element which matches [draggable] however when further along the road new elements with the attribute 'draggable' are added those are not getting the 'draggable()' function getting called on them.
Is it possible to monitor the DOM or something and also call this method on each new dom item which matches the selector?
I know there is something like this for 'click' events and such (the jquery delegate method) but as far as I know I can't seem to use that for this case.
Check "Mutation Events" there is an event called DOMNodeInserted maybe it helps you
by the way, check: JQuery - use element with DOMNodeInserted
You can use the arrive.js library that I developed for the exact same purpose (it uses MutationObserver internally). Usage:
document.arrive('[draggable]', function(){
// 'this' refers to the newly created element
$(this).draggable();
});
there was ".live()" for jQuery, but i see it's deprecated?!
don't get the transformation from ".live()" to the new ".on()"-method currently, but take a look # yourself and maybe ask in their forum...
this should be the right way to do...
http://api.jquery.com/live/
.on() is what you need if you are running jQuery 1.7 or later. It will run on elements as they are added to the page, as well as those already in place when it's called. If you're using an earlier version, take a look at the .live() method, which has since been deprecated but has the same functionality with added elements.
Depending on which version of jQuery you're using, look into the .on() method. If I understand what you're looking for here, it should meet your needs.
The equivalent in previous versions of the framework was .live().
I would like to replicate jQuery's addClass function using plain javascript
So far, I have made this function:
function addClass(el,cl){
el.className+=(el.className?' ':'')+cl
}
It works well, but It uses this syntax:
addClass(element,class)
I want it to use this syntax:
element.addClass(class)
How can I do that?
thanks :)
There is no perfectly safe way to make element.addClass() work for all elements when element is a DOM element (not your own object like a jQuery object) in all browsers. Some frameworks have done this in the past and they have run into enough problems that some are moving away from doing that. I would not recommend doing it this way.
You are not in the business of browser compatibility or framework creation (not do you want to be) so even though it seems cleaner to extend the DOM objects, I would not recommend it. jQuery and YUI do not do it this way. They make a wrapper object that contains both the method and the DOM element reference.
If you want to read of some of the perils, here's a good reference on the subject: What's wrong with Extending the DOM?.
You can make it a prototype to extend the Element class.
Element.prototype.addClass = function(cl) {
this.className+=(this.className?' ':'')+cl;
}
example
As minitech pointed out though, this won't work reliably in all browsers (namely IE).
I like the way jQuery wraps events when you use its "bind" method. However it's awkward to set up the bindings. Is there any way to combine the ease of html (e.g. onKeyPress="foo(event)" ) with jQuery's browser-independent event-handling goodness?
You mean like this?
function foo(event) {
alert(event.target);
}
$('.someSelector').keypress(foo);
Whether in HTML or javascript way you need to create a function foo, so maybe this is closer to what you were looking for.
I'm not sure what exactly you feel is awkward about jQuery's handler binding.
You probably don't want to do that.
You may want to read up on event delegation in JavaScript, which those jquery binding methods handle neatly for you.
Here's the highlights:
Event delegation has several benefits
to the performance of a web
application:
Fewer functions to manage. Takes up
less memory. Fewer ties between your
code and the DOM. Don’t need to worry
about removing event handlers when
changing the DOM via innerHTML.
You're better off using jQuery's binding helpers like $whatever.click(fn) etc.
Actually here is another question on SO that references the same article I did that may also help.
A good idea is to actually separate the two, to have your HTML clean and the js in a separate location. You can try shortcuts like $('a').click(...) instead of $('a').bind('click'...), but that's about it. Personally I like having the bindings separate from the markup.
Is there any way (aside from creating a new event) that I can tell when a particular CSS class has been added to an element?
If you don't have access to the code that's adding the class, there's a jQuery plugin called livequery that will allow you to run code when elements are added to the DOM (or when you do things like add a class to an element).
http://brandonaaron.net/code/livequery/docs
$('div.myClass').livequery(function() {
alert('myClass was added');
});
$('#someDiv').addClass("myClass"); // The livequery code will run
This works specifically with jQuery methods.
You could extend jQuery's addClass() to fire an event when it adds a class. However, this means you'll have to add classes always with this method.
If you don't do that, you'll have to poll and look for differences in the class attribute. I don't recommend doing that. Besides performance, you'll need to handle classes being removed too.
There is a DOM Level 3 specification to detect changes to an elements attributes, it is supported in a couple of browsers... Also IE supports an onpropertychange (http://msdn.microsoft.com/en-us/library/ms536956(VS.85).aspx) event too.
It's probably not going to be enough though. Your best bet is use window.setInterval() and check if the value has changed.
I'm using window.onload to call my JavaScript code that has to be executed after the page is fully loaded. From what I read this is the recommended method to call such scripts.
However, it does not work for some Ajax sites, www.bing.com for instance - window.onload is called before the pages is fully rendered.
Any suggestions?
The short answer is that there's no general way to solve this problem (right now).
The definition of a "page" is pretty fungible when AJAX comes into play - it's pretty hard to tell the difference between AJAX that is intended to be part of the initial page load, and that which might not be. So, browsers are left on their own to determine when window.onload() should be fired, and it doesn't always end up where you want.
Luckily, most people don't need a general solution, but rather a specific one. If you care about bing.com, then you can probably look at how bing.com works and design your code to trigger when the site reaches a state that you find acceptable.
I've wrestled with this a couple of times, and my usual reason for needing some sort of onload event triggering is to be able to interact with the HTML DOM and have getElementById, getElementsByTagName, or various other DOM selectors, return something other than nothing.
Once again, I'm not sure of the exact problem you are trying to solve, but if you must use some sort of onload, and it's because of DOM traversal of some kind, you can cheat a bit with the following sort of code:
window.onload = pageChecker;
function pageChecker() {
// Onload has fired, but we don't trust it.
// Check to see if our deepest nested element can be found
var testElement = document.getElementById("importantElement");
if ( !testElement ) {
// Try again in a bit, adjust timeout to what your users
// can tolerate
setTimeout(pageChecker, 50);
}
else {
//
// ... the element exists, run important code below ...
//
}
}
You might be able to listen for changes and requests by globally listening for DOMSubtreeModified and readystatechange events, and use those events instead of the load event for whatever you are trying to do.
I'd recomend using jQuerys $(...).ready() method.
In addition to the answer from Rasmus Kaj and if you are using jQuery, I would direct you to take a look at Global Ajax Event Handlers.
jQuery.fn.ajaxComplete (http://api.jquery.com/ajaxcomplete/)
jQuery.fn.ajaxStop (http://api.jquery.com/ajaxstop/)
Note, that this has nothing to do with the native onload event.