Why is toggle double clicking

[dcp3450]

http://www.chattahoocheetech.edu/sandbox/newctc/

on the site I have three note cards. When clicked the one you selected slide to the right. If you click another card on the left the open card resets and the new card slides right. However, most of the time a double click is required to get the new card to slide to the right and the open card to slide left.

Code:

$(function()
{
$(‘#news’).toggle(function()
{
$(this).stop().animate({‘left’:’450px’});
$(‘#sports’).stop().animate({‘left’:’0px’});
$(‘#announcements’).stop().animate({‘left’:’0px’});
},function()
{
$(this).stop().animate({‘left’:’0px’});
});
});

[cybershot]

I can’t find these cards you are talking about on your site

[dcp3450]

This site is in testing so i ended up changing the address.

http://www.chattahoocheetech.edu/sandbox/newctc/index.html?page=home&theme=studentdesk

[noahgelman]

I think I got it. First, what you should do is reduce your code to just a couple of lines. That in itself can fix what is causing the bug. The more you simplify, the less chances of mistakes or little bugs.

Code:

$(document).ready(function() {
$(‘#display div a’).click(function(event) {
event.stopPropagation();
});
$(‘#noticeANDimages’).siblings().toggle(function() {
$(‘#noticeANDimages’).siblings().stop().animate({‘left’:’0px’});
$(this).stop().animate({‘left’:’425px’});
},function() {
$(this).stop().animate({‘left’:’0px’});
});
});

I think that should be right but there might be a line in there that needs to be altered. Just maybe. Switch that out with the code inside notecards.js and tell me how that goes. Also, if it doesn’t go right, make sure my code isn’t missing a character somewhere.

[dcp3450]

the code you have for that is for the notices on the right hand side the code for the notecards is

Code:

$(function()
{
$(‘#news a’).click(function(event)
{
event.stopPropagation();
});

$(‘#sports a’).click(function(event)
{
event.stopPropagation();
});

$(‘#announcements a’).click(function(event)
{
event.stopPropagation();
});

$(‘#news’).toggle(function()
{
$(this).stop().animate({‘left’:’450px’});
$(‘#sports’).stop().animate({‘left’:’0px’});
$(‘#announcements’).stop().animate({‘left’:’0px’});
},function()
{
$(this).stop().animate({‘left’:’0px’});
});

$(‘#sports’).toggle(function()
{
$(this).stop().animate({‘left’:’445px’});
$(‘#announcements’).stop().animate({‘left’:’0px’});
$(‘#news’).stop().animate({‘left’:’0px’});
},function()
{
$(this).stop().animate({‘left’:’0px’});
});

$(‘#announcements’).toggle(function()
{
$(this).stop().animate({‘left’:’425px’});
$(‘#sports’).stop().animate({‘left’:’0px’});
$(‘#news’).stop().animate({‘left’:’0px’});
},function()
{
$(this).stop().animate({‘left’:’0px’});
});
});

I removed all the .stop()’s assuming one was causing an issue and still get the same problem.

[noahgelman]

No, my code WAS for the notecards. I target the notices div and then use .siblings() to target all the notecard divs at the same time.

Did you try my code and it not work?

[dcp3450]

Yeah, the problem is still there. I have each card broken out mainly because the each need to go to the right a different amount.

[noahgelman]

Ok, with some critical thinking, I figured out what was the cause of the issue. Because you use toggle, you click on the card it opens, it’s setting up the next click to be the second part of the toggle. When you click on another card, it cancels the first toggle and doesn’t do anything. That’s why you need a second click to activate the new toggle. Below I combined your .stopPropagation() into one just for code reduction. But for the fix, I added a click function at the top of each of your toggles. That way, instead of just canceling the last toggle making you click again, clicking on another card will cancel the last toggle and start the new one in the same click. So copy paste the code and things should be dandy. Maybe. I don’t know if you still want the .stop() in there, I left it in just in case.

Code:

$(document).ready(function() {
$(‘#display div a’).click(function(event) {
event.stopPropagation();
});
$(‘#news’).click(function() {
$(‘#news’).toggle(function() {
$(this).stop().animate({‘left’:’450px’});
$(‘#sports’).stop().animate({‘left’:’0px’});
$(‘#announcements’).stop().animate({‘left’:’0px’});
},function() {
$(this).stop().animate({‘left’:’0px’});
});
$(‘#sports’).click(function() {
$(‘#sports’).toggle(function() {
$(this).stop().animate({‘left’:’445px’});
$(‘#announcements’).stop().animate({‘left’:’0px’});
$(‘#news’).stop().animate({‘left’:’0px’});
},function()
{
$(this).stop().animate({‘left’:’0px’});
});
$(‘#announcements’).click(function() {
$(”#announcements’).toggle(function() {
$(this).stop().animate({‘left’:’425px’});
$(‘#sports’).stop().animate({‘left’:’0px’});
$(‘#news’).stop().animate({‘left’:’0px’});
},function() {
$(this).stop().animate({‘left’:’0px’});
});
});

[dcp3450]

I’ll try the code when I get to work. However, the issue still happens even if you close the open card. So, even you do the second click on the open card you still have to double click the next card at times.

[Author]

Posts