can any one optimize this code i am new to jquery .
i want add class on next and previous button click.any way i wrote this code it's working for me but if any one optimize this code using jquery predefined methods .then it will more helpful..
Thanks in advance
$(document).ready(function () {
var length = $('#slides li').size() - 1;
var curren = 0;
console.log(length);
$('.next').on('click', function () {
if (curren >= 0 && curren < length) {
curren++;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
$('.prev').on('click', function () {
if (curren >= 1) {
curren--;
$('.selected').removeClass('selected');
$('#slides li:eq(' + curren + ')').addClass('selected');
}
});
});
my html code
<ul id="slides">
<li class="selected">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>five</li>
<li>six</li>
</ul>
You should have a look at $.next and $.prev.
Your code can easily be altered into something along these lines:
$(".next").on("click", function() {
var selected = $("#slides li.selected");
var next = selected.next();
if(next.length){next.addClass("selected");selected.removeClass("selected");}
});
$(".prev").on("click", function() {
var selected = $("#slides li.selected");
var prev = selected.prev();
if(prev.length){prev.addClass("selected");selected.removeClass("selected");}
});
Example can be found here: jsbin
Related
I have a mainpage called index.html with a menu linking to certain positions (parts) on this mainpage. This is done via the variable 'data-slide' (see below) that is behind the 'buttons' in the menu. This works well on the mainpage. However, how can I do this when I'm on another html page than the mainpage, jumping to a certain position (part) of the mainpage?
<div id="nav" class="right">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">Products</li>
<li data-slide="4">Trade fairs</li>
<li data-slide="6">Company</li>
<li data-slide="8">Careers</li>
<li data-slide="10">Contact</li>
<li class="clear"></li>
</ul>
</div>
Javascript:
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
slide.waypoint(function (event, direction) {
dataslide = $(this).attr('data-slide');
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
$('.navigation li[data-slide="1"]').removeClass('active');
}
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
function goToByScroll(dataslide) {
var goal = $('.slide[data-slide="' + dataslide + '"]').offset().top;
if (mywindow.scrollTop()<goal) {
var goalPx = goal + 1;
} else {
var goalPx = goal - 1;
}
htmlbody.animate({
scrollTop: goalPx
}, 2500, 'easeInOutQuint');
}
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
window.setTimeout(function(){
if(window.location.hash){
var $target = $(window.location.hash).closest("#bgaboutbody");
if($target.length)
$('html, body').animate({scrollTop: $target.offset().top}, 1000);
}
}, 100);
Please try this link:-anchor linking to a certain position of the page
I made a slideshow in jquery but I am having a hard time to make a proper algorithm for triggers to become functional.
Any help in this regard would be highly appreciated.
Demo available here
HTML
<div class=slide-show>
<div id=slide1><h1>1</h1></div>
<div id=slide2><h1>2</h1></div>
<div id=slide3><h1>3</h1></div>
<div id=slide4><h1>4</h1></div>
</div>
<div class=slide-controls>
<div class=slide-controls-wrap>
<ul style="float:left;">
<li class=slide-cont id=1></li>
<li class=slide-cont id=2></li>
<li class=slide-cont id=3></li>
<li class=slide-cont id=4></li>
</ul>
<ul style="float:right;margin-right:50px;margin-top:2px;">
<li class=left-arrow></li>
<li class=right-arrow></li>
</ul>
</div>
</div>
JQUERY
$(document).ready(function () {
var delayInterval = 5000;
var delay = setTimeout;
function slide_show(cont) {
if (cont > 4) cont = 1;
$("#slide" + cont).fadeIn(1500);
$("#" + cont).css("background-position", '-69px -94px');
delay(function () {
$("#slide" + cont).fadeOut(1500);
$("#" + cont).css("background-position", '-19px -94px');
$('#1').click(function () {
slide_show(1);
});
$('#2').click(function () {
slide_show(2);
});
$('#3').click(function () {
slide_show(3);
});
$('#4').click(function () {
slide_show(4);
});
slide_show(cont + 1);
//$("#5").css("background-position",'-69px -94px');
}, delayInterval);
}
slide_show(1);
});
Thanks in advance.
Demo: http://codepen.io/anon/pen/azpwMy
Here is a better function for you :)
$(document).ready(function(){
$('.slide-cont').click(function(){
var slideId = $(this).attr('id');
currentSlide = slideId - 1;
$(slides).hide();
$('#slide' + slideId).fadeIn(1500);
})
})
var slides = $('.slide-show div');
currentSlide = 0;
function changeSlide(n) {
currentSlide += n;
if (currentSlide > slides.length - 1)
currentSlide = 0;
else if(currentSlide < 0)
currentSlide = slides.length -1;
$(slides).hide();
$(slides[currentSlide]).fadeIn(1500);
}
If you want to go one to the right you call with changeSlide(1), to the left changeSlide(-1)
To change the current slide based on time.
//Go one slide to the right every 2 seconds
setInterval(function(){changeSlide(1)}, 2000);
Hope i helped!
The following single page site uses a waypoint script to navigate and highlight nav items - http://www.jbleitch.co.uk/dt/
It works well - the issue is that we need to alter a link to navigate to an external website - but the script prevents default on any links - so its reasonably complicated!
this is the original script -
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
var dataslider = 1;
var clicked = false;
var windowWidth = window.innerWidth;
var narrow = (windowWidth <= 1000);
var navblock = $('.navBlock');
var dataslide = 1;
var myDirection = 'down';
var curSlide = 0;
slide.waypoint(function(direction) {
if (direction === "down") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
}, {
offset: '25%'
}).waypoint(function (direction) {
if (direction === "up") {
dataslide = $(this).attr('data-slide');
curslide = dataslide;
if (narrow) {
navScroll(dataslide);
}
links.removeClass('active');
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
}
}, {
offset: '-25%'
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
//if (dataslide === 0 && $('.slide[data-slide=2]').offset().top > 10) {
// navblock.hide();
//}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
//alert(myDirection);
//alert(dataslide + ' ' + curSlide);
var scrollto = $('.slide[data-slide="' + dataslide + '"]').offset().top
//if (dataslide > curSlide) {
// scrollto = scrollto + 1;
// //alert("down");
//}
//else if (dataslide < curSlide) {
// //alert("up");
// scrollto = scrollto - 1;
//}
htmlbody.stop().animate({
scrollTop: scrollto
}, 3200, 'swing', function () {
if (narrow) {
navScroll(dataslide);
}
else {
navblock.removeClass('nofix');
navblock.removeAttr('style');
}
curSlide = dataslide
});
//setTimeout(function () { }, 3300);
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
});
function navScroll(dataslide) {
//alert('div[data-slide="' + dataslide + '"]');
var slidepos = $('.slide[data-slide="' + dataslide + '"]').offset.top;
navblock.addClass('nofix');
//navblock.hide();
navblock.css({ top: $('.slide[data-slide="' + dataslide + '"]').offset().top });
navblock.fadeIn('slow');
//alert(navblock.attr('class'));
//alert("nav scroll");
}
this is the navigation list -
<ul class="navigation">
<li data-slide="2" class="nv1 active">Services</li>
<li data-slide="3" class="nv2">Fees & Reporting</li>
<li data-slide="4" class="nv3">News</li>
<li data-slide="5" class="nv4">Meet the Team</li>
<li data-slide="5" class="nv4"><a style="color:inherit!important; text-decoration:none" href="http:www.othersite.com">Careers</a></li>
<li data-slide="7" class="nv6">Our Credentials</li>
<li data-slide="8" class="nv7">Contact</li>
</ul>
I need to change the careers site to navigate to the url but the script above prevents it from doing so - I have tried the following alteration -
links.click(function (e) {
if(!=".nv5"){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
But no luck - can anyone suggest an alternative!?
Usually I get the info i want in a data attribute, and then i can make anything
<li data-slide="5" class="nv4">
Careers
</li>
Then, in the click handler:
links.click(function (e) {
if($(this).attr("data-ref") != ""){
//get the link
var link = $(this).attr("data-ref");
//go to link
window.location.href = link;
} else {
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
You can simply add a condition to your link method whereby it will check for an attribute or some other property and follow through with the link if required
You were on the right track with your initial attempt. This should work
links.click(function (e) {
if(!$(this).hasClass("nv5")){
e.preventDefault();
dataslider = $(this).attr('data-slide');
clicked = true;
if (narrow) {
navblock.fadeOut();
}
goToByScroll(dataslider);
}
});
That's assuming you have the class nv5 on the links you want to remove the behaviour from
I have the following code to develop my light-box where i need my prev and next buttons work accordingly.I have break down the code till this far. Any help or suggestion would be appreciated.
$(function () {
$('.thumbnail li').click(function () {
var index = $(this).index();
$('.light-box li:eq(' + index + ')').css('display', 'block');
});
});
DEMO
You can use the following:
$(function () {
var currentIndex = 0,
lightboxLis = $(".light-box li");
$('.thumbnail li').click(function () {
currentIndex = $(this).index();
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
//put next prev show here otherwise it won't work due to your hover
//when you hover the next prev button in your old version you no longer hover the li so can't click on the button
$('.next, .prev').show();
//add the hide of next prev to when you close the lightbox
});
$('.next').click(function() {
currentIndex++;
if (currentIndex == lightboxLis.length) {
currentIndex = 0;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
});
$('.prev').click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = lightboxLis.length - 1;
}
lightboxLis.hide();
lightboxLis.eq(currentIndex).show();
});
});
Example
Here's the FIDDLE.
List item that appears on clicking the up and down arrows.
When I click on it. It appears instantly which I don't want it to be like that.
I wanted to add a transition to it but I don't have any clue whether to apply it on a li or a tag.
Besides I'm here hiding and revealing li items on click. But I need the transition like when I click on the up arrow, I want the hidden element to push the active element downwards and vice versa.
Someone help me in this.
I updated your FIDDLE
you may check it out.
var
cur = 2,
$container = $('.dropdown-container'),
$ul = $('.dropdown'),
$ul_length = $('.dropdown li').children().length,
$up = $('.up'),
$down = $('.down'),
changeLi = function (cur) {
var $cur_li = $('.dropdown li:nth-child(' + cur + ')');
$('.current_selected').removeClass('current_selected');
$cur_li.addClass('current_selected');
$container
.height($cur_li.outerHeight())
.width($cur_li.outerWidth());
$up.offset({
left: ($container.outerWidth() - $up.outerWidth()) / 2
});
$down.offset({
left: ($container.outerWidth() - $down.outerWidth()) / 2
});
$ul.animate({
top: -$cur_li.position().top
}, 200);
};
$up.on('click', function () {
cur--;
if (cur < 1) {
cur = 1;
return false;
}
changeLi(cur);
});
$down.on('click', function () {
cur++;
if (cur > $ul_length) {
cur = $ul_length;
return false;
}
changeLi(cur);
});
changeLi(cur);
You can add animatation like slideUp, slideDown etc.
var cur = 2;
$('.up').click(function() {
if(cur <= 0) return;
var last = cur;
cur --;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});
$('.down').click(function() {
if(cur >= $('.dropdown li').length - 1) return;
var last = cur;
cur ++;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});