Marking an element with applied plugin - javascript

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 :)

Related

hiding elements with javascript vs jquery

I was wondering about hiding elements with DOM, the person in the course is doing this by setting the display to none
document.getElementById("id-name-1").style.display = "none";
document.getElementById("id-name-2").style.display="none";
We are hiding two elements here, now both elements have the same class. I have been converting what the course is showing me into jQuery as well for added challenge. The jQuery code that I used is as follows, the name of the class they both has is say dice.
$(".dice").hide();
This hides both elements at the same time, which way would be better? I know that if I had other elements with class dice it would also hide them. So maybe that is why the other way is better? Thank you for your thoughts -- I am new to this.
Stephen
If you use vanilla javascript, can do something like
document.getElementsByClassName('className').forEach(el => el.style.display = "none")
I recommend you use vanilla javascript instead of JQuery because is most probably that you will use javascript than jquery in a new project. and on the other hand, will be more easy for you use libraries like react if you have a good vanilla javascript foundation.
Your question is open ended. No right or wrong answer.
$(".dice").hide();
As mentioned, this will hide all elements with Class "dice". If you want to be more specific, you can be:
$("#id-name-1", "#id-name-2").hide();
This selector uses IDs and selects both elements.
Your selector can be more vague or more precise as needed.
See More: https://api.jquery.com/category/selectors/basic-css-selectors/
Document.querySelectorAll(".dice") would also be able to the above based on the style using purely javascript. So it all comes down to preference since it works the same way with display:none;.
Also,.hide() takes in optional arguments/callback functions which can help with hiding the element(s).

Selecting elements by name with wildcards

Whats a good way to select elements by their name using wildcards?
The website has element names in the form of <a_1786439></a_1786439> which are likely auto-generated. This is doable by xpath, but is it doable using css selectors or jquery selectors which are faster?
This is clearly terrible-coding, but the website is not mine, and I'm writing a userscript for it.
This doesn't exist in CSS3, as the spec's section on type selectors only includes names and wildcards, but no combinations of them.
It's possible to create custom elements using the HTML DOM createElement method like this:
document.createElement('Funny_Element');
In the website code you are dealing with, they have created a custom element, or maybe extend the a element, but they didn't choose a significant name! a_1786439??? which is, I think, really bad.
Using CSS selectors or jQuery selectors depends essentially on what you want to do. Suppose you have to access children elements of a specific node, then jquery selectors would be more appropriate.
Hope it's useful!

Bind javascript events to MVC controls

What is the best way to bind Javascript events to my custom MVC controls? My initial thought is to create the controls using Html Helpers which give them a CSS class that signifies what kind of control they are. Then, on document.ready, I'll use jQuery to select all such controls by their class name and bind their events.
However, I'm concerned about the speed of selecting from the entire dom by class name. I've read (and experienced) how slow this can be, especially in IE8 which we need to target for this project.
I could select by IDs by creating a js file for each page, but I'd rather not do this, as it's a complicated web app with lots of pages. I'd rather have one js file for each type of control that gets included in a view if the view contains at least one of that type of control.
Are CSS classes my best option? Any other ideas? I'm using MVC3.
My advice would be to try it out with classes and test the performance. If you are not satisfied, switch to IDs. I use class selectors all the time and don't find them terribly slow in any browser. When you give jquery a context to search in, things are quite fast. For example:
$('#controls .control').whatever();
Or
$('.control', '#controls').whatever();
Sizzle is great at optimizing these things to be fast.
Edit: Here is a good reference for jQuery performance tips in general (notice #5):
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Change all CSS property at run time

I have page which has several Button & images inside the <div>. I have such requirement :
On clicking over any image or button a div/page appears which contains all the css property and gives option to change the CSS property of concern element. eg. color, value, font size etc....
Is there any plugin available for that or do i need to create by own. I'd appreciate your suggestion
Thanks
you can refer these plugins and modify the source code according to requirement....
changecss
http://www.bramstein.com/projects/jsizes/
I doubt there will be such plugin which will know the ids/names of all your elements. The only way to have such plugin is if it searches by element type, but that will be really uncleaver, since it may list 100+ html elements, while you need to change only 5 (for example). It will be better and smarter to write it by yourself in my opinion.
jQuery makes such changes trivial, take a look at the .css() function. In order to get all elements you'll probably want to look at DOM traversal.
If you only need this for debugging purposes, you can use Chrom'e developper tools or Mozilla Firebug. They allow you to visualize and change CSS attributes on the fly.
If you need this for a shipping product, then good luck. It seems very hard, notably handling the CSS priority rules. Maybe you can get some reusable code from Firebug's code, which is mostly JS.
Use jquery for setting the desired css properties.
Use selector and google for setting css properties using Jquery.

General tips for semantically cleaning up HTML, CSS & JS?

As I've gotten deeper into using jQuery with various sites I've worked on, I've found that I can get lost on whether a class attribute value is appended to an element in the DOM in order to attach an actual CSS style, or to bind an event to it. As such, I've started leaning towards using the rel attribute on anchor tags to denote if something is going to be bound to an event, keeping the class attribute specifically for stylization. (I've not delved into this deep enough to determine if there are any drawbacks or fundamental flaws with this approach, however, and am open to comments & criticisms on it.)
It got me to thinking that others must have similar things they do to help keep their code organized, and I'm interested in learning about some new ideas that might be floating around out there.
Usually this is not much of an issue for me, even in medium sized projects.
I usually assign classes for styling, and I often end up using same selectors in JS code.
Semantically speaking, the rel attribute is not an appropriate way to store data. As it should point out the relation of a link to the target.
HTML5 makes things more flexible with data- custom attributes.
You use the class attribute when you have multiple HTML elements that have shared presentation or shared behavior.
So if you have several buttons for which you want to use the same event handler, then you give those buttons a class and then use JavaScript to select those elements (by class) in order to set the handler on them (you use a JavaScript library which has a selector engine). For example, in jQuery:
$(".addButton").click(function() {
// the event handler
});
Classes are used both for CSS styling and JavaScript manipulation.

Categories