This question already has answers here:
Firing event on DOM attribute change
(6 answers)
Closed 5 years ago.
<div class="current"></div>
text
How do I detect when e.g. a .live class is added to this <div> and do something when it happened?
For example, if class is changed, then hide the link.
I have a minified script that makes changes on the <div>'s class. It’s too big for me to find the place where it happens, so I'm searching for some way to catch the class change.
There are DOM events, but they are far from perfect and not available in most browsers. In other words: Not possible (reliably). There are hacks like intervals and checking it in each iteration, but if you need to do something like this, your design is probably screwed. Keep in mind that such things will be slow and that there will always be a delay. The smaller the delay, the slower the application. Do not do that.
You may checkout the following article for some ideas.
I don't know if the class you add to the link is always the same but if so, why don't you use CSS for this.
<style type='text/css>
.myaddedclass{display:none}
</style>
If you just need to figure this out once (i.e. not in code), Google Chrome’s web inspector shows DOM changes live. Not sure if that’d help your situation out though.
Related
This question already has an answer here:
Why sometimes jQuery selector returns something like "a.fn.init"? [closed]
(1 answer)
Closed 6 years ago.
I don't know what happen to my Chrome browser, but all of sudden the behavior of doing $('div#my') in console is totally different from before. One time I've experienced this but later it somehow recovered, so I don't know how to reproduce it, and today it happened again.
Please watch the video:http://peaceevertvimg.org/jq.php.
In the video I do $('div#my') in two different browsers:
the first browser is not chrome but I believe it imitates Chrome so its behavior is what I expect and what I have almost always been experienced. Because currently my chrome is not working as expected so I have to use it to demonstrate my expection: when you do $('div#my)` you see directly the html TAG, and you can easily see the tag's html content, which is "something" in this case.
In contrast, in my chrome browser, the result is different, when I do $('div#my') I see an Object(n.fn.init), and I can't see the "something" immediately, which of course is very inconvenient. But before, I am pretty sure it was not like this, the behavior WAS exactly like that in the first browser.
The simple webpage in this video is http://peaceevertvimg.org/jquery.php, you can go test for yourself in chrome browser. And I am pretty sure most of you will see the first behavior. What happened to my chrome?(I've disabled all expansions and updated it to the latest version)
By the way, is "HTML Tag" and "Object Reference" the right words to describe these two different outcome?
*************Update*************
If the video is not sufficient to understand what I ask and what I want to fix, these two pictures may help.
Picture#1: This is the "normal" behavior I've expected:
Picture#2: This is the current behavior I am experiencing:
You can see the big differences, the first one is much more intuitive, revealing key information immediately, while the 2nd one is not, at least to me. What causes this problem and how do I go back to the first one?
$('div#my') doesn't return a DOM reference. It returns a jQuery wrapper around the found elements.
$('div#my')[0] would return a DOM reference. Or, forget jQuery and use:
document.getElementById("my");
...and you will get a DOM reference directly
Also, since there should/will only ever be one element with a given ID, it is unnecessary to use div#my, just use #my.
Assuming we have a <div id=someDiv>, and then we write:
console.log($("#someDiv"));
console.log($("#someDiv")[0]);
Chrome shows this:
In the first log, we see that the result is a jQuery object that contains one element (the div). In the second, we see the element directly.
Now, depending on what version of Chrome you have, you may see the first one reported simply as [Object object], but that doesn't change the underlying result.
From: Devx (http://www.devx.com/codemag/Article/40923)
Selectors let you select DOM elements so that you can apply
functionality to them with jQuery's operational methods. jQuery uses a
CSS 3.0 syntax (plus some extensions) to select single or multiple
elements in a document. You're probably already familiar with the CSS
syntax from HTML styling. Even if you're not, it's fairly easy to pick
up the key CSS selector features. I'll go as far as saying that jQuery
is the reason I really started to grok CSS. Using CSS syntax you can
select elements by ID, CSS class, attribute filters, or by their
relationship to other elements. You can even chain filter conditions
together. Look at this simple example, which selects all second-column
TD elements in a table using a simple selector: $("#gdEntries
td:nth-child(2)").
The jQuery Object: The Wrapped Set: Selectors return a jQuery object
known as the "wrapped set," which is an array-like structure that
contains all the selected DOM elements. You can iterate over the
wrapped set like an array or access individual elements via the
indexer ($(sel)[0] for example). More importantly, you can also apply
jQuery functions against all the selected elements. - See more at:
http://www.devx.com/codemag/Article/40923#sthash.l8Mo8CbH.dpuf
What you are seeing is said jQuery object returned by jQuery.fn.init().
What is going on is that jQuery() is being defined as jQuery.fn.init() which is another way to say jQuery.prototype.init() which is the selector function! What this means is that no one would call jQuery.fn.init() or jQuery.init() because jQuery() IS .init().
Some more info and a look at the jQuery code here: Help understanding jQuery's jQuery.fn.init Why is init in fn
As for a solution to your problem: https://chrome.google.com/webstore/detail/jquery-console-fix/jlmkkpkcgomkdpfhgjlpaaonhafnjgob?hl=en
This question already has answers here:
onclick="" vs event handler
(9 answers)
Closed 7 years ago.
1st: Adding onClick with a reference to a function.
<button id="click" onclick="click()">1.click me</button>
<script>
function click(){
alert("ok");
}
</script>
2nd: using jQuery to check the click event.
<button id="click">2.click me</button>
<script>
$(function(){
$('#click').click(function(){
alert("ok");
});
});
</script>
Which works better?
Selectors works using Jquery.js .
If your project is small then including Jquery in documents may not a good idea and makes your page loads heavily (not much).
But selectors (and specially JQuery) makes coding easy and provides professional features for website. So every web designers most to learn how to use that.
if your designing page[s] going to be complex, I suggest you to use JQuery but if your page is just like that you'll better to use simple Java Script.
And i am agree with #Tushar.
The most important thing is to keep html js css and all the other files separated. In that way it will be easy for you to keep your code clean.
For this main reason i prefer to use the second way. In fact in that way you can manage your events directly from js code and you don't have to check all around the HTML file in order to find your functions.
As far as your example is concerned, both work well. But if you are only concerned with which way is better, then it depends on what you are trying to achieve.
An ecommerce website:
They already have tons of images to load, and if they added an onclick on every element they wanted clickable, it would significantly increase their load time beccause the html is actually renedered on the webpage and that uses bandwidth.
However, if there is only one button, like a Hire Me on a portfolio website, then both work without any significant time delay.
This question already has answers here:
Do you ever need to specify 'javascript:' in an onclick?
(8 answers)
Closed 8 years ago.
Can someone please explain the difference between:
onclick="javascript:fnName(this);"
...and...
onclick="fnName(this);"
Is there any performance hit? or when to use what?
Not actually, and usually you don't write the first one. Because onclick handler is handled by the JavaScript, so calling JavaScript to handle it won't be a good bet.
In the context of event attributes it's completely useless. It's mainly used inside of the href attribute and allows you to create a pseudo-onclick event:
click me
Also you can just put it in the location input in your browser and run scripts. It's simillar to the console input.
Edit: I realized it's not really useless but it has completely different usage than you would thought. In the context of these event attributes it behaves like in a normal code and so it's a label. Try this:
<div onclick="javascript:while(true){while(true){alert('hello');break javascript;}}">click me</div>
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
what does #someDiv mean?
i am doing this:
onmouseover="evt.target.setAttribute('opacity', '0.5'); $('#someDiv').show();" onmouseout="evt.target.setAttribute('opacity','1)'); $('#someDiv').hide();"
but i guess i need something called an ID selector?
anyway how do i make it so that when there is a mouseover the object, i get a little popup ?
$('#someDiv') is selecting the element with ID="someDiv", so selectors might not be your problem.
Apart from using the onmouseover event attribute, the code you provided should basically work. Are you seeing any JS errors, or have other debug results you could share?
Edit:
It's probably (maybe?) unrelated to your problem, but you should consider moving all the JS logic to a linked JS file instead of using the onmouseover property. jQuery's $('#your-selector').mouseover() method is a much better way to handle this. (http://api.jquery.com/mouseover/)
This question already has answers here:
How to detect if JavaScript is disabled?
(39 answers)
Closed 8 years ago.
I want to inform a user if javascript is disabled in the browser and tries to access my website. My information will be like: "Please enable javascript in your browser for better use of the website". So how to do this?
If informing your users to enable it is all you want to do, you don't need to depend on server-side code (in fact, I don't think you can). Just use a <noscript> element:
<noscript><p>Please enable JavaScript in your browser for better use of the website.</p></noscript>
Well there's the tag for displaying html only without javascript, but if you want to control the CSS depending on it the best thing to do is to then specify .no-js before any CSS that's only for if JS is disabled, then as your first meaningful line of javascript remove that class from the body (and possibly add a .with-js class to apply js-only styles).
You can also have no default class but add one only with JS, it comes down to personal preference though you can/do get a slight flash of content intended for no javascript with the former before the body class is removed.
<noscript>
<div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
very easy u can do it in this way this is how stack overflow use to alert user if java script is dsabled