jQuery slideup casuing multiple slides - javascript

I'm looking to use jQuery to slide an element down, wait, then slide it back up.
When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.
HTML:
<div id="area">
<div id="summary"><p>hello summary</p></div>
<div id="dropdown">
<div class="item"><p>hello item</p></div>
<div id="functions"><p>hello functions</p></div>
</div>
</div>
<p>TEST ADD</p>
jQuery:
$("document").ready( function () {
$("#test_add").bind("click", add_item_annimate)
})
function add_item_annimate() {
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}
Not really sure why this is happening.

That's probably because of animation queue, for clearing it you can use the stop method:
$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");

This code should do the trick!
$("document").ready( function () {
$("#test_add").click( function(){
$("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
//SlideUp and slideDown can be switched.
});
});
Example:
http://jsfiddle.net/xcm8n1s3/

You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.
if ($("#dropdown").is(':animated')) {
return false;
}
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
Here is a jsfiddle of the working demo.

Related

Adding Timeout breaks everything

I have 3 nav buttons that, when hovered over, open a menu underneath. I want to add a timer when then mouse leaves the button so it doesn't close right away after opening. It bugs out a bit then. This is my starter code in jquery, for opening the drop-menu
$('.info').hover(function () {
$('.d-skills').show(500);
$('.d-info').hide(500);
$('.d-exp').hide(500);
});
If I add this code in it breaks and nothing works
function(){ t = setTimeout(function(){$('.d-info').hide(500)}, 500;)
}
Also, i add
var t;
on the very beggining, and i separate the functions with a ','.
'd-info' is the class for the drop menu, and 'info' is the button class
You can use handlerOut function for hover.
Below is a simple snippet that demonstrates this and hides the sections after a 1.5 second delay.
$('.info').hover(function () {
$('.d-sections').show(500);
}, function() {
setTimeout(function() {
$('.d-sections').hide(500);
}, 1500);
});
.d-sections {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
Hover here for more Information!
<div class="d-sections">
<div class="d-skills">
The D Skills section!
</div>
<div class="d-info">
The D Info section!
</div>
<div class="d-exp">
The D Exp section!
</div>
</div>
</div>
https://jsfiddle.net/32bekom9/1/

Make an endless jQuery short and easy

I have an accordion on my WordPress website.
Usually it works fine, adding and removing classes when clicking the different tabs, but there is an issue with one of the accordions on the website: When clicking on one of the tabs - it doesn't close the rest of the opened tabs. So I added this code in and it works fine:
jQuery(document).ready(function($) {
$("#top11").click(function() {
$("#collapse202").removeClass("in");
$("#collapse203").removeClass("in");
});
$("#top12").click(function() {
$("#collapse201").removeClass("in");
$("#collapse203").removeClass("in");
});
$("#top13").click(function() {
$("#collapse201").removeClass("in");
$("#collapse202").removeClass("in");
});
});
I am sure that there is a way to make it shorter, could some one please explain how to do it more compact?
One way is to add data-id to each collapsed element. For example:
<div id="collapse201" data-id="top11"></div>
<div id="collapse202" data-id="top12"></div>
<div id="collapse203" data-id="top13"></div>
And of course you should use a class in your tabs just in case there are lots of tabs in your accordion:
<div id="top11" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
The JS code could look like this then:
jQuery(document).ready(function($) {
$(".clickingTab").click(function() {
var clickedId = $(this).attr("id");
$("element:not([data-id="+clickedId+"])").removeClass("in");
});
});
There of course could be more efficient ways to solve your problem. But for this particular question this could be the particular solution.
If your HTML look like that, you can use the next() function to target the next sibling element:
$("#top11, #top12, #top13").click(function() {
$("#top11, #top12, #top13").next().removeClass("in");
$(this).next().addClass("in");
});
.in {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top11">top11</div>
<div id="collapse201" class="in">collapse201</div>
<div id="top12">top12</div>
<div id="collapse202" class="in">collapse202</div>
<div id="top13">top13</div>
<div id="collapse203" class="in">collapse203</div>

OnClick event for div inside lots of container Divs

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.
One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>
Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});
Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle

Hiding the closest div with the specified class

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()

Slide Up/Down with jQuery

I need to slide up/down or just show and hide div but it's not working. My code:
<div class="facilities">
<div id="facheader">
<div class="facheadname">
Facilities
</div>
<div class="facheaderbutton">
△
</div>
</div>
<div id="factable">
<table border="0">
<tr><div class="factableheader">
<th>Name</th><th>City</th><th>Country</th><th>Compliance Certification</th><th>Audit History</th><th>Date</th><th>Remediation History</th><th>Date</th></div>
</tr>
<tr>
<td>Kowloon</td><td>Hong Kong</td><td>Hong Kong</td><td>cGMP-FDA</td><td>Compliant cGMP-SeerPharma</td><td>12/12/10</td><td>Clean room staff training – IRB-C</td><td>01/03/05</td>
</tr>
</table>
</div>
</div>
I tried code - it's hiding content but not showing when pressed again:
$('#facheader').click(function(){
if ($('#factable').is(':hidden')){
$('#factable').show();}
else{
$('.contclickedinfo').hide();
}
return false;
});
$('#factable').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#factable').hide();
});
I also tried these but they are not working at all:
$(document).ready(function(){
$('#facheader').click(function(){
$('#factable').slideUp(), function(){
$('#factable').slideDown();
});
});
and
$('#facheader').toggle(function(){
$('#factable').slideUp(800); // Text slides up
}, function(){
$('#factable').slideDown(800); // Text slides down
});
Short with toggle function
$("#facheader").click(function(){
$("#factable").slideToggle(); /* between () you can define speed in MS */
});
Because it's not a link that triggers the slide, you don't need to return false or stopPropagation.
Something which is strange is:
<tr><div class="factableheader">
When browsers see this, they will put your outside your table.
Are you using multiple DIV's with the same ID?
$('#facheader').click(function() {
if ($('#factable').is(':visible'))
$('#factable').slideUp(800); // Text slides up
else
$('#factable').slideDown(800); // Text slides down
});
$('#facheader').click(function() {
if ($('#factable').is(':visible')){
$('#factable').hide();
} else {
$('#factable').show();
}
return false;
});
That should work just the way you want to. I changed the element you wanted to hide, because you picked a different element. Besides, the :visible selector has served me better than :hidden. I'm not sure why :hidden doesn't always work the way we expect it to work.

Categories

Resources