jQuery animations conflict - javascript

I tried to use jQuery animation to animate a div's content and reset everything to default using a close button. The problem is here that after clicking on close button and resetting everything to default, the first animation starts again.
$(document).ready(function(){
$(".order-b").click(function(){
$(".order-t").animate({top:'30%'}, "slow" );
$(".order-c").animate({opacity: '1', top:'70%'}, "slow" );
$(".order-ca").delay('800').animate({opacity:'1'}, "slow" );
}).clearQueue().stop();
$(".order-c").click(function(){
$(".order-ca").animate({opacity:'0'}, "fast" );
$(".order-t").delay('800').animate({top:'52%'}, "slow" );
$(".order-c").delay('800').animate({opacity: '0', top:'70%'}, "slow" );
});
});
<div class="process-bars">
<div class="process-bar order-b">
<div class="process-title order-t">
<i class="fa fa-shopping-cart"></i>
<h1>Order</h1>
</div>
<div class="process-caption order-ca">
<p>Text</p>
</div>
<div class="process-close order-c">
<i class="fa fa-times-circle"></i>
</div>
</div>
</div>
What am I doing wrong?!

The class .order-b is within the class .order-c so the event click will always trigger on click into the div .
You have to use http://api.jquery.com/event.stoppropagation/

Your div with the class
"process-bar order-b"
is the parent div from
"process-close order-c"
So your "click"-event from the order-b also fires, if you klick at the order-c.
You have to put that child with the class order-c outside. not in the div with the class "order-b".

Related

HTML mobile button show/hide after few seconds

i have for my mobilesite some buttons.
<div class="menubottom" id="menumobile">
<div >
<div class="mobilebutton displaynone" id="mobilebuttonLeft" style="float:left;" onclick="swipeRight();"><i class="fa fa-chevron-circle-left fa-3x" aria-hidden="true"></i></div>
<div class="mobilebutton" id="mobilebuttonRight" style="float:right;" onclick="swipeLeft()"><i class="fa fa-chevron-circle-right fa-3x" aria-hidden="true"></i></div>
</div>
</div>
now i want them to disappear if a amount of time with no TouchInput passes away.
And if i Touch again on the display the buttons should be appear again.
I have jquery and jquery mobile installed but i cant find a good resolution for my problem. Did you have any idea?
now i want them to disappear if a amount of time with no TouchInput
passes away
You can do setTimeout which will hide the menu after 2 seconds
function hideMenu(){
setTimeout( function(){
$ ( "#menumobile" ).hide();
}, 2000);
}
To make it reappear again on click, just bind a touchend event
$(document).on( "touchend click", function(){
$ ( "#menumobile" ).show();
hideMenu(); //hide again after 2 seconds
})
You can use touchstart and touchend event for hiding show mobilebutton
settimeout of 3s for hide button after touchend
$("body").on('touchstart mousedown',function (e){
$('.mobilebutton').show();
});
$("body").on('touchend',function (e){
setTimeout(function(){
$('.mobilebutton').hide();
}, 3000);
});

Check if all divs are hidden after click event

I have divs with a link in each. After clicking on the link, the div is hidden. I want to make a redirection to another page when all the divs are hidden.
Here is my code:
<div class="checkhide">
<div>
<div>
<a href="#" class="btn" onClick="$(this).parent().parent().parent().hide()" role="button">
<span class="glyphicon glyphicon-remove">
</span>
</a>
</div>
</div>
</div>
Not clear what you mean 'all' div, it seems this onClick="$(this).parent().parent().parent().hide()" only works for ONE div.
Maybe if add class 'hidden' to <div> when click <a > , and if you know how many div there are, like 4.
Then check whether 'all' div class contain 'hidden', by:
$("a").on('click', function(){
// here should be some div you want to hide
$(".checkhide").addClass("hidden");
})
var hidden_div_number = $("div").find("[class*='hidden']").length;
if (hidden_div_number==4){
// do something;
}
I solved the problem. That was just a typo. I forgot the "." in my javascript:
$(function() { if ( $(".checkhide:visible").length === 0) alert('all are hidden'); });
Thank you all!

jQuery nested click events

I have the following markup:
<div data-href="http://www.xxxxxxxxxxxxx.com/xxxxxxxx.php/Mediterranean-Youth-Hostel/Barcelona/6053" data-id="6053" class="property-wrapper row">
<div class="columns large-4 medium-4">v
<img class="recent-viewed-img" src="http://ucd.xxxxxxxxx.com/propertyimages/6/6053/107.jpg" alt="">
</div>
<div class="columns large-8 medium-8">
<div class="info">
<span class="city">Barcelona</span>
<span class="close right">x</span>
</div>
<span class="hostel-title">Mediterranean Youth Hostel</span>
<div class="rating">
<span class="number">9.1</span>
<span class="text">Fabulous</span>
</div>
<div class="bottom-info">
<span class="price-from">From €9.90</span>
<div class="icon_freewifi right">
<i class="fa fa-wifi"></i>Free WiFi
</div>
</div>
</div>
</div>
and 2 js function with 2 different click events as follow:
this one allows you to click the all row and take you to anoter page:
$('.property-wrapper .columns').on('click', function(){
window.location.href = $(this).parent().data('href');
});
this one simply closes and removes the row you just clicked on:
$('body').on('click', '.close.right', function(){
$(this).parent().parent().parent().fadeOut(200, function(){
CRO_106_removePropertyFromCookie($(this));
CRO_106_hideOverlayIfNoPropertiesLeft();
});
});
the problem is that when on .close.right it also goes to the other page.
The 2 click events are conflicting.
I can edit the markup, I have tried to have an "a" wrapper around but that didnt work either..
You need to check the event.target inside of the click handler bound to .property-wrapper .columns, and if it's .close.right, you can prevent the redirect from occurring:
$( '.property-wrapper .columns' ).on( 'click', function( evt ) {
if ( $( evt.target ).is( '.close.right' ) ) {
return true;
}
window.location.href = $( this ).parent().data( 'href' );
} );
You can't use event.stopPropagation() in the handler bound to the body because the above click handler would have already fired, and the redirect already occurred.
Here's a fiddle which demonstrates this and here's a fiddle with the proposed solution

