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");
Related
I coded JS code to restructure html list items for responsive usage:
$(window).resize(function() {
if ($(window).width() <= 640) {
$(function resizenav() {
var lis = $('.menu-header-menu-container ul li:gt(1)').clone();
$('.menu-header-menu-container ul li:gt(1)').remove();
var newLI = $('<li class="toggle-dropdown">more+</li>')
var newUL = $('<ul class="nested"></ul>');
$('.menu-header-menu-container ul').append(newLI);
$(".toggle-dropdown a").append(newUL);
newUL.append(lis);
});
} else if ($(window).width() > 640) {
//destroy function resizenav()
}
});
Code snippet: https://jsfiddle.net/3o32rj1m/3/
I am seeking a way to destroy resizenav() and restore back the navigation original html structure. Any help is much appreciated?
I came up with a solution too... sorry for the delay. Here's the gist:
var isSmall = false;
$(window).on('load resize', function(){
if(!isSmall && $(window).width() <= 640){
var extraListItems = $('#menu-header-menu > li:gt(1)');
if(extraListItems.size() > 0){
var subList = $('<ul>').addClass('nested-list').append(extraListItems).css('display', 'none');
var toggle = $('<li>').addClass('toggle-nested-list').append("<span class='toggle-text'>more+</span>")
.on('click', function(){
subList.toggle();
if(subList.is(':visible')){ $(this).find('.toggle-text').text('less-'); }
else{ $(this).find('.toggle-text').text('more+'); }
});
toggle.append(subList).appendTo('#menu-header-menu');
}
isSmall = true;
}
else if(isSmall && $(window).width() > 640){
var listItems = $('#menu-header-menu .nested-list li');
listItems.appendTo('#menu-header-menu');
$('#menu-header-menu .toggle-nested-list').remove();
isSmall = false;
}
});
Hopefully I didn't miss anything when copying and pasting my code from jsFiddle, but I've got it all there for sure, with comments. Make sure you just resize the output frame in jsFiddle, as resizing the entire browser window has some strange effects there... https://jsfiddle.net/m4n41wkc/
Try this:
var flag = false;
var original = $('.menu-header-menu-container ul').clone().html();
function resizenav() {
var lis = $('.menu-header-menu-container ul li:gt(1)').clone();
$('.menu-header-menu-container ul li:gt(1)').remove();
var newLI = $('<li class="toggle-dropdown">more+</li>')
var newUL = $('<ul class="nested"></ul>');
$('.menu-header-menu-container ul').append(newLI);
$( ".toggle-dropdown a" ).append(newUL);
newUL.append(lis);
};
$(window).resize(function() {
if ($(window).width() <= 640) {
if(!flag) {
resizenav();
flag = true;
}
} else if ($(window).width() > 640) {
if(flag){
$('.menu-header-menu-container ul').html(original);
flag = false;
}
}
});
<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>
I have a little piece of javascript to support couple of functions such as navigation on my jquery slider. Recently I have noticed that when you click on the navigation button it does what it suppose to do but also creates an extra character in URL "#". I have checked the script and found where and why it is being added, but how to fix it's not added when navigation is clicked, I have no idea. is there any chance that someone can help or at least point me to the right direction. Please see the full code below
var fadeTimer;
var slideSpeed = 8000;
jQuery(document).ready(function() {
// add nav buttons
var slideCount = jQuery('#fader ul li').length;
var randomnumber=Math.floor(Math.random()* slideCount);
for ($i = 0; $i < slideCount; $i++) {
jQuery('#faderNav').prepend('<a href="#"><\/a>');
}
jQuery('#faderNav a').eq(randomnumber).addClass('active');
jQuery('#fader ul li').eq(randomnumber-1).addClass('active');
var next = jQuery('#fader ul .active').next();
if (next.length > 0) {
} else {
var next = jQuery('#fader ul li:first');
}
jQuery('#fader ul .active').fadeOut().removeClass('active');
next.fadeIn().addClass('active');
// work out nav width
var navBtn = jQuery('#faderNav a');
var navBtnWidth = navBtn.outerWidth(true);
var navWidth = navBtn.length * navBtnWidth;
// set nav width
jQuery('#faderNav').width(navWidth);
// add negative margin to center the nav
var negMarg = navWidth / 2;
jQuery('#faderNav').css({'margin-left':'-'+negMarg+'px'});
// start timer
var fadeTimer = setInterval("faderTimer()", slideSpeed);
jQuery('#faderNav a').live('click',function() {
clearInterval(fadeTimer);
var index = jQuery(this).index('#faderNav a');
jQuery('#faderNav a').removeClass('active');
jQuery('#faderNav a').eq(index).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
jQuery('#fader ul li').eq(index).fadeIn('slow').addClass('active');
});
});
// FADE FUNCTION
function faderTimer() {
var next = jQuery('#fader ul .active').next();
if (next.length > 0) {
} else {
var next = jQuery('#fader ul li:first');
}
var navIndex = next.index('#fader ul li');
jQuery('#faderNav a').removeClass('active');
jQuery('#faderNav a').eq(navIndex).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
next.fadeIn('slow').addClass('active');
}
A click on an anchor with href="#" will add the hashsign to the url.
Use preventDefault or return false:
jQuery(document).on('click', '#faderNav a', function(e) {
e.preventDefault();
clearInterval(fadeTimer);
var index = jQuery(this).index('#faderNav a');
jQuery('#faderNav a').removeClass('active');
.eq(index).addClass('active');
jQuery('#fader ul .active').fadeOut().removeClass('active');
jQuery('#fader ul li').eq(index).fadeIn('slow').addClass('active');
});
$(document).on("click", "a[href=#]", function(e) {
e.preventDefault();
});
http://jsfiddle.net/RhNDB/show/
Add a return false; to the end of your click handler. This will prevent the page from navigating to the href attribute's value.
All
I am using this flip tab for my project.
This is js fiddle link : http://jsfiddle.net/ajaypatel_aj/XbhUW/1/
Js code
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper('', flipid, 1);
return false;
});
});
});
I tried the below code:
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).delay(800)(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper('', flipid, 1);
return false;
});
});
});
But it didn't work for me.
What i want is auto flip this for 1000 ms.
This will work
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper('', flipid, 1);
return false;
});
});
var id = 0;
function autoFlip(){
$('#flip-navigation li a:eq('+id+')').click();
id++;
if (id > 2) id=0;
}
setInterval(autoFlip, 1000);
});
How would i stop a jquery animation from loading upon user interaction?
$('#jqNav li a').click(function(){
if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });}
else if($(this).parent().is(".nav2")) { $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
else if($(this).parent().is(".nav3")) { $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
else if($(this).parent().is(".nav4")) { $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};
$page = $(this).attr('href');
var $hashTag = $(this).attr('name');
window.location = "#" + $hashTag;
loadData();
return false;
});
this is the user click function;
function doReplay(){
$('body')
.fadeTo(0,1,function(){
$page = $welcome;
loadData();
})
.delay(1000)
.fadeTo(0,1,function(){
$page = $startup;
loadData();
})
.delay(1000)
.fadeTo(0,1,function(){
$page = $to2m;
loadData();
})
.delay(1000)
.fadeTo(0,1, function(){
$page = $to25m;
loadData();
setTimeout(function(){doReplay();},5000);
});
}
and the above is the animation function
I have tried clearTimeout but it doesn't seem to work.
var stopAnim;
$('#jqNav li a').click(function(){
...
stopAnim = true;
}
function doReplay(){
if(!stopAnim){
// do animation
}
}
You could add a boolean value that you would check in your animation method.
if (!stopAnim) { setTimeout(function(){doReplay();},5000); }