Develop Reference

Javascript: fadeIn() function not working?

I have two functions.
setBindings() that scrolls to the a particular div when a menu item in the nav is clicked.
aboutSectionFadeIn(), second function is a simple that uses fadeIn() to Fade in and Fade out a particular div.
The issue is the setBindings() stops working on aboutSection div when I use the aboutSectionFadeIn() in my code, it stops scrolling to the a div that is clicked. I don't understand why. Any idea?
Here is the javascript code:
$(document).ready(function() {
setBindings();
aboutSectionFadeIn();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
// alert('button id ' + sectionID);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 500)
})
}
function aboutSectionFadeIn() {
$('#aboutSection').click(function () {
$('body,html').animate({
scrollTop: 0
}, delay);
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 20) { // If page is scrolled more than 20px
$('#aboutSection').fadeIn(1000);
} else {
$('#aboutSection').fadeOut(200);
}
});
}

scroll till active tab

This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});

Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID

Javascript/Jquery Slide effect happening in the wrong place

I have a section of my page that incorporates the Jquery slide effect but the div that is supposed to slide into the place of the original is sliding too low, then just popping into place. I'm not quite sure why it is behaving this way. What should I do to make the new div slide on the same plane as the original div? Below is my JS as well as a link to a fiddle so you can see what I mean exactly. Thanks!
http://jsfiddle.net/vYDqC/
$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").effect("slide", 800);
var animating = false;
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){
return;
}
else{
if(!animating)
$("#content div").hide("slide", {direction: "right"}, 800, function() { animating = true; });
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).show("slide", {direction: "left"}, 800, function() { animating = false;});
}
});
});

I've had this problem before with jQuery's slide effect. Try adding position: absolute to your .con class. Then you'll want to add width: 100% for it to fill out the parent div.
http://jsfiddle.net/vYDqC/2/

Animating list item with more efficiency

I want to bump up a li on hover and let it get to original state when the mouse leaves. This works but does the hover animat(up) another time when the mouse is leaving which gives me a delay and inefficient code. Do you guys have some suggestions for me to make this more efficient?
function HoverListItem() {
var menuItem = $('#menu > li')
menuItem.on('hover', function(){
console.log('up');
$(this).animate({
'marginTop': '-10px'
}, 150);
});
menuItem.on('mouseleave', function(){
console.log('down');
$(this).animate({
'marginTop': '0px'
}, 150);
})
};

This is because the animations are queued, clear the queue before issuing a new animation. I myself also prefer using hover() to register mouseenter and mouseleave.
$("#menu > li")
.css("position", "relative")
.hover(
function() {
$(this).clearQueue().animate({
bottom: 10
});
},
function() {
$(this).clearQueue().animate({
bottom: 0
});
}
Example: http://jsfiddle.net/6xXGw/

Jquery effects .queue()

This is the site i'm working on: http://www.sircat.net/joomla/sircat/mies/calendari.html
When I click on any year column (2012, 2011, 2010, etc) it shows the content of each year and hide the other ones.
The problem it's that when I click (2011 column for example), the animation does all the effects at the same time confusing the user, I think I have to do it with animation steps, but I haven't been able to come to a jquery solution.
This is my code:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(this).next(".contenido_calendario").toggle('slow');
scrollto($(this).offset().left - 352)
});
I have tried fixing the effect by using .queue() but it doesn't work, I don't know if the code it's well written also:
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(".contenido_calendario").queue(function() {
scrollto($(this).offset().left - 352);
$(this).dequeue();
});
$(".contenido_calendario").queue(function() {
$(this).next(".contenido_calendario").toggle('slow')
$(this).dequeue();
});
});

Just use callback functions:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
var $this = $(this)
$(".contenido_calendario").hide(function(){
$this.next(".contenido_calendario").toggle('slow',function(){
scrollto($(this).offset().left - 352)
});
});
});