jQuery toggleClass conflict

For a new webdesign I have two 50% width slider div's as a menu, and I want to add/remove/toggle the 'open' class with jQuery. On the click of one of the .menul, the #left should have added class .open, unless #right:hover and the other way around. The first time you click it it works, but the second time you click it seems to be that the toggleClass is stuck / not updated... Does anyone know how to fix this?
Here's my HTML:
<div id='home'>
<div class='slide' id='left'>
<div class='wrap'>
<div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a><br/>
<div class='subtext'>
<a class='menul' href='#artist'>Performing artist</a><br/>
<a class='menul' href='#composer' id='one'>Media Composer</a><br/>
<a class='menul' href='#producer' id='two'>Band Producer</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logol'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
<div class='slide' id='right'>
<div class='wrap'>
<div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a><br/>
<div class='subtext'>
<a class='menur' href='#management'>Content Management</a><br/>
<a class='menur' href='#portfolio' id='one'>Design Portfolio</a><br/>
<a class='menur' href='#engines' id='two'>Search Engines</a></div>
</div>
<div class='inner'></div>
<a class='full' href='#home'></a>
</div>
<div class='logo' id='logor'>
<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>
</div>
</div>
</div>
And here's my jQuery:
$('.menul').click(function(){
$('#left').addClass('open');
$('#right').removeClass('open');
$('#right').hover(function(){$('#left').toggleClass('open')});
});
$('.menur').click(function(){
$('#right').addClass('open');
$('#left').removeClass('open');
$('#left').hover(function(){$('#right').toggleClass('open')});
});
And here's the fiddle: http://jsfiddle.net/ytexqtyg/2/
Any help would be very much appreciated!
I had another look and you will have to add another class or data attribute to differentiate between an active-and-closed menu and a active-and-open menu or this won't work.
The active "flag" is to ensure you only toggle the .open class on an active menu.
In addition you also need to keep unbinding the hover event as otherwise you are constantly re-binding the hover, causing the element to have multiple hover events bound which then will all execute and contradict each other.
Note that when unbinding the hover event using jQuery off('hover')/unbind('hover') doesn't work and you must unbind the mouseenter and mouseleave events as those are bound by jQuery when using selector.hover(...)
The new JavaScript code is as follows:
$('.menul').click(function () {
$('#left').addClass('active');
$('#left').addClass('open');
$('#right').removeClass('active');
$('#right').off('mouseenter mouseleave').hover(function(){
if($('#left').hasClass('active')){
$('#left').toggleClass('open');
}
});
});
$('.menur').click(function () {
$('#right').addClass('active');
$('#right').addClass('open');
$('#left').removeClass('active');
$('#left').off('mouseenter mouseleave').hover(function(){
if($('#right').hasClass('active')){
$('#right').toggleClass('open');
}
});
});
DEMO - Using a separate indicator for an active menu

Moving mouse to quickly doesn't trigger mouseleave

I have the following html:
<div class="guide-block" id="energy_guide">
<div class="guide-block-inner">
<div class="guide-block-head">
<a class="guide-block-link" href="#">
<h3 class="guide-block-title">Guides</h3>
</a>
</div>
<div class="guide-block-image">
<div class="guide-block-image-inner" id="energy_guide">
<img src="images/Energy-Saving-Bulb-01.png" alt="Guide">
</div>
</div>
<div class="guide-block-more">
<ul class="guide-block-list us-list" id="energy_guide">
<li>News</li>
<li>Guides</li>
</ul>
</div>
</div>
</div>
and the following js:
$( "#energy_guide" ).mouseenter(function()
{
$(".guide-block-image #energy_guide")
.fadeOut("fast", function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeIn("fast");
});
});
$( "#energy_guide" ).mouseleave(function()
{
$(".featured_news .guide-block-inner .guide-block-more #energy_guide")
.fadeOut("fast", function ()
{
$(".guide-block-image #energy_guide")
.fadeIn("fast");
});
});
The list is hidden by default in the css and what i want to achieve is to replace the image with the list while hovering the mouse over the whole guide-block div. Everything is fine and dandy until you move your mouse too fast, the mouseleave function not being triggered for some reason.
Just a first idea that hit me was that actually your events are totally fine, rather the way jQuery constructs Animations and builds them in the queue.
a probable fix would be to .stop() your subsequent animations (anim. buildups) so an overall code could look like:
$( "#energy_guide" ).hover(function() {
$(this).stop().fadeToggle();
});
(Without seeing a demo of your code with CSS it's a bit hard to guess but here you go)
The way you use your selectors is wrong:
.featured_news .guide-block-inner .guide-block-more #energy_guide
jQuery will select only #energy_guide and taking in considerations that it's the only ID in your document (as it should be) there's no need to use parent Class selectors.

Categories