Changing #id in the url and pressing enter does not result in navigation to the specified id

Question

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>

Btw you can just use location.hash to get the leading #1 instead of using JQuery to get href and then finding the index of # — Wiz, Jun 26 '12 at 11:51

Peeter · Accepted Answer · 2012-06-26T12:11:07.703

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:

var hashChange = function() {

// 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;
        };

};

And call it out on the hashchange event and when the DOM is ready, so basically

 $(document).ready(hashChange);
 $(window).bind('hashchange', hashChange);

Thanks. I changed the ids to s1, s2, ... However, I still have the problem mentioned in my post. — Curious2learn, Jun 26 '12 at 11:55
Thanks, Peeter. This has solved the problem I posted above. However, it has broken the functionality of the `somediv` button. I will try to figure it out before I can accept the answer. — Curious2learn, Jun 26 '12 at 13:04
That is because nextdiv() function is no longer in the global scope, e.g. the click handler you add does not have access to it. Move the nextdiv function declaration outside of the hashChange function (and leak it to the global namespace) will fix this. Read up on: http://api.jquery.com/bind/ (better way to bind events) http://stackoverflow.com/questions/9773964/understanding-the-javascript-global-namespace-and-closures (global namespace) — Peeter, Jun 26 '12 at 14:13
Yes, I figured that. Thanks! Now I have another weird thing happening. But that is a different issue, so in a new question. — Curious2learn, Jun 26 '12 at 14:34

Changing #id in the url and pressing enter does not result in navigation to the specified id

1 Answers1