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();
});
Related
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"
);
});
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
I have a website with different sections. I have jQuery to slide between these sections.
But now I have a link in a section which points to another section.
HTML:
<div class="section" id="one">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="tow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="ordernow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
jQuery:
// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
$.scrollTo($(this), 800);
});
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
}
The problem is that if I click on the link scrollOrderNow() the page slides to the order page and than back to the section because the link is in that section.
Could you please help me figure this out?
Thank You!
You can use a single click handler and determine what to do based on which element was clicked inside the section. For this, it's best to distinguish the clickable element by giving it a class:
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button" class="scroll-to-order"/>
</div>
</div>
The the click handler code:
$('div.section').on('click', function(evt) {
var $target = $(evt.target);
if ($target.is('.scroll-to-order')) {
// the image itself was clicked, so scroll to ordernow
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
} else {
// something else inside the section was clicked, scroll to section
$.scrollTo($(this), 800);
}
});
You'll need to put return false to your scrollOrderNow() function.
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
return false;
}
This way, your links will not react and the hash will not be appended to the URL, leaving the page where it is.
I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}
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.