The complete code is copied and pasted below. I am new to javascript and jquery and am not sure why the following is happening:
Suppose I am at URL http://someurlhere/#1 in browser Google Chrome.
If I go to the address bar delete just the number 1 in the above URL, type 2 and press enter, the page does not navigate to section with id=2. Now, if I go the address bar again and just press enter, it will navigate to section with id=2. Why does it not navigate the first time I pressed enter?
I have been searching and I thought this probably has something to do with hashchange event. I added the last few lines in the script. Whenever I change the id number I do get a message in console, but the above described behavior remains unchanged. Can someone explain why pressing enter does not work the first time, but does work the second time and how can I fix that? Thank you.
The code:
<html>
<head>
<title>Selecting multiple DIV tags with jquery</title>
<script type="text/javascript" src="./jquery.js">
</script>
<style type="text/css">
html{
overflow: hidden;
}
.slide {
display: block;
position: absolute;
border-style: solid;
border-width: 1px;
top: 0px;
left: 0px;
padding:20px;
height: 95%;
width: 100%;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/>
<section class="slide">This is the first div.</section>
<br/><br/><br/><br/><br/><br/>
<section class="slide">
This is the second div.
</section>
<br/><br/><br/><br/><br/><br/>
<section class="slide">This is the third div.</section>
<br/><br/><br/><br/><br/><br/>
<section class="slide">This is the fourth div.</section>
<br/><br/><br/><br/><br/><br/>
<section class="slide">This is the fifth div.</section>
<br/><br/><br/><br/><br/><br/>
<section class="slide">This is the sixth div.</section>
<script type="text/javascript">
// Assign ids to each section in the order they appear.
$("section").each(function(index){
$(this).attr('id', index+1);
$(this).append('<button onClick="nextdiv();">Some div</button>');
$(this).css('opacity', 0);
});
// Check if the current url points to a specific id. If not point
// it to id = 1, otherwise point it to the id specified in the URL.
var currenturl = $(location).attr('href');
var indexhash = currenturl.lastIndexOf('#')
if (indexhash === -1){
var newurl = currenturl + '#1';
$("#1").css('opacity',1);
window.location.href = newurl;
}
else {
var currentid = currenturl.substring(indexhash, currenturl.length);
console.log(currentid);
$(currentid).css('opacity', 1);
window.location.href = currenturl;
// window.location.assign(currenturl);
}
var newurlid = function(){
var currenturl = $(location).attr('href');
var indexhash = currenturl.lastIndexOf('#');
var currentid = currenturl.substring(indexhash+1, currenturl.length);
var newid = parseInt(currentid, 10) + 1;
var newurl = currenturl.substring(0,indexhash+1) + newid;
return {'newurl': newurl, 'newid': newid}
};
nextdiv = function(){
console.log(newurlid().newurl);
var newid = parseInt(newurlid().newid);
console.log(newid);
var selectid = '#' + newid;
$("section").each(function(index){
$(this).css('opacity', 0);
});
$(selectid).css('opacity', 1);
window.location.href = newurlid().newurl;
};
$(window).bind('hashchange', function() {
var currenturl = $(location).attr('href');
console.log(currenturl);
window.location.href = currenturl;
});
</script>
</body>
</html>
ID’s cannot be numbers, they need to start with characters. Try something like tab1, tab2, tab3.
As for the hash change, you are very close. What you’re doing at the moment is parsing the hash on a page refresh. You also have a hash change event binded, but it doesn’t do anything at the moment. You need to move most of your hash parsing code into a function like this:
And call it out on the hashchange event and when the DOM is ready, so basically