I have the following function:
// Go to the previous item
$(".owl-prev-custom").click(function () {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});
With this html:
<div class="owl-carousel owl-carousel-timeline">
<div class="owl-item">
<div class="item" data-hash="2006">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2009">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2010">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2013">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item item-year-active" data-hash="2013-2">
<div class="carousel-card"></div>
</div>
</div>
</div>
<div class="owl-nav owl-nav-timeline">
<div class="owl-prev-custom"></div>
<div class="owl-next-custom"></div>
</div>
The problem I have is that the click event, when reaches the first item .owl-item:first (or last item .owl-item:last), does not stop and the class .item-year-active disappears since it goes to an item before the first owl-item.
I would like to know how to stop my function in the first .owl-item and in the last .owl-item so that this does not happen.
Please let me know if I explain well, to give more details, English is not my primary language :)
Check whether the active element is the first element, and skip it when you reach the end.
// Go to the previous item
$(".owl-prev-custom").click(function() {
if (!$(".owl-carousel-timeline .item.item-year-active").is(".owl-carousel-timeline .item:first")) {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
}
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});
Related
I want to find the index .col in .row
When I click on .option it should give me the position of .col in .row
<div class=“row”>
<div class=“col”>
<div class=“option”>click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option”>click 2 (return 1)</div>
</div>
</div>
Can anyone tell me how?
Put a click listener for it
$('.option').click(function (event) {
alert($(this).index()); // the index was $(this).index()
});
<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(0)">click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(1)">click 2 (return 1)</div>
</div>
</div>
I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!
You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});
The following code display columns that slide down (the .select-plan-details div) when pressing .select-plan-buy (the other columns, if open, slide up).
HTML:
<div class="select-plan-container">
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-starter">
</div>
<div class="select-plan-details select-plan-details-starter">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-level">
</div>
<div class="select-plan-details select-plan-details-level">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-levels">
</div>
<div class="select-plan-details select-plan-details-levels">
</div>
</div>
</div>
JS:
jQuery(".select-plan-buy").click(function () {
jQuery('.select-plan-column .select-plan-details').slideUp();
jQuery(this).next(".select-plan-details").slideToggle();
});
Right now when I press .select-plan-buy again (when .select-plan-details is already open), it slides up and then down again (the current column). How can I do it so it slides up properly?
You could use:
jQuery('.select-plan-column .select-plan-details').not(jQuery(this).next(".select-plan-details")).slideUp();
jQuery(".select-plan-buy").click(function () {
var objDetail=$(this).next(".select-plan-details");
$('.select-plan-column .select-plan-details').not(objDetail).slideUp();
objDetail.slideDown();
});
I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});
I replaced the broken img links with simple text for the jsfiddle.
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.