Can anybody help me to optimize this javascript code?
I see repeat. May I avoid this repeat?
Thanks!
var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();
$('.billboard li').on('click', function(){
clearInterval(billboardTimer);
$('.billboard li').removeClass('active');
$(this).addClass('active');
$('.billboard .img-large').removeClass('current').removeAttr('style');
$('.billboard .img-large').eq($(this).index()).animate({'opacity': 1}).show();
});
$('.billboard li:first').click();
billboardTimer = setInterval(billboardNext, 2000);
function billboardNext(){
billboardCurrent++;
if (billboardCurrent == billboardSize) {billboardCurrent = 0;}
$('.billboard .img-large').removeClass('current').removeAttr('style');
$('.billboard .img-large').eq(billboardCurrent).animate({'opacity': 1}).show();
$('.billboard li').removeClass('active');
$('.billboard li').eq(billboardCurrent).addClass('active');
}
Link jsfiddle.net
Perhaps something like this?
var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();
$('.billboard li').on('click', function(){
clearInterval(billboardTimer);
setActive($(this).index());
});
$('.billboard li:first').click();
billboardTimer = setInterval(function() {
setActive(billboardCurrent = (billboardCurrent + 1) % billboardSize);
}, 2000)
function setActive(index) {
$('.billboard .current').animate({'opacity': 0}).removeClass('current');;
$('.billboard .img-large').eq(index).animate({ 'opacity': 1}).addClass('current');
$('.billboard li').removeClass('active').eq(index).addClass('active');
}
http://jsfiddle.net/9dxcc/2/
Related
I don't know anything about javascript. I just found this snippet in the web when I was trying to find a solution on how to achieve what I need. Is there any way to simplify this since I will be adding around 40 elements that I need to show and hide.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
if (vals.join('') === "a1b2c3") {
$(".box_wrapper").not(".a1b2c3").hide();
$(".a1b2c3").show();
$('html,body').animate({
scrollTop: $(".a1b2c3").offset().top},
'slow');
}
else if (vals.join('') === "d4e5f6") {
$(".box_wrapper").not(".d4e5f6").hide();
$(".d4e5f6").show();
$('html,body').animate({
scrollTop: $(".d4e5f6").offset().top},
'slow');
}
else{
$(".vid_box").hide();
}
}
I think I can simplify this further by getting the joined value from the select boxes and use it on the function above and since I am using the same value combination for the class. I just don't know how. Is that possible? Thanks in advance guys!
Perhaps something like this (air code):
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var values = [ "a1b2c3", "d4e5f6" ];
var vj = vals.join('');
if (values.indexOf(vj) !== -1) {
$(".box_wrapper").not("." + vj).hide();
$("." + vj)).show();
$('html,body').animate({
scrollTop: $("." + vj)).offset().top
}, 'slow');
}
else {
$(".vid_box").hide();
}
}
I would suggest something like this.
var $selects = $('.filters select');
$selects.on('change', function() {
var value = $selects.map(function() {
return this.value;
}).get();
$(".box_wrapper").not("." + value).hide();
$(".box_wrapper." + value).show();
$('html, body').animate({
scrollTop: $("." + value).offset().top},
'slow');
});
$selects.first().trigger("change");
Here is my final code. Thanks #MJH for all the help.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var vwarp = vals.join('');
if (vwarp == vwarp) {
$(".box_wrapper").not("." + vwarp).hide();
$("." + vwarp).show();
$('html,body').animate({
scrollTop: $("." + vwarp).offset().top},
'slow');
}
else{
$(".box_wrapper").hide();
}
}
Hope this helps!
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;
}
}
});
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");
<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>
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);
});