i have short question.. i got 3 content boxes and all have a menu with anchor-links to the
content-boxes below!
when i visit the site the first anchor is set ti active..
when i click now on no.2 in headline 1 it jumps to the 2nd anchor.. but the problem is i have to scroll a little bit above with the mousewheel to set the 2nd anchor as active.
and backwards too.
when i click on box3 at anchor1..
any ideas to solve the problem?
WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS
here is the demo: http://jsfiddle.net/wv9EQ/
here is the javascript code:
$(function(){
var sections = {},
_height = $(window).height(),
i = 0;
//// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().top;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollTop();
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$('a').removeClass('active');
$('.nav_' + i).addClass('active');
}
}
});
});
EDIT: i can't add active to all links! i include this small navi as php and its dynamic for all boxes!
when i set all to active than are all anchors active :D
Just do the same sort of thing when a link is clicked:
$('.head-nav-button').click(function()
{
$('a').removeClass('active');
$('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
});
http://jsfiddle.net/wv9EQ/7/
for your code use the simple way
http://jsfiddle.net/wv9EQ/4/
<li>2. SP.</li>
Remove this
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$('a').removeClass('active');
$('.nav_' + i).addClass('active');
}
}
And just add the "active" class where you need it like here http://jsfiddle.net/wv9EQ/6/
Related
I have a scrolling page with a navbar and I want the section the user is scrolling through to be highlighted in the navbar. At the moment it almost accomplishes this, but is highlighting the incorrect link.
A demonstration is at http://codepen.io/meek/pen/NNprYb?editors=1000
The code that does this is as follows:
// highlight current tab
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
var section = $(sectionLink.attr('href'));
if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
}
else {
sectionLink.parent().removeClass('active');
}
});
});
I've tried several things, but can't get it to reliably add the active class to the correct session. Help appreciated!
edit: to be clearer, the problem is that it's only highlighting the section when you've scrolled a bit into it, instead of right at the top, meaning that when you click a section to scroll to the top of that section automatically, that section is not highlighted.
edit2: So changing the if statement to:
if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) {
has made an improvement although not completely fixed the issue. The home, about and portfolio sections all highlight the correct link but not contact.
You need to account for the height of the navbar and subtract it from the top of the section you want highlighted.
The height is currently hardcoded in your CSS at 75px but I included a jQuery selector for the height in case it needs to change/disappear for smaller screens.
Nice work by the way.
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var navHeight = $('#nav-wrapper').outerHeight() + 1;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
} else {
sectionLink.parent().removeClass('active');
}
});
});
I currently have this working on each webpage, other than my 'about us' page.
Basically, I have used the variable:
<div class="spacer"></div>
<p id="startchange">
which links to the JQuery to initiate the change in colour / replacing the image with the other one. Currently neither of these attributes are changing, however on other pages they work just fine: as the sticky nav bar becomes smaller using waypoints. I am using these variables pretty early in my code (Just underneath header).
It seems no matter where I place these, they do not seem to execute, and I am not sure why.
jQuery:
<script>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#navbar').css('background-color', '#f0f0f0');
$("#navbar img").attr("src", "images/logo-grey-real.jpg");
} else {
$('#navbar').css('background-color', '#fff');
$("#navbar img").attr("src", "images/logo.jpg");
}
});
});
</script>
I made a JSFiddle :)
HTML :
<div class="navbar"></div>
<p id="test">test</p>
Jquery :
var offset = $('#test').offset().top;
var navbar = $('.navbar');
$(document).scroll(function() {
position = $(this).scrollTop();
if (position < offset)
navbar.css('background-color', 'red');
else
navbar.css('background-color', 'blue');
});
i want to create a menu for a single page website with link to div from page.
The menu look like this:
<li>Home</li>
...
<div id="home-link"></div>
I want to change color of link from menu when i am in area of home-link div. How is possible to make that thing?
Thanks for answers and for your help.
Have a nice day.
You will need JavaScript for this if the link element is not a child of #home-link.
Something like this:
$('#home-link').on('hover', function () {
$('li a').css('color', '#bada55');
});
This assumes you are using jQuery, but similar approach with other frameworks would work as well.
If I assume from the question that if you are hovering on #home-link and color of anchor should change, then
$('#home-link').hover(function () {
$('li a').css('color', 'red');
});
or if I assume that if the id is present in your page and you want to change the color of the anchor then
if($('#home-link').length){
$('li a').css('color', 'red');
}
I found myself with (what I believe is) the same question: how can I change which navigation link is highlighted to reflect the area I've scrolled to, whether I get there by using the link or just by scrolling down the page?
Here's a page with a very helpful tutorial.
The theory:
We create an array of all our nav a href’s. We then use some calculations using the scroll function. We find the section id, calculate it’s height, see if it’s greater or less than the value from the window top, and if the window falls in between, we add a class nav-active to the list item in question. We create a conditional also, because if the top of a section is not reached and the page can’t scroll anymore, we want to highlight this section.
And the relevant jQuery code:
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
if(windowPos + windowHeight == docHeight) {
if (!$("nav li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
$("nav li:last-child a").addClass("nav-active");
}
}
});
I want a nav to highlight (or something similar) once a user clicks on it AND when a user scrolls to the corresponding section.
However, on my computer when one clicks on any of the nav events after3, only nav event 3 changes. I'm guessing this is because after one clicks on 4 or 5, the scroll bar is already at the bottom of the page, so 4 and 5 never reach the top. The only div at the top is post 3, so my code highlights nav event 3 and ignores the click.
Is there any way I can fix this? Ive tried if statements (only highlight nav event if it's at the top AND the scrollbar isn't at the bottom or the top isn't the last item).
Here is a more accurate fiddle, using a fix below showing what I am talking about. The fix now highlights on scroll, but if you click option 5, it will not highlight.
$('.option').children('a').click(function() {
$('.option').css('background-color', '#CCCCCC;');
$(this).css('background-color', 'red');
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$(window).scrollTop(postLocation);
});
$(window).scroll(function() {
var scrollBar = $(this).scrollTop();
var allPosts = [];
var post = $('.content').offset();
var lastPost = allPosts.legnth-1
var windowHeight = $(window).height();
var bottomScroll = windowHeight-scrollBar;
$(".content").each(function(){
allPosts.push($(this).attr('id'));
});
i = 0;
for(i in allPosts){
var currentPost = "#"+allPosts[i];
var postPosition = $(currentPost).offset().top;
if (scrollBar >= postPosition){
$('.option').css('background-color', '#CCCCCC');
$('#nav'+allPosts[i]).css('background-color', 'red');
};
};
});
I think you've overdone your scroll() handler, to keep it simple you just needs to check if the scrollbar/scrollTop reaches the '.contents' offset top value but should not be greater than its offset().top plus its height().
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
$(".content").each(function (index) {
var elTop = $(this).offset().top;
var elHeight = $(this).height();
if (scrollBar >= elTop - 5 && scrollBar < elTop + elHeight) {
/* $(this) '.content' is the active on the vewport,
get its index to target the corresponding navigation '.option',
like this - $('.Nav li').eq(index)
*/
}
});
});
And you actually don't need to set $(window).scrollTop(postLocation); because of the default <a> tag anchoring on click, you can omit that one and it will work fine. However if you are looking to animate you need first to prevent this default behavior:
$('.option').children('a').click(function (e) {
e.preventDefault();
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$('html, body').animate({scrollTop:postLocation},'slow');
});
See the demo.
What you are trying to implement from scratch, although commendable, has already been done by the nice folks at Bootstrap. It is called a Scrollspy and all you need to do to implement it is include Bootstrap js and css (you also need jquery but you already have that) and make some minor changes to your html.
Scrollspy implementation steps.
And here is a demonstration. Notice only one line of js. :D
$('body').scrollspy({ target: '.navbar-example' });
I've made a slide-show with 'li' tags and jquery.
The whole 'ul' moves to the left or right respective to the Next/Prev buttons and has a width equal to the total width of all the slides put together, i.e. 700px each. And only 1 slide is allowed to show in the viewport of width equal to 700px. But when I click next the show goes on even though there's no more slides.
The solution is to hide the Next button when the last slide shows up in the viewport. How do I do that?
Or maybe another solution is welcome...
This is my simplified code:
var slideList = $('#slideWindow ul')
$('#next').click(function(e){
slideList.animate({ 'left': '-=700px' });
if( $('li:last').next() === 0 ){
$(this).hide();
} else {
$(this).show();
}
return false;
});
If there is a particular class classBeingViewed applied to li that is being viewed at the moment, you can just do:
if($('li').last() == $('li.classBeingViewed')){
$(this).hide();
else {
$(this).show();
}
Or you can keep track of the index. This is preferable since it allows animations in both directions.
var slideList = $('#slideWindow ul');
var listIndex = 0;
var numLiElements = $('li').length;
$('#next').click(function(e){
slideList.animate({ 'left': '-=700px' });
if( listIndex == numLiElements ){
$(this).hide();
} else {
listIndex += 1;
$(this).show();
}
return false;
});
Then, you can decrement listIndex in a click handler to $('#previous') when you want to reverse the animation.