We Keep Coding

Jquery sequential display units when the mouse

I made a simple code :
JSFiddle: http://jsfiddle.net/xmocartx/sr194nsb/4/
The problem is that when you hover the mouse fast blocks mixed.
In Jquery I am a newbie. Please tell me how to fix this? Thank you.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval)
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenu ul li").removeClass("active");
$(this).addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});

give this a try.
This should fix the display Issue while preserving the 500 sec fade in.
It basically clears the display contents when moving the mouse fast so you dont get the messy transitions.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval);
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
$(".slideMenu ul li").removeClass("active");
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item").stop().fadeOut(500);
$(".slideMenuCont .item").css("display","none");
$(this).addClass("active");
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});
Update: trying Combining both $(".slideMenuCont .item").stop().fadeOut(500); and
$(".slideMenuCont .item").css("display","none");

jquery fadeIn fadeOut some problems

i wanted to create some fadeIn FadeOut effects. When pressed button the main id should be removed and hidden content should be appered and wise versa. (sorry for my poor english knowledge) Jsfiddle
<div class='button'>Click me</div>
<div id='main'></div>
<div class='hidden'></div>
css
#main {
width:80%;
height:300px;
background:#95a5a6;
float:right;
overflow:hidden;
position: relative;
}
.button {
width: 90px;
height:90px;
border-radius: 50%;
background:#e74c3c;
top:70px;
text-align:center;
line-height:90px;
position:absolute;
cursor: pointer;
color:#fff;
}
.hidden {
position:relative;
width:80%;
float:right;
height:250px;
background:#ddd;
margin: 0 auto;
display:none;
}
jquery
$('.button').on('click', function(){
var main = $('#main');
var hidden = $('.hidden');
if(main){
$(main).fadeOut();
$(hidden).fadeIn();
}else{
$(hidden).fadeOut();
$(main).fadeIn();
}
})

You need to call the fadeIn method in the fadeOut callback
http://jsfiddle.net/jgTh2/12/
$('.button').on('click', function () {
var main = $('#main');
var hidden = $('.hidden');
if (main.is(':visible')) {
main.fadeOut(function () {
hidden.fadeIn();
});
} else {
hidden.fadeOut(function () {
main.fadeIn();
});
}
});

var show = true;
$('.button').on('click', function(){
var main = $('#main');
var hidden = $('.hidden');
if(show){
$(main).fadeOut();
$(hidden).fadeIn();
show = false;
}else{
$(hidden).fadeOut();
$(main).fadeIn();
show = true;
}
})
in the css set .hidden to opacity:0 and remove display:none;

You have to use 1 more variable — flag.
Try this:
var flag = 0;
$('.button').on('click', function(){
var main = $('#main');
var hidden = $('.hidden');
if(flag == 0){
$(main).fadeOut('fast', function() {
$(hidden).fadeIn();
flag = 1;
});
}else{
$(hidden).fadeOut('fast', function() {
$(main).fadeIn();
flag = 0;
});
}
})
Fiddle
As #cgatian suggested, you can use boolean variable, instead of integer:
var flag = false;
$('.button').on('click', function(){
var main = $('#main');
var hidden = $('.hidden');
if(flag == false){
$(main).fadeOut('fast', function() {
$(hidden).fadeIn();
flag = true;
});
}else{
$(hidden).fadeOut('fast', function() {
$(main).fadeIn();
flag = false;
});
}
})

No need to maintain two fadeIn/fadeOut blocks
$('.button').on('click', function(){
var visible = $('#main');
var hidden = $('.hidden');
hidden = hidden.is(':visible') ? [visible, visible = hidden][0] :hidden;
visible.fadeOut(function()
{
hidden.fadeIn();
});
})
http://jsfiddle.net/eN6bg/

Add and remove class to jquery onscroll

