We Keep Coding

Scroll to javascript

So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?

You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>

You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.

How to highlight active menu of a dropdown menu of bootstrap using jquery?

I want menu item to be highlighted when an item is selected in the drop down. I tried following code. Code is working if I prevent default behavior of a which I don't want, So I tried using local storage but it is not working, only page refreshes and default Home item of menu is highlighted.
Menu
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Fire & Water <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Storm Damage</li>
<li>Commercial Restoration</li>
</ul>
</li>
<li class="dropdown">
Mold <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Mold Remediation</li>
<li>What is Black Mold?</li>
<li>Mold "Removal" vs Remediation</li>
<li>Commercial Mold Remediation</li>
</ul>
</li>
</ul>
This is Working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(e){
e.preventDefault();
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
$("li").removeClass('active');
$('a[href="' + hrefs + '"]').parents('li').addClass('active');
});
});
This is not working
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
var hrefs = $(this).attr('href');
alert("hrefs : " + hrefs);
localStorage.setItem('activeTab', hrefs);
var activeTab = localStorage.getItem('activeTab');
$("li").removeClass('active');
alert("activeTab : " + activeTab);
$('a[href="' + activeTab + '"]').parents('li').addClass('active');
});
});

I think, you have to apply active class on page load event not in click event. your code should be something like as below
$(document).ready(function(){
// activate left navigation based on current link
var current_url = window.location;
$('.dropdown-menu li a').filter(function () {
return this.href == current_url;
}).last().parents('li').addClass('active');
});
On every page load, you have to filter out link of current page from your navigation bar and then apply class active in parent. I have posted code for your explanation purpose you have to modify as per your HTML code structure.
Hope, this will work :)

I have a navigation menu and I want that it's list items, on click, go to a specific div

sorry if this question has already been answered. I've tried searching for other answers but still couldn't solve it. I'm new to jQuery..
So, I have a navigation menu and I want that it's list items, on click, go to a specific div.
Here's my code:
HTML
<div class="overlay" id="nav-overlay">
<nav class="overlay-menu">
<ul>
<li ><a class="nav-link" href="#" data-target="intro">Home</a></li>
<li><a class="nav-link" href="#" data-target="about-section">About</a></li>
<li><a class="nav-link" href="#" data-target="hero-section-1">Projects</a></li>
<li><a class="nav-link" href="#" data-target="contact-section">Contact</a></li>
</ul>
</nav>
</div>
And Jquery:
// Scroll to div
$(document).on('click','.nav-link', function(event) {
event.preventDefault();
var target = this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
When I click on the links nothing happens, and in my console i get this error:
Uncaught TypeError: Cannot read property 'top' of undefined
Any help will be appreciated :)

you need to pre-fix the target with its selector:-
// if the target is a class
$('.' + target).offset().top
// if the target is a id
$('#' + target).offset().top

Trigger div on pageload

I have been trying to set the scroll of my page to a certain div. Kindly let me know how can i do that. Following is my code in which each each option in li moves to certain div . I tried this $("#header3").click(); in doucument.ready function but it didnot work.
Kindly help!
<ul id="navigation">
<LI><A class="home selected-lice"href="#header">Home</A></LI>
<LI>Partners</LI>
<LI><A class="about" href="#header5">About Us</A></LI>
<LI><A class="contact" href="#header6">Contact Us</A></LI>
</ul><!-- end of #navigation -->

Alternatively you can use this to scroll to specific element on page load with animation:
$(function(){
$('html, body').animate({ scrollTop: $("#header1").offset().top });
});

check this link:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
or try to overwrite the usual anchor behavior with some scrolling. Like this:
$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});

menu bar with toggling buttons

I have looked around for a solution but I can't find one.
I want to have a nav bar with 4 buttons using <li>. I need each button to have an active state when clicked without reloading the page. If the user presses a button all other buttons should be un-active and the one clicked active. One button(all) will need to be active as default when the page is loaded.
<ul id="filtering-nav">
<li><a class="work"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news" ><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>

You can do it almost the same way like when you are reloading the page.
1) Use "active" class for the active button (styled by CSS as you need)
2) On button click remove active class from other buttons and add it to the clicked button
Html:
<ul id="filtering-nav">
<li><a class="work active"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news" ><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>
Javascript:
var $buttons = $('#filtering-nav a'); //select all buttons
$buttons.click(function(e){ //on click...
$buttons.removeClass('active'); //deselect all buttons
$(this).addClass('active'); //make clicked button active
e.preventDefault(); //prevent redirection
});
Working example: Click here

<script>
$(function()
{
$('#filtering-nav a').click(function(event){
$('#filtering-nav a').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
</script>
<ul id="filtering-nav">
<li><a class="work active"><div>Work</div></a></li>
<li><a class="like"><div>Like</div></a></li>
<li><a class="news"><div>News</div></a></li>
<li><a class="all"><div>All</div></a></li>
</ul>