I'm trying to add a CSS class on hover to an element using jQuery. However, the class should only be applied to the closest element with a specific class so I tried using .next
When I add the .next to my code though the class isn't added anymore (it works without that part of the code). This is the code:
$j('.products_overlay').hover(function(){
$j(this).next('.hover_text').addClass('overlay_text');
}, function(){
$j(this).next('.hover_text').removeClass('overlay_text');
});
Any idea what I'm doing wrong?
This is the HTML
<div class="products_overlay">
<a href="..." title="product1" class="product-image">
<img src="...." alt="product1" class="hover_test" />
</a>
<p class="hover_text">Test</p>
</div>
Should be
$j('.products_overlay .hoverText').addClass('overlay_text');
or
$j(this).find(".hoverText").addClass('overlay_text');
That's because next() doesn't look in the descendants, but in the next nodes.
Your problem is the next which only finds siblings
$j('.products_overlay').hover(function(){
$j(this).next('.hover_text').addClass('overlay_text');
}, function(){
$j(this).next('.hover_text').removeClass('overlay_text');
});
this in that case is the products_overlay div, so your .hover_text is a child and not a sibling.
To fix it use find:
$j('.products_overlay').hover(function(){
$j(this).find('> .hover_text').addClass('overlay_text');
}, function(){
$j(this).find('> .hover_text').removeClass('overlay_text');
});
Your jQuery code doesn't work as next() looks at siblings, yet .hover_text is a child of .products_overlay. As such you should use find(). You can also shorten the code using toggleClass():
$j(function($) {
$('.products_overlay').hover(function(){
$(this).find('.hover_text').toggleClass('overlay_text');
});
});
That being said, given your HTML you don't need to use jQuery at all. You can achieve what you need in CSS alone:
.products_overlay:hover p {
color: red; /* place the relevant hover styling in here */
}
<div class="products_overlay">
<a href="..." title="product1" class="product-image">
<img src="...." alt="product1" class="hover_test" />
</a>
<p class="hover_text">Test</p>
</div>
Related
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have my posts lopping on an .each loop and I have a link to display comments on the bottom of the loop.
I want to show the comment section on click, but when I click comments for all posts open as well. I only want the one that's clicked to open.
I've tried a ton of different examples I've found on this site, but so far none of them have worked.
I'm sure this is extremely easy to accomplish, but I'm a JavaScript noob.
Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/
As well as the code snippet -
JS
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$('.artist-micropost-comments-container').toggle();
});
});
HTML
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
CSS
.artist-micropost-comments-container {
display: none;
}
The way that you are trying to grab the relevant element is wrong. You need to traverse the DOM with respect to the element that is being clicked. If you try to use the direct class selector in this case, then it would select all the elements which are having the supplied class.
Try,
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this).closest('.artist-micropost-social')
.next('.artist-micropost-comments-container').toggle();
});
});
DEMO
Use
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this)
.closest('.artist-micropost-social') //Find parent container
.next('.artist-micropost-comments-container') //Find next comments container
.toggle();
});
});
Try This SEE DEMO
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();
});
});
I have an anchor tag inside which I append some divs through jQuery. I want that the 'hyperlink' effect of the parent <a> tag should not appear in the appended child elements.
How can we achieve this with jQuery or in some other way.
Here is the fiddle of what I want.
UPDATE:
Most of the answers tell how to remove the click effect. Isn't there something that can prevent every default behavior of anchor tag from child elements?
FIDDLE
Ok. Here is some sample HTML
<a href="google.com" id="first">
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
</a>
<a href="google.com" id="second">
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
</a>
This CSS will remove the underscore, change the font color and the cursor
div{
display: inline;
}
#second{
text-decoration: none;
color: #000;
cursor: default;
}
The jquery removes the click event from the children
$('#second').children().each(function(){
$(this).click(function(e){
e.preventDefault();
});
});
Update: Further to your comments, what you are trying to do is complicated and kind of weird. You say for some reason you have to wrap the divs in an achor tag but not have them inherit the properties. You will have to make some trade-off. The trick is to remove the 'href' from the a tag. You would not have to write any jQuery/javascript for this. As a matter of fact you don't even need any CSS then. Essentially, remove all the css and jquery from the above and remove the href from the second a.
FIDDLE
You can use the :first-child Selector. Look at http://api.jquery.com/first-child-selector/
You can remove underline with CSS:
a div {
text-decoration: none
}
To stop anchor from following its href attribute you need to bind a handler to click event which returns false. In jQuery you can achieve it this way:
$('a div').on('click', function() {
// do whatever you want to do here
return false;
});
I edited selectors (added div) after you provided jsfiddle. Still, there is one more thing. According to your fiddle I assume you didn't want "Something" to be wrapped with div.
It should look like this: jsfiddle
You should add an eventlistener to your anchors and prevent the default behaviour:
document.getElementsByTagName("a")[0].addEventListener("click", function(e){
if(e.target.tagName=="DIV") e.preventDefault();
});
For some reason, I can't get jQuery to do what I want it to do.
What I need is for the container div to disappear when one of its children is clicked.
Here's example HTML
<div id="container">
<a href="link">
<div id="child1">
When this is clicked, #container disappears,
including everything contained inside...
</div>
</a>
<a href="link">
<div id="child2">
...or when this one is clicked
</div>
</a>
</div>
Here's what I've tried.
$("#child1").click(function () {
$(#container).hide();
});
and
$("#child1").click(function () {
$(#container).fadeOut("fast");
});
Thanks in advance.
With this code, no matter how many elements you have in your #container div, clicking on them will hide the whole div :
$("#container").children().bind("click", function(e){
e.preventDefault();
$("#container").fadeOut();
});
See here : http://jsfiddle.net/pioul/Bd9Dc/
$("#child1, #child2").click(function(e) {
$(e.target).parents("#container").hide();
}
Something like that? Or more like
$("#container").children("div").click(function(e) {
$(e.target).parents("#container").hide();
}
$("#container").children().click(function(e) {
$("#container").hide();
}
From what you've posted, your selectors are not valid strings.
$(#container) will throw a syntax error, because the syntax should be $(selector) where selector is a string or an object.
So, just update your selectors from
$(#container)
to
$('#container')
Note : even this site's syntax highlighter gives you a hint that something is wrong!
Hello I have the following code:
Javascript/jQuery:
$(document).ready(function() {
$(".clickMe").click(function() {
$(".textBox").toggle();
});
});
Html code printed with a for loop:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>
I would like to be able:
When the page loads I want the to be hidden and toggle on click.
Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.
jsFiddle code:
http://jsfiddle.net/A7Sm4/3/
Thanks
Edit 1: Class instead of Id
Edit 2: Fixed jsfiddle link
id are supposed to be unique
you should use class to do this
[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/
Something like this should do the trick:
$(document).ready(function() {
var divs = [];
$(".textBox").each(function(index) {
divs[index] = this;
});
$(".clickMe").each(function(index) {
$(this).click(function() {
$(divs[index]).toggle();
});
});
});
ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
...
Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.
Then you attach click handlers to a.clickMe:
$(function () {
$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it
$(this).nextAll('div.textBox:first').toggle();
});
});
However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).
E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".
In that case (you used your original markup), this code will work:
$(function () {
$('a#clickMe').click(function () {
$(this).nextAll('div#textBox:first').toggle();
});
});
Again, don't do this unless you absolutely need to!
$(document).ready(function() {
$("a").click(function() {
$(this).parent().find("div").toggle();
});
});
Use something similar to this.
Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.