I need to add a 'fixed' class for the header on scroll and remove it when it's scrolled back up in the following script, but not sure how best to do it:
<script>
$(document).ready(function () {
var div = $('.header');
var div2 = $('.headerPlaceholder');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
$(div2).css('display', ((p) > start) ? 'block' : 'none');
});
});
</script>
This stop it triggering the event after each scroll down which is what happens now with the CSS specified in the script, hence I need to add a class.
CSS:
.fixed {
position: fixed;
}
Ideas appreciated.

I have translated your js to use css with the application of 1 class to the body
$(document).ready(function () {
var start = $('.header').offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
if( p > start ) {
$('body').addClass('fixed');
} else {
$('body').removeClass('fixed');
}
});
});
CSS
body.fixed .header {
position: fixed;
top: 0;
}
body.fixed .headerPlaceholder {
display: block;
}

The add/remove class method works great.
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.header').addClass("fixed");
} else {
$('.header').removeClass("fixed");
}
});
});
Here's a fiddle showing how it works: http://jsfiddle.net/gisheri/RpPEe/413/

I want to enable auto slider and infinite loop in JavaScript

<script type="text/javascript">
$(document).ready(function() {
var acch = 1;
$('.controls ul a').click(function() {
var chno = $('.slider-container li').length;
switch($(this).attr('data-gallery')){
case 'slide-left':
if (acch < chno){
acch++;
startSlide(acch);
}
break;
case 'slide-right':
if (acch <= 1){
acch = 1;
}else{
acch--;
startSlide(acch);
}
break;
}
})
function startSlide(itemNo){
var sTo = '#slider-item-' + itemNo;
$('#home-top-content').scrollTo($(sTo), 300);
}
$('.backToTop').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
})
})
</script>
This is the script listed above i need to enable auto slide function and infinite loop
http://aphex.fresh-pixel.com/
This is the link to theme which i am using, you can see the problem in slider

I think this implemetation is better, since you can add any number of sildes in the design without any chage in the code.
<script type="text/javascript">
$(document).ready(function() {
$('.controls ul a').click(function() {
moveSliders($(this));
})
function startSlide(element){
$('#home-top-content').scrollTo(element, 300);
}
$('.backToTop').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
})
setInterval(function(){
moveSliders($('.controls ul').find('a.arrow-right'));
},6000);
function moveSliders(clickElement)
{
//Get li with class active if that count is zero put it as the first li
var currentActive = $('.slider-container li.slide-active');
var firstElement = $('.slider-container li:first');
var lastElement = $('.slider-container li:last');
if(currentActive.length == 0){
firstElement.addClass('slide-active');
currentActive = firstElement;
}
switch(clickElement.attr('data-gallery')){
case 'slide-left':
//Next
var nextElement = currentActive.next();
if(nextElement.length == 0)nextElement = firstElement;
$('.slider-container li.slide-active').removeClass('slide-active');
nextElement.addClass('slide-active');
startSlide(nextElement);
break;
case 'slide-right':
//previous
var previousElement = $('.slider-container li.slide-active').prev();
if(previousElement.length == 0)previousElement = lastElement;
$('.slider-container li.slide-active').removeClass('slide-active');
previousElement.addClass('slide-active');
startSlide(previousElement);
break;
}
}
})
</script>

jQuery - Auto Scroll gallery

