jquery: how to use an id selector? [duplicate] - javascript

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

Related

What is the difference between parentNode.removeChild() and remove() [duplicate]

This question already has answers here:
What is the difference between 'remove' and 'removeChild' method in JavaScript?
(2 answers)
Closed 2 years ago.
I am developing a website. There are a lot of spots, where I have to remove the html element. The previous, main contributor used to do it like this:
var elem = document.getElementById('element');
elem.parentNode.removeChild(elem);
I'm wondering why didn't he just use
elem.remove();
instead.
I've gotten to the point, where the first method didn't work and returned an error, but the second one worked perfectly. Of course I wanted to stick with the code standard in this project, so my first try was to use parentNode.removeChild. Unfortunatelly I cannot contact that person to ask why is it done like that.
What is the difference between these two and can I safely replace those?
As from MDN, the two are equivalent. The .remove() was inspired by jQuery and was implemented much later. IE does not support it.
If you don't need IE, you can safely replace parentNode.removeChild, but if you will transpile the code, the replace method have polyfill using parentNode.removeChild method...
Source of the answer
How is remove different from removeChild?
remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical.
Also you might think ,Is there any way to ensure that element is actually removed from memory?
No. You can only unreference it and hope that there is a garbage collector which will detect the object is not referenced and then will remove it.

Difference between javascript:fnName() and normalfnname() [duplicate]

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>

How to do .attr or similar using javascript without using jquery? [duplicate]

This question already has answers here:
append string to image src using js
(2 answers)
Closed 3 years ago.
$("#my_iframe").attr("src","www.examples.com?x=asd&y=qwe");
This is done using jquery while I have to perform this operation without jquery. How to implement this with javascript?
document.getElementById('my_iframe').src = 'www.examples.com?x=asd&y=awe';
The DOM API provided by the browser gives you things that look like objects with ordinary properties. They're not "ordinary" properties, of course, because magic things happen when you set them (well some of them).
With "modern" versions of jQuery, in a situation like this it's (a little bit) better to use .prop() instead of .attr().
document.getElementById("my_iframe").src = "www.examples.com?x=asd&y=awe";
or
document.getElementById("my_iframe").setAttribute("src","www.examples.com?x=asd&y=awe");
You can use the setAttribute() method to set particular attribute on particular element. like
document.getElementById('my_iframe').setAttribute('src', 'www.examples.com?x=asd&y=awe');

How can I detect when an HTML element’s class changes? [duplicate]

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.

Update 2 exact same images source using javascript [duplicate]

This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Update 2 exact same images source using javascript
I using PHP captcha called Cryptographer captchan.fr site
I need to use 2 captcha on same page but I have problem they do get generated but when I click refresh only first one refreshes, refresh code looks like this.
document.images.captcha.src='cryptographp.html?cfg=0&&'+Math.round(Math.random(0)*1000)+1;
I tried this code but it only works for first one anyway
document.getElementById('captcha').src='cryptographp.html?cfg=0&&'+Math.round(Math.random(0)*1000)+1;
Now I wanted to do something like this i added name="captcha" to image but this does not work for some reason can someone help me fix it?
document.getElementsByName('captcha').src='cryptographp.html?cfg=0&&+Math.round(Math.random(0)*1000)+1;
I also have jquery attached to page if thats easier.
I tried to remove id and use class but still this does nothing
$('.captcha').src='cryptographp.html?cfg=0&&'+Math.round(Math.random(0)*1000)+1;
because saying undefined reference.
You're almost there! You need to use .attr in jQuery, as there is no .src method
$('.captcha').attr('src', 'cryptographp.html?cfg=0&&'+Math.round(Math.random(0)*1000)+1);
Ensure your two <img> has the class captcha
the correct syntax is
$(".captcha").attr('src',"image url")

Categories

Resources