I can't seem to figure out why my .off('click') jQuery method isn't working considering I am removing the event binding from '.reveal-menu'. The first animation works fine as each div moves to its respective location in increments of 78. But I can't seem to get it to go back.
JQUERY
$(function(){
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click',
function(){
$(this).addClass('down');
iconSpacerCount = 78;
userMenuDivs.show();
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount},200);
iconSpacerCount += 78;});
});
$('.reveal-menu').off('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});
});
HTML
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg"></i>
</div>
<div class="post-option">
</div>
<div class="search-option">
</div>
<div class="chat-option">
</div>
<div class="profile-option">
</div>
<div class="friends-option">
</div>
<div class="organizations-option">
</div>
<div class="public-figures-option">
</div>
<div class="sign-out-option">
</div>
</div>
Here is a link to a video to show you what I'm doing.
https://dl.dropboxusercontent.com/u/3270373/2016-06-01_21-57-20.mp4
The .off is used to remove the events. It is not used to add the opposite event of .on. You can switch the click event between two function like this:
$(function() {
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click', revealMenuOn);
});
function revealMenuOn() {
$(this).addClass('down');
$('#user-menu div:gt(1)').slideDown( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOff);
}
function revealMenuOff() {
$(this).removeClass('down');
$('#user-menu div:gt(1)').slideUp( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOn);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg">1</i>
</div>
<div class="post-option">
2
</div>
<div class="search-option">
3
</div>
<div class="chat-option">
4
</div>
<div class="profile-option">
5
</div>
<div class="friends-option">
6
</div>
<div class="organizations-option">
7
</div>
<div class="public-figures-option">
8
</div>
<div class="sign-out-option">
9
</div>
</div>
You can try .unbind() event.
$('.reveal-menu').unbind('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});
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 using toggle function to 4 div's elements. I need to close prev div, when I click second. How can I do it?
$(document).ready(function() {
var $this = $(document).find('.slider-div');
var $thiz = $('.money-transf');
$('.money-transf').click(function(e) {
for (var i = 0; i < $this.length; i++) {
// here i need to add toggle function to $this[i] elements;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>
You don't need a loop for this. You simply need to call slideUp() on all other .slider-div elements before you toggle the one related to the clicked .money-transf, like this:
$(document).ready(function() {
var $slider = $('.slider-div');
var $transf = $('.money-transf');
$transf.click(function(e) {
var $target = $(this).next('.slider-div');
$slider.not($target).slideUp();
$target.slideToggle();
});
})
.slider-div {
display: none;
}
p {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
<p>Element</p>
</div>
<div class="slider-div">
<p>Inform about element</p>
</div>
<div class="money-transf">
<p>Element2</p>
</div>
<div class="slider-div">
<p>Inform about element2</p>
</div>
Note that I changed the $this and $thiz variable names to something more meaningful and less easy to confuse.
Try this code
$("div").click(function(){
$(this).prevAll().toggle(); // toggle all previous divs
//$(this).prevAll().addClass('hide'); // hide all previous divs
});
.hide{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div '>
<p>Inform about element</p>
</div>
<div class='money-transf '>
<p>Element2</p>
</div>
<div class='slider-div '>
<p>Inform about element2</p>
</div>
You can try following.
Hide all the slider-div`s at the beginning
In click function, hide all the slider-div's and then show the next corresponding slider-div element
$(document).ready(function(){
var transfs = $('.money-transf');
$('.slider-div').hide();
transfs.click(function(e){
$('.slider-div').hide();
$(e.currentTarget).next('.slider-div').show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div>
<div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>
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'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'));
});
Hi i have this problem: I want to click on div which will flipped (this is work) but next step is flipp div back on click on "x" (this is my problem).
HTML code:
<div class="col-md-4">
<div class="balik">
<div class="panel panel-default panel-cube">
<div class=" flip">
<div class="card">
<div class="panel-body face front">
<h4>Balík 28 dní</h4>
<br>
<h1>16,80€</h1>
<br>
<h4>Zisti viac o balíku »</h4>
</div>
<div class="panel-body face back">
<p class="close">x</p> <h4>O Balíku 28 dní</h4>
» celkom 28 dní na topovanie
<br />» 5 topovaných inzerátov
<br />» -30% z ceny oproti balíku 7 dní
<br />
<br>
<button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Kúpiť</button>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY code:
$(function(){
$('.flip').click(function(){
$(this).find('.card').addClass('flipped')
});// this is work
$('.close').click(function(){
$('.flip').find('.card.flipped').removeClass('flipped')
}); // this is not work
});
Thanks for answers.
Because .flipped is essentially a dynamically-created element, you'd need to use event delegation:
http://jsfiddle.net/isherwood/7Zg92/
$(document).on('click', '.close', function () {
$('.flip').find('.card.flipped').removeClass('flipped')
});
That's because events bubble up, you should stop the propagation of the event:
$('.close').click(function(event) {
event.stopPropagation();
$('.flip').find('.card.flipped').removeClass('flipped');
});
http://jsfiddle.net/aaLUs/