Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fragment identifier?

    Hiya,

    I currently have it so that my site loads content into a specific div.

    like so:
    Code:
    <a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a>
    However I want it so that when they click that, it also changes the url to access that page?

    Thanks guys

    ~ David

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    This is a typical application for the "history hack". You can append a hash "#" value to the end of the current location URL. This will not force the browser to reload the page (as it does after any other change to the location URL), it is bookmarkable and it will be stored in the browser history.

    Code:
    // on page load check the hash in the URL and execute the respective AJAX function
    if(window.location.hash) {
       ajaxpage('/staff/_frontend/listen_record.php', window.location.hash.substring(1)); // substring will cut off the leading #
    }
    
    // later on in the page, after changing the content and using the ajaxpage() function, you'll have to change the hash
    var newcontent = 'about';  // example
    window.location.hash = newcontent;
    Some of the newest browser versions support the History API ... but not all of them yet.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, I want it so that when the page is loaded through the javascript:ajaxpage, the url changes from http://example.com/example to something like http://example.com/example/recent and when it's visited as a url, it displays the content as if the javascript:ajaxpage was clicked

    Thanks

    ~ David

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I forgot about the most important part of the history hack ... shame on me ...

    One problem of my suggested solution is that after using the browser navigation (back/forward) the onload event usually will not fire, neither will the JS code in the global scope be loaded.

    Solution: Start an interval with setInterval() for let's say 500 msec, that checks the URL for a hash change and then loads the new content according to the new hash

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    I forgot about the most important part of the history hack ... shame on me ...

    One problem of my suggested solution is that after using the browser navigation (back/forward) the onload event usually will not fire, neither will the JS code in the global scope be loaded.

    Solution: Start an interval with setInterval() for let's say 500 msec, that checks the URL for a hash change and then loads the new content according to the new hash
    So I have in my head tags:

    Code:
    // on page load check the hash in the URL and execute the respective AJAX function
    if(window.location.hash) {
       ajaxpage('/staff/_frontend/listen_record.php', window.location.hash.substring(1)); // substring will cut off the leading #
    }
    Where do I put:
    Code:
    // later on in the page, after changing the content and using the ajaxpage() function, you'll have to change the hash
    var newcontent = 'about';  // example
    window.location.hash = newcontent;
    Cheers

    ~ David

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Please take a look at my code snippet here: http://snipplr.com/view/63374/

    Of course you will have to amend the getContent() function to reflect the correct content according to the description.

    And as I said in my latest PM ... you'll have to think about a way to connect a short description (needed for the URL hash) with the actual URL you need. Maybe you could even use the complete URL as hash. Something like "http://your.url.com/centralpage.php#/staff/_frontend/listen_record.php" for Recent Songs etc.

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Please take a look at my code snippet here: http://snipplr.com/view/63374/

    Of course you will have to amend the getContent() function to reflect the correct content according to the description.

    And as I said in my latest PM ... you'll have to think about a way to connect a short description (needed for the URL hash) with the actual URL you need. Maybe you could even use the complete URL as hash. Something like "http://your.url.com/centralpage.php#/staff/_frontend/listen_record.php" for Recent Songs etc.
    Hey thanks,

    how would I do this for about 10 of these (all different)

    Code:
    <a href="javascript:ajaxpage('/staff/_frontend/listen_record.php', 'content');">Recent Songs</a>
    Cheers

    ~ David


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •