We Keep Coding

jQuery :visible working but :hidden does not

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
}

Link click count for animation to run once

I answered a question earlier to run a jQuery animation when a link is clicked. Then the poster asked quite a valid question which stumped me.
"How do you only run the animation on the 1st click"...
I thought this would be pretty simple, so I tried something like this:
clicked = true;
$('#hotel').click(function(){
if (clicked){
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Hotelbody').fadeIn();
$('#Mealsbody').hide();
clicked = false;
}
});
which, in all fairness, runs the animation only on the 1st click. But then if I clicked off that menu item and onto "Meals" for example, and return to click "Hotels" the animation doesn't run at all. I have spent the whole morning trying to figure this out, and I am getting frustrated now - haha
Essentially, what needs to happen is while the user is on "Hotels" menu item do not run the animation again if he / she clicks "Hotels" menu item. But if the user ventures to another menu item and returns to hotels, then run the animation.
Please see FIDDLE as an example.
Steps to follow:
1. Click Hotel --> (Animation runs)
2. Click Hotel again --> (Animation doesn't run)[so far, so good]
3. Click Meals --> Then Click Hotels again --> (Animation will not run again)
Please let me know if I need to explain myself further?
Thoughts:
- Have jQuery look at css class :active and animate from that?

Can't be that hard, just check if the one that's clicked is currently visible
$('#Hotel, #Meals').on('click', function(){
var el = $('#'+this.id+'body');
if ( el.is(':visible') ) return false;
el.animate({width:'toggle'},1000)
$('#Mealsbody, #Hotelbody').not(el).hide();
});
FIDDLE

Another way using classes http://jsfiddle.net/gMha8/17/
$('.tabs_bar').on('click', '#hotel:not(.now)', function () {
$(this).addClass('now');
$('#Meal').removeClass('now');
$('#Hotelbody').animate({
width: 'toggle'
}, 1000);
$('#Hotelbody').fadeIn();
$('#Mealsbody').hide();
});
$('.tabs_bar').on('click', '#Meal:not(.now)', function () {
$(this).addClass('now');
$('#hotel').removeClass('now');
$('#Mealsbody').animate({
width: 'toggle'
}, 1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
});
Here's a stupid way to do it http://jsfiddle.net/gMha8/14/
function meal() {
$('#Mealsbody').animate({
width: 'toggle'
}, 1000);
$('#Hotelbody').animate({
width: 'toggle'
}, 1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
$('#hotel').off().on('click', hotel);
$('#Meal').off('click', meal);
}
function hotel() {
$('#Hotelbody').animate({
width: 'toggle'
}, 1000);
$('#Mealsbody').animate({
width: 'toggle'
}, 1000);
$('#Hotelbody').fadeIn();
$('#Mealsbody').hide();
$('#Meal').off().on('click', meal);
$('#hotel').off('click', hotel);
}
$('#hotel').off().on('click', hotel);
$('#Meal').off().on('click', meal);

Try this:
var lastClicked = null;
$('#hotel').click(function(e){
if (lastClicked != e.target){
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Hotelbody').fadeIn();
$('#Mealsbody').hide();
}
lastClicked = e.target;
});
$('#Meal').click(function(e){
if (lastClicked != e.target){$('#Mealsbody').animate({width:'toggle'},1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
}
lastClicked = e.target;
});
http://jsfiddle.net/gMha8/22/

Try this
$('#hotel').click(function(){
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Mealsbody').animate({width:'toggle'},1000);
$('#Hotelbody').fadeIn();
$('#Mealsbody').hide();
});
$('#Meal').click(function(){
$('#Mealsbody').animate({width:'toggle'},1000);
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
});
Demo

How do I get an image to fade in and out on a scroll using jQuery?

This question seems easy but I cant seem to get the fade effect to work properly, please view the fiddle to see the code, you will notice that the image only fades in when you scroll back up and does not fade out when you scroll down, why does this happen? I don't think I fully understand the code I've written I would appreciate some help.
Here is the jQuery code
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);
}
});
Thank you in advance!
http://jsfiddle.net/a4FM9/809/

Demo
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).hide().fadeIn(5000); //added hide before fadeIn
} else {
divs.stop(true, true).show().fadeOut(5000); //added show before fadeOut
}
});

Very simply you could just remove .stop(true, true) and it fades in both directions:
Working Example
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<=10){
divs.fadeIn(5000);
} else {
divs.fadeOut(5000);
}
});
If you want to have the fade take place after the scroll has stopped you could use a timeout function like so:
Working Example 2
$(window).scroll(function () {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
var divs = $('.banner');
if ($(window).scrollTop() <= 200) {
divs.fadeIn(5000);
} else {
divs.fadeOut(5000);
}
}, 1000)); //timeout set to 1 second
});
See: yckart's timeout function for more info on this timeout function.

Javascript or jQuery slide to element

When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.

$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}

You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.

Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});

Jquery show and hide elements according to position

I am trying to make a carousel of sorts. I am kind of stuck with hiding and displaying the next and precious buttons once a div moves to the far left and right of its container.
I think i have everything correct regarding calculating the widths but for some reason when you click the buttons, elements stay hidden irrespective of the conditional comments which should dictate when they should be hidden or shown.
Here is a link to what i have thus far. Click the MoveLeft and MoveRight buttons. http://www.ehbeat.com/test/
<script type="text/javascript">
$(document).ready(function () {
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();
//Check distance from left
var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
$(".MoveRight").click(function () {
$(".GalleryItem").animate({
"left": "+=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "+=100px"
}, "slow");
});
$(".MoveLeft").click(function () {
$(".GalleryItem").animate({
"left": "-=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "-=100px"
}, "slow");
});
$(".Controls").live('click', function () {
if (galleryItemLeft >= "0") {
$('.MoveRight').hide();
}
else {
$('.MoveRight').show();
}
});
if (galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});
</script>

It looks like you setup all of your variables inside the $(document).ready() call.
This means that while they're being set on load, they're not getting updated with each click.
Your galleryItemLeft, galleryItemWidth and galleryItemWidth variables need to be updated on each click, so I'd recommend re-assigning the values in each click (by moving the assignment into the live functions)
Edit Also, as your last if statement is excluded from any click function, it'll need to be relocated to inside the live click events as well.
-Chris

Chris is right, code should look like this:
$(".Controls").live('click', function() {
position = $('.GalleryItem').position();
galleryItemLeft = position.left;
if(galleryItemLeft > "0") {
$('.MoveRight').hide();}
else{
$('.MoveRight').show();
}
if(galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});