I'm in a bit of trouble and need help. I basically have a carousel (scrolling) type gallery with three images. You only see one image at a time, and to see the next image, you have to click the link that relates to that image or click on the current image itself to see the next image. This would make it scroll one image along and the li containing the image gets a class of 'active'.
I've been asked to add Auto Scroll functionality and I'm a bit stuck?
They basically want it to auto scroll 1 image every 2/3 seconds if the user is not using the links to scroll the gallery.
Any help would be MASSIVELY appreciated :)
I am not allowed to use a plug-in or anything either, I have to alter the current code :S
To be honest I know this is probably a hopeless case, but if there is somebody out there that could solve this it would be really appreciated.
The scrolling/gallery functionality is towards the bottom.
$(document).ready(function() {
Cufon.replace('.section-1 h2, .section-2 h3, .follow h3, .follow h4, .overlay h3, .overlay h4');
$.friends.people.init();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest($.friends.people.overlay.request);
});
$.friends.people = {
init: function() {
this.slide_anchors();
this.gallery.init();
$.friends.tooltips.init();
this.overlay.init();
this.label_value.init();
},
slide_anchors: function() {
$('a.down, a.up').click(function(event) {
event.preventDefault();
var speed = 400;
var target = $(this).attr('href');
var dest = $(target).offset().top;
$('html:not(:animated), body:not(:animated)').animate(
{ scrollTop: dest },
speed,
function() {
window.location.hash = target;
}
);
return false;
});
},
overlay: {
email_btn: null,
sms_btn: null,
init: function() {
this.close();
$('a.sms').click(function() {
__doPostBack($.friends.people.overlay.sms_btn, '');
$('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
return false;
});
$('a.email').click(function() {
__doPostBack($.friends.people.overlay.email_btn, '');
$('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
return false;
});
$('.section-2 a.sms, .section-2 a.email').click(function() {
$('a.up').click();
return false;
});
},
close: function() {
$('a.overlay-close').click(function() {
$('.overlay-wrap').fadeOut(250);
return false;
});
},
request: function() {
$.friends.people.label_value.init();
$.friends.people.overlay.close();
Cufon.replace('.overlay h3, .overlay h4');
$.friends.external_links();
}
},
label_value: {
init: function() {
$('.labelValue').each(function() {
var text = $(this).text().replace(/^\s+|\s+$/g, '');
var $textbox = $('#'+$(this).attr('for'));
if($textbox.val() == "") $textbox.val(text);
$textbox.focus(function() {
if($(this).val() == text) $(this).val("");
});
$textbox.blur(function() {
if($textbox.val() == "") $textbox.val(text);
});
});
}
},
gallery: {
i: null,
width: null,
moving: false,
speed: 500,
init: function() {
this.i = $('.section-2 .col-2 .images img').length;
if (this.i > 1) {
this.resize_div();
this.add_nav();
}
},
resize_div: function() {
this.width = $('.section-2 .col-2 .images img:first').width();
$('.section-2 .col-2 .images').width((this.i * this.width) + 'px');
},
add_nav: function() { /* rewrite this with .each() */
var html = '<ul class="image-nav">';
for (x = 0; x < this.i; x++) {
html = html + '<li></li>';
}
html = html + '</ul>';
$('.section-2 .col-2').append(html).find('li:first').addClass('active');
$('.section-2 .col-2 ul.image-nav li a').click(function() {
if (!$.friends.people.gallery.moving) {
$.friends.people.gallery.moving = true;
$.friends.people.gallery.scroll($('.section-2 .col-2 ul.image-nav li a').index(this));
}
return false;
});
$('.section-2 .col-2 .images img').click(function() {
if (!$.friends.people.gallery.moving) {
$.friends.people.gallery.moving = true;
var current = $('.section-2 .col-2 .images img').index(this);
if (current >= ($('.section-2 .col-2 .images img').length - 1)) {
var target = 0; console.log('asd');
} else {
var target = current + 1;
}
$.friends.people.gallery.scroll(target);
}
return false;
});
},
scroll: function(img) {
$('.section-2 .col-2 ul.image-nav li').removeClass('active');
$('.section-2 .col-2 ul.image-nav li:eq(' + img + ')').addClass('active');
$('.section-2 .col-2 .images').animate(
{ marginLeft: -($.friends.people.gallery.width * img) },
$.friends.people.gallery.speed,
function() {
$.friends.people.gallery.moving = false;
}
);
}
}
}

You could try using a setInterval:
window.setInterval(function() {
// calling your scrolling-to-next-image function
}, 2000);
This would call an anonymus function including your "scroll-to-next-image" function every 2 seconds.
Probably you need a clearInterval when the user starts using the "next" / "previous" buttons again.
More information on this topic can be found here: https://developer.mozilla.org/en/DOM/window.setInterval