How can I prevent toggle from sliding twice on double click?
I have a button that triggers a slide toggle. It toggles fine if the button is clicked once but if the button is clicked twice the slide toggle slides out then immediately slides back in.
How can I get the slide toggle to stay out even on double click?
Code here: https://codepen.io/anon/pen/Ljgqjo
JS:
$('button').on('click', function(){
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
});
});
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Set a flag for tracking whether your animation is running. Check if it is set before allowing the click action to have any effect. Unset it once your animation is done:
var animating = false;
$('button').on('click', function(){
if(!animating){
animating = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
animating = false;
});
});
}
});
This has the additional benefit of protecting against triple clicks (and quadruple clicks, etc...)
Here you go with a solution http://jsfiddle.net/nya99njz/2/
var sliding = false;
$('button').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Instead of click use dblclick.
Hope this will help you.
You can change this line
$('button').on('click', function(){
To
$('button').on('click dblclick', function(){
Then it will do the same thing for click and double click.
Related
Have some jquery script that must hide some text, objects, photos, etc.. The script hiding everything, but i need to show only 200px, then after clicking "more" - show 100%. (jquery lib i include) What i'm doing wrong? Thankx to all.
Here is a script:
<span id="hello-bigtext">Some big text, objects, photos, etc</span>
<div id="hello-more">more</div>
<div id="hello-less" >less</div>
<script>
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");
$("#hello-more").click( function() {
$("#hello-bigtext").show("slow");
$("#hello-less").show("slow");
$("#hello-more").hide("slow");
});
$("#hello-less").click( function() {
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");
$("#hello-more").show("slow");
});
</script>
$( document ).ready(function(){
$("#hello_bigtext").slideUp(600);
$("#hello_less").slideUp(600);
$("#hello_more").click( function() {
$("#hello_bigtext").slideDown(600);
$("#hello_less").slideDown(600);
$("#hello_more").slideUp(600);
});
$("#hello_less").click( function() {
$("#hello_bigtext").slideUp(600);
$("#hello_less").slideUp(600);
$("#hello_more").slideDown(600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello_bigtext" style="border-style:solid; height:200px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
<div id="hello_more" style="border-style:solid; height:200px; background-color:Yellow; cursor:pointer;">more</div>
<div id="hello_less" style="border-style:solid; height:200px; background-color:green; cursor:pointer;">less</div>
maybe so?
$( document ).ready(function(){
$("#hello_bigtext").animate({height:0 , opacity:0},600);
$("#hello_more").animate({height:200, opacity:1},600);
$("#hello_less").animate({height:0 , opacity:0},600);
$("#hello_more").click( function() {
$("#hello_more").animate({height:0, opacity:0},600,function(){
$("#hello_bigtext").animate({height:200, opacity:1},600,function(){
$("#hello_less").animate({height:200, opacity:1},600);
});
});
});
$("#hello_less").click( function() {
$("#hello_bigtext").animate({height:0, opacity:0},600,function(){
$("#hello_less").animate({height:0, opacity:0},600,function(){
$("#hello_more").animate({height:200, opacity:1},600);
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello_bigtext" style="border-style:solid; height:400px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
<div id="hello_more" style="border-style:solid; height:400px; background-color:Yellow; cursor:pointer;">more</div>
<div id="hello_less" style="border-style:solid; height:400px; background-color:green; cursor:pointer;">less</div>
I have a sliding div, or we can say that its a on click expand and collapse div(toggle).
I want to apply the .scrollTop() to the div. when the button is clicked to expand the div
before expand set to top, and then expand. I tried it more then hundreds times
with different ways but i unable to get the desired result. Any help will be appreciated.
<div id="mainarea">
</div>
<div class="slidingDiv">
</div>
<div class="show_hide">
<p> Click me</p>
</div>
var currentscrollpos;
currentscrollpos = $(window).scrollTop();
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$('body').animate({scrollTop:100}, 'slow')
return false;
});
});
$(document).click(function()
{
$('body').animate({ scrollTop: currentscrollpos }, 0);
});
//This is my css
#mainarea{width:550px; height:300px;background-color: yellow;}
.slidingDiv {
height:200px;
background-color: white;
margin-top:10px;
width:261px;
background-color: black;
}
.show_hide {
display:none;
}
#notificationFooter {
background:#FFFFFF; margin:0 auto; height:8px; width:96px;
}
This is the fiddle
http://jsfiddle.net/muheetmehfooz/wmwn5424/
What you are doing is not bring you to top, just move you bit up. However, if your question is only about how to make this actions in right order - try this.
jsfiddle
just use callback function
P.S.
to get to the top use
{scrollTop:currentscrollpos}
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});
Suppose I have a list of tasks taking the width of the screen. When I click on one of them, that it slides to the left to occupy the 50% of the with of the screen, and that, at the same time, slides from the right of the screen some details about the clicked task. This 'detail card' will take the half of the screen too. To summarize, I want to mimic the wunderlist effect. So I wrote this fiddle, but it is not working smoothly. Could some one help ?
Give appropriate width,position.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script>
$(document).ready(function(){
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
});
</script>