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).
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).
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!
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 :)
I am new to javascript and jQuery.
i just want to know that is there any way create something different ,say structured dom language ?
in jQuery to select all div
var divs = $("div");
i want to know the possibility of something like this
var SDL = new SDL();
var div = SDL.query("select div from document"); //or something like that ..
or to select a div with ID
var div = SDL.query("select div from document where id='divID'");
looking mad right ?
i am sure i will not care about the downvotes for the question , but i need to know why this is not good ? or why its is not posible ?
Please say something on this ...
Thank you.
It's not good because it's pointless to implement or use. It would make the jQuery library much larger than it needs to be, and CSS selectors are clear enough anyway, as well as being far more concise.
It is possible, but what you're describing is actually pretty close to CSS selectors, but with a couple of extraneous words thrown in with some formatting changes.
In your "SDL" selector, it would simply be replaced by:
div#id
Why go through the trouble of writing a whole sentence to do the same thing? There may be a third party SQL-like selector library, in the same way Sizzle is a CSS selector library, however I've never heard or seen of one personally.
An SDL would also be much slower than using CSS-based selectors, as the string is more complex and has more garbage in it than a CSS selector string. More importantly, however, you wouldn't get the native speedups that querySelectorAll() et al give when used natively.
anyone know how i can style a form element with javascript, but without a framework?
Found a nice plugin for jquery but I don't use jquery at all on my website so I want to avoid it if possible..
I want to create a select box that looks like this:
http://iforce.co.nz/i/qebncmoz.png
to clarify, i want to set an image/background on the select box so that I can have a custom dropdown arrow
You can style elements through the style attribute (replacing '-' with camel case) like this:
document.getElementById('elem').style.backgroundColor = 'red';
But it's better to put the styles in CSS and just change classes in JavaScript instead:
document.getElementById('elem').className = 'roundedCornerButton';
You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.
The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.
You won't need Javascript for that, pure CSS will do.
Check this article for example:
Style Web Forms Using CSS
The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.
There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.
There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.
But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.
If the form element has an ID associated, then you can use code similar to the following:
elem = document.getElementById(elemId);
elem.style.background = 'white';
I assume you want to dynamically change the element style; differently, you don't need JavaScript to obtain what you want.
It's not possible without javascript see here my question How to style a <select> dropdown with CSS only without JavaScript?
And if uyou don't want to use any framework then try this
http://v2.easy-designs.net/articles/replaceSelect/