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.
Related
I am thinking of an alternative to JavaScript in case it's manually disabled by the user, so that instead of prompting them to enabled it, I could, for instance, in some way simulate the click event and change, for instance, the background colour by creating my own :click pseudo-class, just like it works for :hover.
Is such a scenario possible? Is it possible for one to create their own css pseudo-classes that?
If your question is, can I create a custom pseudo, example;
div:my-custom-pseudo { }
Then not without some JavaScript libraries.
Tutorial on using it with mooTools and slick
Personally, I haven't used this, so I don't know browser support and this is pretty much the only resource I ever found on custom pseudo classes.
Edit:
So pretty much, no, you can't do what you want, as you will always need JavaScript to do what you want.
Creating pseudo-classes is not possible and if you can simulate that also on some browser, then it would likely not work on others.
For that simple reason, all :first-child and :last-child polyfills/fallbacks were done by using class names rather than trying to make pseudo-class work.
You can use :active pseudo class. If I understand you properly.
Custom State Pseudo Classes may indeed be available in the future (for Custom Elements).
How would you mark an element to which a plugin has been applied? Suppose that I have this html:
Link
And in javascript, I would "apply a plugin"
$("#special-link").selectify();
Later I would like to know whether #special-link is already selectify-ied. I can think of these possibilities:
Add a class to the element. You can gather all elements with selectify simply by calling $(".selectified") and it is also easy to check whether an element has the plugin applied by calling $("elem").hasClass("selectified"). A drawback I can think of is that you're using CSS (=design) to store an info.
Set a data- value. It is a bit more difficult to find all elements with the selectify plugin applied, however it is "cleaner" solution in a way because you're not using CSS class to store an information
The plugin itself takes care of remembering the elements. This sounds like the best solution. However, you, as the creator of a plugin have to take care of keeping track of all the elements and putting them in a list. In case you have some sort "destroy" method, you would also have to remember to remove them from a list.
Which one do you think is the best solution? Can you think of any other advantages/disadvantages of the above mentioned methods?
jQuery plugins (the better ones) normally use classes only for styling additions and they store a code instance in the elements data (not data- attributes).
But, why not simply use an existing system for creating jQuery plugins, like the jQuery UI plugin Widget Factory
They do the heavy lifting for you :)
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.
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().
there are plugins such as flowplayer overlay that asks to put a "rel" attribute to the HTML element to make it trigger certain events ... the problem is , when I create dynamically elements that have that rel attribute ,, they won't trigger it ... what is the solution for this !?
You should use the live() method to trigger events for dynamically created elements.
Example:
$('selector').live('click', function(){
// your code .........................
});
Since jQuery 1.4.2 you can also use .delegate():
Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
The use of delegate can sometimes result in less and more understandable code than .live().
Edit the plugin so it uses live() to handle events.
Generally, there is the jQuery live() function to address exactly this kind of issue.
You would have to change the plugin to use live(), or run their initialization function every time new content is added.
The latter approach can be pretty resource-intensive on the client end and is not very clean, but if the number of elements in question is not too much, it can often be the easiest way.