I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks
You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted
I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)
Related
I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>
In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.
Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.
my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.
I have a few elements flying around in an element that need to be altered when the window finishes loading ($(window).load...)
When the script loads, I've been struggling to find a more elegant way of finding a string.
Noticeably below, you can also see the rampant re-use of parent and next operators...
I've tried closest but it only goes up the dom tree once (from what I understand) and parents has never really worked for me, but I could be using it wrong.
Ex.
$(window).load( function(){
if($(".postmetadata:contains('Vancity Buzz')").length){
$(this).parent().parent().next().next().next().next('.articleImageThumb img').hide();
}
});
HTML output this runs through looks like this:
<div class="boxy">
<div class="read">
<div class="postmetadata">Vancity Buzz</div>
<div class="articleTitle"></div>
</div>
<div class="rightCtrls"></div>
<div class="initialPostLoad"></div>
<div class="ajaxBoxLoadSource"></div>
<div class="articleImageThumb">
<a href="#">
<img src="image.png" class="attachment-large wp-post-image" alt=""/>
</a>
</div>
</div>
I think you want to do this:
$(".postmetadata:contains('Vancity Buzz')")
.closest('.read') //Closest will get you to the parent with class .read
.siblings('.articleImageThumb').hide(); //this will get you all the siblings with class articleImageThumb
this refers to window there not the element you are checking in the if condition.
Fiddle
I don't know if your intention is to have the empty anchor tag just by hiding the image. if so just add a find to it.
You can just do this
$('.articleImageThumb img').toggle($(".postmetadata:contains('Vancity Buzz')").length)
If there are multiple divs and you do need to traverse then there are multiple ways
$(".boxy:has(.postmetadata:contains('Vancity Buzz'))").find('.articleImageThumb img').hide()
or
$('.postmetadata:contains("Vancity Buzz")').closest('.boxy').find('.articleImageThumb img').hide()
or
$(".boxy:has(.postmetadata:contains('Vancity Buzz')) .articleImageThumb img").hide()
Have you looked into parents http://api.jquery.com/parents/ you can pass a selector like so:
$(this).parents('.boxy').find(".articleImageThumb")
Careful though, If there is a parent boxy to that boxy, parents() will return it and thus you find multiple .articleImageThumb.
I have many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});