Jump to content
Larry Ullman's Book Forums

Chapter 9: Creating Representative Urls (Window.Location.Hash)

Recommended Posts

Hi Larry and fellow forum members,


I've so far found this forum to be extremely helpful in finding answers to most questions that arises while I'm reading the book. However, as I've just finished reading chapter 9, I'm having some difficulty in understanding the gist of the sub-section called 'Creating Representative URLs'.


So, here are my questions :


1) The following is the first script included in this section:


              var hash = window.location.hash; // Includes the #

var content = hash.charAt(1); // Get the second character

switch (content) {

                      case 2:

                               // Show tab 2.


case 3:

// Show tab 3.


case 1:


                               // Show tab 1.




Then it's followed by the paragraph that says:


'The actual specifics for how you change the content will be explained later in the chapter '.


So, can I assume that there are some missing code that should be added within or after the above code in order to change the content (I wonder what these codes are). But what does he mean anyway- to change the content? I thought this section is meant to show us how to create page bookmarks using the window.location.hash property.



2) Then those were immediately followed by:


'For this to work, the JavaScript also has to update the URL when the page’s state changes. Say the setTab() function is called when the user clicks on a tab and it takes the event as an argument: '


function setTab(e) {

    if (typeof e == ‘undefined’) var e = window.event;


Is that all to it for declaring the setTab() function? I thought it's supposed to contain some onclick event handling code to be declared within the function. If I'm right, what might the code be like?


3) Next comes the following paragraph and  one line of code:


'Using the event’s target or srcElement property (depending upon the browser; see Chapter 8), the function would know which tab to show. If the function gets that information and stores it in the tab variable, the JavaScript can then dynamically change the URL accordingly: '


window.location.hash = ‘#’ + tab;


Here, I assume that we have to write some code that declare a function that reference the event target and also create a variable named 'tab' that get its value from referencing some HTML elements. But, what should the tab variable reference to? Perhaps the id of the tab that the user click on (which one must procure through the e.target/e.srcElement property). Again, I assume some additional code must be missing.


4) The section ends with:


'And that’s all there is to it (in theory). The user can bookmark the page and return to it in the same state as it was when the user left. Even if the user were to refresh the page, the state would remain the same. '


I could barely grasp the theory at this point. But what I'm more interested in is: how to put them in practical use. Just how one can 'bookmark the page and return to it in the same state as it was when the user left'. How does the complete script for such an application look like?


5) The end of the chapter return to the discussion of the above topic. It shows how to update the hash value as one uses the Back and Forward buttons to navigate. And, these code are provided:


var hash = window.location.hash;

var hashWatcher = setInterval(function() {
    if (window.location.hash != hash) { // Changed!        updatePage();
    }}, 1000); // Every second.


Ok, perhaps this part is not difficult to understand. But, still, the whole chapter didn't address the solution (at least not to my satisfaction) to the question of how to  share the specific tab information (i.e., browser state) with another person, as it was brought up at the beginning of the section 'Creating Representative URLs'.


As no one has mentioned this part of the book in the forum yet, I wonder if I'm the only one to have overlooked something (up to chapter 9) that might help clearing the uncertainties that I have on this topic. Or, perhaps, by charging on with the rest of the book, I would eventually find the solution written somewhere.

Link to comment
Share on other sites

Sorry for the confusion. So the premise is that you have a series of tabs on the page (or an accordian or whatever element that has content be dynamically changed). When you come to the page, content A is shown in the tab. But then you click another tab and the page shows content B. But the next time you come back to that page, content A is shown. And any time you share the URL, you can only link them to the page showing content A. So the goal is to be able to create a link direct to the page as it's showing content B.


Doing that requires two components: 

- The ability to dynamically change content.

- URL management. 


What I tried to do, perhaps not successfully, is demonstrate those two parts separately (because they're separate skills, just being used together here). 


I'm not positive offhand, but I suspect the downloaded code has all this together, which might help combine the contexts.


Let me know if that's still not clear or if you have any other questions.

Link to comment
Share on other sites

Yes, perhaps what is lacking is access to the complete set of codes (JavaScript and HTML, or even the CSS if there's one) pertinent to the example discussed. I've checked in the downloaded  chapter 9 folder, but couldn't find those files.  I wonder if you'd be able to embed those codes here. Think it would help me dearly to understand the obfuscated objectives set in the aforementioned section. By the way, really enjoy your book so far.

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...