JavaScript put variably into url, then use it if reloaded

Question

We're working on a music page to list albums, songs and add lyrics.

We have a "View More" below each album, clicking that shows you the song list (using jquery, making a hidden div slide down). We'd like to add a variable to the URL if someone clicks it (or remove it if they "hide") the songs, so that it creates a permalink to that section. If someone passes that it'll automatically show that div open.

So a link should look something like this http://www.greendayauthority.com/music/catalog.php#album=1039 or http://www.greendayauthority.com/music.catalog.php?album=1039

(Could someone help me figure out the better way to use this? Between the "#" and "?"

We want to do the same thing for lyrics of individual songs. If someone clicks a song title, it adds another variable to the URL with the song ID.

So if someone clicks a song title it'll then be http://www.greendayauthority.com/music/catalog.php?album=1039&song=3

We can handle all the code to make all the stuff appear on the page, but I don't know how to add a variable onto the page with javascript, so that if someone wants to link the lyrics to a specific song, they can share that link and when they visit, the proper divs will be shown.

Can someone help point me in the right direction? Any tips on a better way to do this are also welcome.

Thanks!

Answer 1

If you delimit it with a ?, it's a query string, the normal way to put variables onto a page. If you do it with #, it's the hash, and it refers to navigation within a page.

If you use the # you can navigate without refreshing the page. If you add an item to the query string from Javascript (location.href = blah?album=1039), the page will get reloaded. I don't think that's what you want.

In any case, when you click the link to expose the hidden div, don't change location.href. Just make your anchor tag navigate within the page, as in <a href="#album1039"></a>

Answer 2

Here's my try at it:

Required code:

var HashSearch = new function () {
   var params;

   this.set = function (key, value) {
      params[key] = value;
      this.push();
   };

   this.get = function (key, value) {
       return params[key];
   };

   this.keyExists = function (key) {
       return params.hasOwnProperty(key);
   };

   this.push= function () {
       var hashBuilder = [], key, value;

       for(key in params) if (params.hasOwnProperty(key)) {
           key = encodeURIComponent(key), value = encodeURIComponent(params[key]);
           hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
       }

       window.location.hash = hashBuilder.join("&");
   };

   (this.load = function (paramString) {
       params = {}
       var hashStr = paramString || window.location.hash, hashArray, keyVal
       hashStr = hashStr.substring(1);

       if (hashStr === "") return;

       hashArray = hashStr.split('&');

       for(var i = 0; i < hashArray.length; i++) {
           keyVal = hashArray[i].split('=');
           params[decodeURIComponent(keyVal[0])] = (typeof keyVal[1] != "undefined") ? decodeURIComponent(keyVal[1]) : keyVal[1];
       }
   })();
};

Init code:

$(function () {
    showDiv();

    $(".view-more-hash").live('click', function () {
       HashSearch.load(this.hash);
       showDiv();
    });
});

function showDiv() {
    if (HashSearch.keyExists('album')) {
        var albumDiv = $("#album" + HashSearch.get('album')).show();

        if (HashSearch.keyExists('song')) {
           albumDiv.find("#album" + HashSearch.get('album') + "song" + HashSearch.get('song')).show()
        }
    }
}

Your links will look like:

<a href="#album=2">View album</a>
<a href="#album=2&song=3">View song</a>

Your content:

<a name="album=2"></a> // auto scroll to location.. not required
<div id="album2">
   <div id="album2song3"></div>
</div>