I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>
try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});
That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE
Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left
Related
I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?
Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!
Codepen is here
I have two triggers on an image. General behaviour:
When I click a trigger, it should reveal a small context box (got this working)
When I click outside of the context box OR the trigger, it should disappear (got this working)
When I click another trigger, if there is another trigger/context box that is already active/open, it should close the other one and open the recently click one (not working)
Here's the html:
<span class='pulse-button' id="button-1"></span>
<div class="content-box context-closed tabs" id="tabs1">
</div>
Here's my jQuery:
$(function(){
$(".pulse-button").click(function(e){
e.stopPropagation();
if( $(".pulse-button").not(this).hasClass("pulse-button-active")){
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}else{
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
};
});
$("body").click(function(evt){
if(evt.target.class == "content-box")
return;
if($(evt.target).closest('.content-box').length)
return;
if( $(".pulse-button").hasClass("pulse-button-active")){
$(".pulse-button").removeClass("pulse-button-active");
$(".pulse-button").next().addClass("context-closed");
};
});
$( "#tabs1,#tabs2" ).tabs();
});
What could I be doing wrong here?
You don't need the else in your .pulse-button click. Because the code in else block should be executed either any .pulse-button has class pulse-button-active or not. Change the your click event like following.
$(".pulse-button").click(function(e){
e.stopPropagation();
if($(".pulse-button").not(this).hasClass("pulse-button-active")) {
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
});
UPDATED PEN
I have no idea what I've done. The idea is to animate an element to slide in from a position and slide back when another element has been click. I've applied the second event within the call back of the original event function.
But, despite this structure, the second event function will run although I've not clicked the second element in the callback function.
If you're not following, the basic idea is this.
Click -> slidein -> outside click -> slide out
$('#mobileList').click(function(){
$('#mobileMenu').css({'display':'block'}).animate({
'left':'30%'
},500,function(){
$('#body').click(function(){
$('#mobileMenu').animate({
'left':'100%'
},500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/});
});
});
});
Starting CSS
nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;}
How the elements are structured.
<div id="body">
<a id="mobileList>☰</a>
<!-- content here -->
</div>
<nav id="mobileMenu">
<!-- content -->
</nav>
On the first two attempts it works fine. The next time I come to run, it will animate and then immediately animated out. I really can't see why as it's a call back function? :S
I think it's because the element #mobileList is within the element #body.
Is the call back still running? Can I cease it looking for the event?
Should I use queue() to run the slide in and slide out?
You don't need the callback here, just hook the click handlers up separately:
$('#mobileList').click(function(){
$('#mobileMenu').show().stop(true).animate({
'left': '30%'
}, 500);
});
$('#body').click(function(){
$('#mobileMenu').stop(true).animate({
'left': '100%'
}, 500, function() {
$(this).hide();
});
});
Example fiddle
Note that I used show/hide instead of css and added calls to stop() to prevent the queue being filled up on successive clicks during animation.
UPDATE
To hide the menu when you click anywhere else you need to attach an event handler to the document and check e.target to see what element caused the event. If it was outside the menu, hide it.
$('#mobileList').click(function (e) {
e.stopPropagation();
$('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500);
});
$(document).click(function (e) {
var $menu = $('#mobileMenu');
if (!$menu.is(e.target) && !$menu.has(e.target).length) {
$('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function () {
$(this).hide();
});
}
});
Updated fiddle
I am using jQuery to hide and show a div on hover of its parent div. It works but the only issue is that when you hover over and off a few times really quick it preforms each fade in and out over and over again untill its completed it as many times as you moved the mouse on and off.
see : http://api.jquery.com/hover/#hover-handlerIn-handlerOut
the first example's demo here if your hover over them all a few times really quick then watch you can see what I mean.
here is my code, Is ther any way to make it more user friendly and not repeat it self so many times?
$(function () {
$('.hide').fadeOut("fast");
$( ".fourth" ).hover(
function() {
$( this ).find('.hide').fadeIn("slow"); ;
}, function() {
$( this ).find('.hide').fadeOut("slow");
}
);
<div class="fourth">
<div class="products">
<h4 class="hide">Laern More</h4>
</div>
</div>
You need to use the .stop() function to stop the previously started animations :
$( ".fourth" ).hover(
function() {
$( this ).find('.hide').stop().fadeIn("slow"); ;
}, function() {
$( this ).find('.hide').stop().fadeOut("slow");
}
);
See the jQuery .stop() documentation for more information.
Use .stop() to stop the currently-running animation and .fadeToggle() to keep the code simple.
$(".fourth").hover(function() {
$(this).find('.hide').stop().fadeToggle("slow");
});
The FIDDLE.
$(function() {
$(".popup").hide();
$(".clickMe").mouseover(function () {
$(".popup").show();
}).mouseout(function() {
$(".popup").hide();//Set this to default hide
});
});
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<a class="clickMe" href="#"> Click here to see hidden item.</>
<div class="popup"> You've found me! </div>
I found this code that i would love to implement but unsure how. Instead of mouseover, how can i set it to onclick call instead? Thanks for your time.
This would do it
$(function() {
$(".popup").hide(); //Hide the popup first
$(".clickMe").click(function () { //Attach a click event to the .clickMe
$(".popup").toggle(); //Toggle the visibility of the popup
});
});
So all i've done is change the mouseover and mouseout events for a single click event for the element with a class of .clickMe. Then used a jQuery toggle effect which will show or display the div depending on whether it is already visible, hence 'toggle' the div. Look here for more info