I created a panel (div) that slides in and out of my nav bar. Right now, it'll open and close once just fine but then it won't respond to clicks anymore.
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click');
};
});
$('.work-link').on('click', function(){
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
});
$('.exit-sort').on('click',function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
I figured the problem has to do with how I used the .on() and .off() events but I don't know how else to approach it. What am I doing wrong?
The click eventhandler is discarded when you call .off(). To turn it back on, you have to call the .on() function again with the event callback (as if you are calling for the first time).
That is, your .mouseover() call needs to be changed like this:
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click', function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
};
});
PS: Validate syntax/typos as I couldn't test your code.
You can try this : instead of having mouseover handler just use if conditions in click handler as shown below so that you don't have to on / off click handlers again and again.
NOTE:- You should use $(this) instead of $('.work-link') which will be extra load on script. $(this) is the object of clicked element.
$('.work-link').on('click', function(){
if($(this).css('left') === '0px')
{
return true;
}
else if($(this).css('left') === '-750px')
{
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
}
});
Related
I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
I'm practically useless at JavaScript so I need your help to add a "pause on mouse hover" feature to this slideshow.
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
} );
setInterval(function() {
if(jQuery('.cbp-fwnext').css('display') != 'none'){
jQuery('.cbp-fwnext').click();
}
else {
jQuery('.cbp-fwdots span:first-child').click();
}
}, 3000);
I found this slideshow here and I added the bottom bit (copied it from another user) to allow it to auto scroll but I have no idea on how to make it pause on mouse hover.
Please help anyone.
If I understand your code correctly, you are using setInterval() to simulate a click on the next button every 3 seconds. So you can add a pause by having some code process the mouseenter and mouseleave events and set a isPaused variable that your existing code would then test before doing the click(). Assuming you want the hover functionality to be over the #cbp-fwslider element:
$( function() {
var isPaused = false;
$( '#cbp-fwslider' ).cbpFWSlider()
.on({
mouseenter: function() { isPaused = true; },
mouseleave: function() { isPaused = false; }
});
setInterval(function() {
if (isPaused) return; // do nothing when paused
if(jQuery('.cbp-fwnext').css('display') != 'none')
jQuery('.cbp-fwnext').click();
else
jQuery('.cbp-fwdots span:first-child').click();
}, 3000);
});
Note that I've moved your setInterval() code inside the document ready handler so that isPaused can be a local variable within the ready handler rather than a global.
(Simple demo of the pause-on-hover functionality without the slideshow: http://jsfiddle.net/1gf8z8yd/1/)
here is my fiddle
the '.item' click function that shows the '.pull_down_content' doesn't always work why is this?
i've found that if you click the first 'tile' this will work fine and whilst that is open click the next tile still works fine but if you then go back to the original tile the click function stops working and only the hover works?
why is this?
here is part of my code..
$(this).children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation();
if ($('.timelineTile').hasClass("clicked")) {
if (!$(this).data('clicked')) {
var Height = e.type==='mouseenter' ? '60px' : e.type==='click' ? '300px' : '0px';
$(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300);
}
} }
});
It looks like you are adding additional click events on the children every time you click on '.timelineTile'. You should move the above code outside of the '.timelineTile' click event. At the very least remove the existing events before re-adding them.
I'm building a multi-level menu, where the submenu is being displayed with jquery.
It drops down when a main link is hovered, then slides up when the mouse leaves.
I want to stop the mouseleave action, when mouseover is active, but i can't stop the second event (animate->margin-bottom). I'm new to jquery, so i went through many questions and googled a lot, but i don't really understand what i'm supposed to do here. Any help will be greatly appreciated!
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
jQuery("#submenu").delay(2000).slideUp("slow");
jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});
jQuery("#submenu").on('mouseover', function() {
jQuery(this).stop();
});
Just try with:
jQuery("#submenu").on('mouseover', function()
{
jQuery(this).stop();
jQuery("#horizontal-menu").stop();
});
I've managed to do it, thanks everyone. Hsz's answer was good, but it didn't fully stop the event, so here's the solution:
function(){
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
var hover_off = false;
jQuery("#submenu").mouseover(function (){
hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
hover_off = true;
setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
if (hover_off == true){
jQuery("#submenu").delay(1000).slideUp("slow");
jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
}
};
I am trying to create a toggle because for some reason the toggle function is not working.
this works as expected. it basically does the animation an a couple of css call then swaps classes for the next function call.
$(document).ready(function() {
$(".m-menu").click( function(){
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '0'}, 500);
$(".mobile-menu-bg").animate({left: '0'}, 500);
$(".menu-close").css('display','inline');
$(".menu-open").css('display','none');
$( '.m-menu' ).removeClass( "m-menu" ).addClass("m-menu2");
}
});
});
The next function looks like this, which is suppose to execute if the class is there, then switch back to the original class. What am I doing wrong here?
$(document).ready(function() {
$(".m-menu2").click( function(event){
event.preventDefault();
if ($('.mobile-menu').hasClass("menu") ) {
$(".mobile-menu").animate({left: '-200'}, 500);
$(".mobile-menu-bg").animate({left: '-2000'}, 500);
$(".menu-close").css('display','none');
$(".menu-open").css('display','inline');
$('.m-menu2').removeClass( "m-menu2" ).addClass("m-menu");
}
});
});