Develop Reference

How to open a hidden div from url with #anchor

I have a page that has a grid of staff bios, when the bios are clicked additional information is displayed in a modal. I would like to be able to display the content of specific staff when linked from another page. I would like to use plain javascript and add a #anchor in the url.
When I was building this set up I seemed to have stumbled apon this on accident, but now it won't work. The closest I have gotten is from this post: How to open a hidden div when a hash is on the URL?
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
document.getElementById(hash).classList.add("bio-open");
}
Here is my markup:
<div class="bio-tile">
<div id="close" class="anchor"></div>
<div class="tile-inner" onclick="speakerDetails('open')">
//Thumbnail content here
</div>
</div>
<div id="open" class="speaker-details">
<div class="speaker-details-wrapper">
<span onclick="speakerDetailsClose('open')" class="speaker-close">×</span>
//details content here
</div>
</div>
Here are the scripts on the page:
/* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
document.body.classList.add("allow-overflow");
document.documentElement.classList.add("allow-overflow");
});
var speaker;
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
document.getElementById(hash).classList.add("bio-open");
}
/* To open Speaker Bio Pop Up and prevent body/html scroll*/
function speakerDetails(slug) {
speaker = document.getElementById(slug);
speaker.classList.add("bio-open");
document.body.classList.add("no-overflow");
document.documentElement.classList.add("no-overflow");
document.documentElement.classList.remove("allow-overflow");
}
/*To Close Speaker Bio Pop Up When X close button is clicked and allow body/html scroll*/
function speakerDetailsClose(slug) {
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
/*To Close Staff Bio Pop Up when clicked outside of the bio container and allow body/html scroll*/
window.onclick = function(event) {
if(event.target == speaker) {
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
}
I would like to have the page load using a www.site.com/page#open url, to display one of the bio details divs on load and then be able to close it to access the other bios on the page.

You're close. Basically when you are selecting things in the DOM you need to know the elements are there. What's happening is that the code inside of your if statement around the hash is getting executed before the DOM is loaded so the element doesn't existing and is returning null.
Here is what I did to work around that; just move your the hash var and the if statement into your DOMContentLoaded event listener.
document.addEventListener('DOMContentLoaded', function(event) {
//the DOMContentLoaded event occurred, which means the DOM is done loading.
/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
if (hash) {
// you don't have to do this extra save to a var, but it's clearer
var elem = document.getElementById(hash);
elem.classList.add("bio-open");
}
});

I have figured it out! Thought I would share for the rest of the SO world and thanks to bgaynor78 for getting me headed towards the right idea.
I used document.addEventListener('DOMContentLoaded', function(event) { twice, which I am not sure if that is totally best practice.
var speaker;
var hash = window.location.hash.replace('#', '');
var tag;
/* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
document.body.classList.add("allow-overflow");
document.documentElement.classList.add("allow-overflow");
});
/*To open the details window when the ID # is used in the url*/
window.addEventListener('DOMContentLoaded', (event) => {
if (hash) {
tag = document.getElementById(hash);
tag.classList.add("bio-open");
document.body.classList.add("no-overflow");
document.documentElement.classList.add("no-overflow");
document.documentElement.classList.remove("allow-overflow");
}
});
I then added some IF statements to reference in the scripts to close the window:
function speakerDetailsClose(slug) {
if (hash) {
tag.classList.remove("bio-open");
speaker.classList.remove("bio-open");
document.body.classList.remove("no-overflow");
document.documentElement.classList.remove("no-overflow");
document.documentElement.classList.add("allow-overflow");
}
else {
// the rest of the script

Is it possible to disable only the anchor scroll

I actually have a list of item, that open each a diffrent menu, thanks to an href (the #mat for example display a menu)
<div class ="row d-none d-lg-block classer no-gutters ">
<h4>Order by
<a class = "navigation" href="#mat" id="navMat" >localisation</a> /
<a class = "navigation" href="#new" id="navNew" >new</a>
and this jquery, to underline the current active item (ex : localisation)
jQuery( document ).ready(function() {
jQuery('.navigation').on('click', function(e){
jQuery('.navigation').removeClass('navigationU');
this.className = 'navigationU navigation';
})
});
The problem is that i would like this href to underline the current active item, to open the menu, but it scrolls to it and i don't want it.
I already tried e.preventDefault(); but i disable everything : the scroll, but also the underline and the display of the menu.
Do you have any idea ?
Thanks

Try this:
$(document).on('click', '[href^="#"]', function(e) {
location.hash = e.target.hash;
e.preventDefault();
});
it will disable all links that start with # and recreated updating the hash in address bar.

How to store active class of a div when page reloads using local storage

I am not able to save active class for a div on page reload, when I click button in first div then its active class is removed and next class is made active. But when the page reloads in second div, how to save active class for second div when page is reloaded . i tried using local storage but i dunno that.
<div class="divs active" id="first">
<h1> first div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-first">Next - 2</a>
</div>
<div class="divs" id="second">
<h1> second div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-second"/>Next -3 </a>
</div>
<div class="divs" id="third">
<h1> third div</h1>
<a class="btn-link" href="javascript:void(0);" id="btn-third"/>Next -1</a>
</div>
<script>
$(document).ready(function(){
$('#btn-first').click(function(){
$('.divs').removeClass('active');
var activeID = $('#second').addClass('active');
console.log(activeID);
localStorage.setItem("activeDIV", activeID);
//var reloadactiveDIV = localStorage.getItem("activeDIV");
// var activeID = $('#second');
// localStorage.setItem('activeTab', $activeID );
// var activeTab = localStorage.getItem('activeTab');
// if (activeTab) {
// $('.divs').removeClass('active');
// $('#second').addClass('active');
// }
});
$('#btn-second').click(function(){
$('.divs').removeClass('active');
$('#third').addClass('active');
});
$('#btn-third').click(function(){
$('.divs').removeClass('active');
$('#first').addClass('active');
});
});
</script>

To achieve this you can store the index of the active div in local storage, instead of the entire jQuery object, and then re-set the active class on the element within the index of localStorage when the page is next loaded.
Also note that you can DRY up the logic by using a single event handler for all the buttons. You can find the parent .divs and retrieve the next one, looping back to the first if there is no next sibling. Try this:
$(document).ready(function() {
// set active on click:
$('.btn-link').click(function(e) {
e.preventDefault();
var $parentDiv = $(this).closest('div');
var $nextDiv = $parentDiv.next('div');
var $divs = $('.divs').removeClass('active');
if (!$nextDiv.length)
$nextDiv = $divs.first();
$nextDiv.addClass('active');
localStorage.setItem("activeDiv", $nextDiv.index('.divs'));
});
// set active on load:
var activeIndex = localStorage.getItem("activeDiv");
if (activeIndex)
$('.divs').removeClass('active').eq(activeIndex).addClass('active')
});
Working Example
Note that I couldn't place a working example in a SO Snippet as it has restrictions in place on accessing localStorage.

With click, navigate to another page and open a div hidden by javascript

I have two pages. Lets call the first page index.html and the second page products.html.
On products.html I have a div that is hidden unless the user clicks a button to reveal it, as shown below:
products.html
$(document).ready(function() {
$('.product-highlight').hide();
$('a[href$=shoes').click(function() {
$('#shoes').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<img src="http://placehold.it/100x100"/>
Show Shoes
</div>
<div class="product-highlight" id="shoes">
<p>These are the shoes</p>
</div>
Now on my index.html I have a link that should directly lead to the shoes tab and have it revealed.
So far all I know how to do is:
index.html
$(document).ready(function() {
$('a[href$=shoes]').click(function() {
window.location.href= 'http://sample.com/products.php/';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take me to the shoes

You can make use of :target pseudo-class. For this define next CSS rules:
#shoes {
display: none; /* hide by default */
}
#shoes:target, /* and show either if class show is present (on click) */
#shoes.show { /* or location hash matches id "shoes" */
display: block;
}
and in JS you would add class show:
$(document).ready(function() {
$('.product-highlight').hide();
$('a[href$=shoes').click(function() {
$('#shoes').addClass('show');
});
});
When redirecting from index page you would also need to set a hash #shoes:
$(document).ready(function() {
$('a[href$=shoes]').click(function() {
window.location.href= 'http://sample.com/products.php/#shoes';
});
});

jQuery's .click() without any arguments, fires the click event on that element, so in the very simplest of solutions, if the user's coming to the products page by clicking the shoes link, add a query string to the end (/products.php/?q=shoes)
and then in the javascript in the product page, if it sees that there's a product needed, it can auto trigger the click event on whatever element on that page you're supposed to click on to make it show up.
This question has an example of how to pull parameters out of a URL with jQuery.
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}

Read about Location hash
At your link in index.html
Take me to the shoes
And in your products.html script :
$(document).ready(function() {
$('.product-highlight').hide();
$('a[href$=shoes]').click(function() {
$('#shoes').show();
});
if ( location.hash != 0 && location.hash == '#shoes' ){
$('a[href$=shoes]').trigger('click');
}
});
When you have a location.hash target to an element called #shoes in your products.html, the script will trigger the event button 'click' to reveal your awesome shoes.

One strategy:
Have index.html link to http://sample.com/products.php#shoes (a plain old <a href="/products.php#shoes"> will do, no need for a jQuery click event here.)
Have products.php check document.location.hash for '#shoes' and trigger $('#shoes').show() if present.

Add one line of code as indicated below:
$(document).ready(function() {
$('.product-highlight').hide();
$('a[href$=shoes').click(function() {
$('#shoes').show();
});
// add this line...
$(window.location.hash).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<img src="http://placehold.it/100x100"/>
Show Shoes
</div>
<div class="product-highlight" id="shoes">
<p>These are the shoes</p>
</div>
Go to http://codepen.io/palermo4/pen/KpoGdY to test

jquery scrollintoview with bootstrap scrollspy

Hello fellow stackoverflow members who use bootstrap! I appreciate your time and input. I am having trouble implementing a jQuery.scrollintoview with bootstrap scrollspy.
http://jsfiddle.net/aKK2k/1/
Above is fiddle, scrollspy is broken but the scrollintoview should still work, or am i mistaken?
Nav buttons that move the page:
<li>
<a href="#section-2" id="a-section-2">
Products
</a>
</li>
Below is the scroll-to-section
<h3 class="center" id="section-2">
So, how can Day & Night help your business today?
</h3>
Below is the JS that handles the page scrolling / hiding url / etc.
The implementation happens at
$($(this).attr('href'))[0].scrollIntoView(250, "easeOutExpo");
The whole JS
<script>
$("document").ready(function() {
$(document).on('click','.navbar li a',function(event) {
event.preventDefault();
if($.trim($(this).html())!='FAQ'){
//if($.trim($(this).html())!='FAQ' || $.trim($(this).html())!='FAQ2'){
var offset = $('#myNavbar').height()+30;
if ($(window).width() <= 768) {
var offset = 100;
}
$($(this).attr('href'))[0].scrollIntoView(250, "easeOutExpo");
scrollBy(0, -offset);
}
else
{
window.location.href = $(this).attr('href');
}
});
//document.referrer returns the url from which this page has been entered,
//we will use this to check if we are redirected from FAQs page
var previous_url = document.referrer;
if(previous_url=='http://dnwebdev.com/dev/faq/'){
//if we were redirected from FAQ page, we would have a #section-value in our url
//hash here fetched that value
var hash = document.URL.substr(document.URL.indexOf('#')+1);
//this is the important part, we are gonna trigger that the
//#section-value passed in url is _clicked_. And so the browser will
//scroll down to that section
$('.navbar li a#a-'+hash).trigger('click');
//once it scrolls down, this deletes the #section-value from url
history.pushState('', document.title, window.location.pathname);
}
});
function close_toggle() {
$('.nav a').on('click', function () {
if ($(".navbar-toggle").css("display") != "none") {
$(".navbar-toggle").click();
} else {
$('.nav a').off('click');
}
});
}
close_toggle();
$(window).resize(close_toggle);
</script>
Currently the page jumps when an "easeOutExpo" is what we are going for.
I am very new to JS, any input is appreciated.
The website is http://dnwebdev.com/
I added jqueryUI, declared jquery before ui, but the scroll still won't work.
Robert

You are invoking scrollIntoView on the raw DOM element, when you want to invoke it on the jquery matched set. Remove the [0] and try this:
$($(this).attr('href')).scrollIntoView(250, "easeOutExpo");
fiddle: http://jsfiddle.net/aKK2k/7/
(i've also added the jquery stuff to your fiddle).