I am completely new to Javascript and have been having trouble following the answers in this thread: Change navigation active class on window scroll
I edited the jsFiddle example with the classes of my navigation bar, and got that to work, but when I try to bring the script over to my actual website, it doesn't work anymore. Perhaps it has something to do with the "currLink" variable? I see that in the example they used the class "active" on the link, but in my site, which is based on Bootstrap, the active class is added to the list item tag.
Regardless, I have been unable to get it working, I was wondering if I'm overlooking something obvious.
Here is the HTML for my navbar:
<div id="navigation-bar" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">home</li>
<li>philosophy</li>
<li>yoga works</li>
<li>start your journey</li>
<li>careers</li>
<li>contact</li>
</ul>
</div>
And the Javascript I'm attempting to use:
<script type='text/javascript'>/
$(window).load(function(){
$(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,
wrap = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#navigation-bar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
});
</script>
Obviously I need to learn Javascript so I can troubleshoot basic things like this on my own, but in the meantime, I need to finish this project. Thanks a bunch!
Related
I have a simple menu and when i click the "li" items the page automatically scrolls to that section. What I want to do is close my "dropMenu-nav" after scrolling finishes. I searched asked questions but I couldn't make it work. Here is my HTML :
<div class="dropMenu-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
And my JS code :
$(document).ready(function(){
let scrollNav = $('.scroll');
scrollNav.click(function(e){
e.preventDefault();
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
*$('.dropMenu-nav').animate({
opacity: 0;
}, 2000);*
});
$(window).scroll(function() {
let scrollBarLocation = $(this).scrollTop();
scrollLink.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollBarLocation){
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
});
})
});
Scrolling part works perfectly but i cant find a way to hide my menu after scrolling. I don't see any error on my console also and I don't know where I am doing wrong to be honest. I would appreciate any help, thanks in advance for all your help.
The trick is to do the menu collapsing logic in the complete callback of jQuery.animate:
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, {
duration: 1000,
complete: function() {
document.body.classList.remove('nav-is-open');
}
});
If you want to close the menu after scroll then you will want to evaluate that code after the scroll completes. See the complete parameter in the jQuery.animate docs.
$('html,body').animate({
scrollTop: scrollTop: $(this.hash).offset().top
}, 1000, function () {
$('body').removeClass('nav-is-open')
})
So this mostly works, however, the only URL that works is what is specified as "Blog." All the anchor references with # are smooth scrolling on click but all my external links on my page aren't doing anything.
Can I write the prevent default in a way that only includes the href links with "#" in them? I have image links, etc throughout my page and want a simple method to manage it rather than pointing each url out.
<ul class="snip1143">
<li class>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog </li
<li>Contact</li>
<script>
$(document).on('click', 'a', function(event) {
if($(this).data('hover') !== "Blog"){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
</script>
var doc = document;
var myList = doc.getElementsByClassName("snip1143")[0];
var myListItems = myList.children;
var isHash = false;
var href;
for (var i = 0; i < myListItems.length; i++) {
href = myListItems[i].firstChild.getAttribute('href');
isHash = href.includes("#");
if(!isHash){
myListItems[i].firstChild.addEventListener('click', function(evt) {
event.preventDefault();
});
myListItems[i].classList.add("strike");
}
}
.strike{
text-decoration: line-through;
}
<ul class="snip1143">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog </li>
<li>Contact</li>
</ul>
Coded directly on SO, I hope I got it right:
$(document).on('click', 'a', function(e) {
if ($(this).attr('href').indexOf('#') !== -1)
e.preventDefault();
};
I have a jQuery code obtained from w3schools.com which ON CLICK (clicking an ) changes URL's #id and also allows smooth scrolling to a particular DIV section. But its not working on scroll. I want the same with an scrolling effect. When I scroll down or up to a particular section the URL's #id should change.
Current jQuery Code:
$(document).ready(function(){
$("#navlist a").on('click', function(event) {
if(this.hash !== ""){
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
I searched on stackoverflow and I got something like this:
$(document).bind('scroll',function(e){
$('div').each(function(){
if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
window.location.hash = $(this).attr('id');
}
});
});
This seems to work but when I place both the code either one of them is stopping the other one from executing. I thought of combining both the codes into one to achieve both onclick and scroll effect but I am not being able to do so (weak hands on jquery yet).
Example URL with ID: http://localhost/sites/fh/index.php#first
Please help me devs.
Instead of setting the location hash, you should change the history state. That way you will avoid forced page scrolling by browser. Check it below:
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if( placement.top<window.innerHeight && placement.bottom>0 ) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
nav a {
display: block;
}
section {
height: 600px;
border-top: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navlist">
Go to Section 1
Go to Section 2
Go to Section 3
</nav>
<section id="s1">Section 1 Content</section>
<section id="s2">Section 2 Content</section>
<section id="s3">Section 3 Content</section>
Also on JSFiddle.
Please note, if you are using Foundation framework, than you already have Magellan.
For Bootstrap it is called ScrollSpy.
I have a auto scroll function, there is a static arrow which lets the user scroll to the next section of the page. When the user reaches the "contact" section (the last page), I would like the arrow to hide as there is no other page to scroll down to.
Update -
Currently the navigation arrow dissapears on the last page but it also dissapears on the about and intro sections too.. How can i fix
Jquery - Updated v3
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
function nextSection()
{
var scrollPos = $(document).scrollTop();
$('#section-navigator a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top > scrollPos) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
location.hash = "";
location.hash = currLink.attr("href");
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
return false;
}
});
}
HTML
<div class="page-scroll">
<img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" />
</div>
Thanks!
By the looks of things you use the links as the id for the next selector so you should be using #contact in your if.
Also, you have closed the if bracket ) in the wrong place
if ($anchor.attr('href') == "#contact") {
}
If you want to compare it to the target divs id, then you need to do something like this:
if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
}
But this would seem like extra processing to get the same result
Update
Given all your edits - none of them really helpful as they don't create an MCVE - and we seem to be moving further and further away from the original question. I would do the following:
Get rid of that jquery onclick binding function at the top of your jQuery as you are manually binding in the html, the change your next section function to:
function nextSection() {
var currentPos = $(document).scrollTop();
$('#section-navigator a').each(function() {
var currLinkHash = $(this).attr("href");
var refElement = $(currLinkHash);
if (refElement.offset().top > scrollPos) { // change this to offset
$('html, body').stop().animate({
scrollTop: refElement.offset().top // just use refElement
}, 1500, 'easeInOutExpo');
location.hash = "";
location.hash = currLinkHash;
if (refElement.attr('id') == "contact") { // hide the scroller if the id is contact
$("div.page-scroll").hide();
}
return false;
}
});
}
I have a one page design and want to have an auto scroll effect when a nav link is clicked. Not sure why the scrolling effect is not working. I added the alert function to see if $(sectionID).offset().top is returning a value and it is. So if someone can explain the problem it would be greatly appreciated.
jsfiddle: https://jsfiddle.net/8t881403/
html:
<div class="sub-nav">
<nav>
<ul>
<li>Mission</li>
<li>Why CS</li>
<li>Learning Experience</li>
<li>Spartan Success</li>
</ul>
</nav>
</div>
jquery:
$(function() {
autoScroll();
});
function autoScroll() {
$('.sub-nav a').click(function (e) {
e.preventDefault();
var sectionID = $(this).attr('href');
alert($(sectionID).offset().top);
$('html body').animate({ scrollTop: $(sectionID).offset().top
}, 1000)
})
}
var div = $('.sub-nav');
setInterval(function(){
var pos = div.scrollTop();
div.scrollTop(pos + 2);
}, 200)