1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Switching URL without page reload

Discussion in 'HTML & JavaScript' started by lanbo, Sep 27, 2011.

  1. lanbo

    lanbo Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 23, 2009
    Messages:
    3,437
    Likes Received:
    595
    Home Page:
    Any idea how to do this?


    ie. click on login/signup on the top right, the url changes without a reload :O
    https://www.tumblr.com/
     
  2. nesterdwarf

    nesterdwarf Regular Member

    Joined:
    May 30, 2008
    Messages:
    276
    Likes Received:
    539
    Location:
    State of Misery...er, Missouri...
    It's really not changing the URL of the page. Basically just calling a javascript function on release of the button that hides/shows the desired div. If you take a look at the source code, you can see that the login form is already present when you first go to the page. A little extra jQuery for the fade ins/outs and that about it...

    HTH
    ND
     
  3. lanbo

    lanbo Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 23, 2009
    Messages:
    3,437
    Likes Received:
    595
    Home Page:
    It is changing the URL
    original page: https://www.tumblr.com/
    after clicking "login": https://www.tumblr.com/login
     
  4. nesterdwarf

    nesterdwarf Regular Member

    Joined:
    May 30, 2008
    Messages:
    276
    Likes Received:
    539
    Location:
    State of Misery...er, Missouri...
    If you look at the source code for each of those pages, they are exactly the same (except for a few minor class names)...anyway, to accomplish what your post title asks, to change the content of the page without a page reload, you need to look into jQuery...

    ND
     
  5. lanbo

    lanbo Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 23, 2009
    Messages:
    3,437
    Likes Received:
    595
    Home Page:
    yes i know it's using jquery, but how are they changing the title/URL with jquery?

    so when you refresh you go to the same page, normally with ajax/jquery you start at the beginning
     
  6. licorne101

    licorne101 Registered Member

    Joined:
    Aug 22, 2011
    Messages:
    88
    Likes Received:
    118
    If you have noticed, it is in the same page. the main page is tumblr.com/login but because you have just loaded the domain, it shows as tumblr.com

    It is not possible to change the url of the browser with javascript as that will cause a major security flaw. :)
     
  7. aftershock2020

    aftershock2020 Senior Member

    Joined:
    Oct 19, 2007
    Messages:
    981
    Likes Received:
    477
    Yeah, this is nothing big, all it is showing the " / login " bit for is because the jquery is using it as an ' id ' variable to call the divided webpage within the source code.

    The browser sees it as a different page within itself but, it is merely a fluke of the browser itself, revealing the actual selected div as the domain destination. It is absolutely all on the same page.

    It is a better practice to isolate divs with class id variables to better conceal them in that type of exposure. It isn't anything to worry about though and is extremely used as common practice in multi-language coding.
     
  8. bliko

    bliko Newbie

    Joined:
    Aug 20, 2011
    Messages:
    23
    Likes Received:
    2
    nothing too much to worry about just add a 301 and you'll be fine
     
  9. lanbo

    lanbo Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 23, 2009
    Messages:
    3,437
    Likes Received:
    595
    Home Page:
    Yeah, that's what I'm going after.. how would I add the "/login" at the end of my site upon a click?
     
  10. sockpuppet

    sockpuppet Junior Member

    Joined:
    Nov 7, 2011
    Messages:
    155
    Likes Received:
    145
    you can do this with the new HTML5 history api, unfortunately not supported in IE

    i'm not allowed to post urls, so google for 'history.pushState'