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
Related
I a doing a webpage with a template but when i do scroll i receive a url with #[object%20Object].
When I press the li element, the page scrolls to the services section as expected however, the url is appended with /#[object Object] instead of /inscripcion.
This is code in index.html:
<ul class="nav">
<li class="scroll-to-section">Inscripciones</li>
<li class="scroll-to-section">Recorridos</li>
<li class="scroll-to-section">Reglamento</li>
<li class="scroll-to-section">Contacto</li>
<li class="scroll-to-section"></li>
</ul>
<!-- ***** Code to scroll ***** -->
<section class="section" id="inscripcion">
And this is code un custom.js:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('.scroll-to-section a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
var target = $(this.hash);
console.log(target);
$('html, body').stop().animate({
scrollTop: (target.offset().top) + 1
}, 500, 'swing', function () {
window.location.hash = target;
console.log(window.location.hash);
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.nav ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
I've got a fixed top navigation and im trying to get the links to change to active when scrolling down the page. Currently i've got it working to a point where if you click it will add an active class and go to the correct position. When you scroll up or down it should change to the previous/next section in the nav which i cant get working. any ideas?
Thanks
html:
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="img/nav-logo.png" id="company-logo-large">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="mainmenu">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
</ul>
</div>
</div>
</nav>
section where nav scrolls to:
<section id="about"></section>
<section id="services"></section>
<section id="team"></section>
javascript:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#mainNav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#mainNav li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
Any help would be appreciated.
I think already answered this. check Highlight active menu item on scroll
and this jsfiddle:
// JavaScript Document
// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function(){
$('body').css('display', 'none');
$('body').fadeIn(500);
// An offset to push the content down from the top
var listElement = $('#primary-navwrapper li');
var offset = $('#header').outerHeight();
listElement.find('a[href^="#"]').click(function(event) {
// Prevent from default action to intitiate
event.preventDefault();
// The id of the section we want to go to.
var anchorId = $(this).attr("href");
// Our scroll target : the top position of the
// section that has the id referenced by our href.
if (anchorId.length > 1 && $(anchorId).length > 0)
{
var target = $(anchorId).offset().top - offset;
}
else
{
var target = 0;
}
//console.log(target);
$('html, body').animate({ scrollTop: target }, 500, function () {
//window.location.hash = '!' + id;
window.location.hash = anchorId;
});
setActiveListElements();
});
// Update current item class
function setActiveListElements(event){
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var currentLink = $(this);
if ($(currentLink.attr("href")).length > 0)
{
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= windowPos && (refElement.position().top + refElement.height() + $("#primary-navwrapper").height() ) > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
currentLink.addClass("current");
}
else{
currentLink.removeClass("current");
}
}
});
}
// Update menu item on scroll
$(window).scroll(function() {
// Call function
setActiveListElements();
});
$('.backtotop').click(function () {
$('html, body').animate({ scrollTop: 0}, 1250);
return false;
});
});
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
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