Load external page on div and getting a specific url at the same time

Question

I am developing a new website and while I want to get it done as easy to navigate as possible, I also wanted to use some kind of navegation with overlapping pages.

My idea was to have articles on the current page that will open on a floating div over the rest when clicked. That´s not really the problem because using jquery .load() it gets quite easy to do, but my problem is that it doesn't modify the current url, so it remains as www.myweb.com for example and I would like to have it like www.myweb.com/current-article when the article is opened. Once you have that specific url to the article, if it is shared, whoever open that link will get to the website with the article opened over the it.

I hope it all makes sense, but a good example can be found in USA Today or Play.Spotify

I am using umbraco 7 and javascript for the site. Any idea of how it could be done?

http://stackoverflow.com/questions/16980735/jquery-history-js-vs-jquery-hashchange — mplungjan, Jun 18 '15 at 11:42

score 0 · Answer 1 · answered Jun 18 '15 at 11:43

0

its called hash base navigation

 location.hash = "#myHash"; //sets the url plus hash

Below is fired if user manually changes the URL or by using the back button

 window.onhashchange = function()
{
     if (location.hash === "#myHash") 
        {
    doSomething();
        }  
}

answered Jun 18 '15 at 11:43

fuzzybear

2,325
3
23
45

OP dont want hashtags. – Morten OC Jun 18 '15 at 13:59
That solution based on hashtags could have worked but for our project we need something that doesn't depend on custom urls. Morten's sample seems to be more appropriated here. However, I didn't know this system either, and I'm sure this is going to help me for other tasks! hehe, thanks. – Alb-C Jun 19 '15 at 13:29
@MYbuddy glad it helps – fuzzybear Jun 20 '15 at 01:26

score 0 · Answer 2 · answered Jun 18 '15 at 13:56

This is actually a big and complex task to implement correctly.

I would advise you to use Backbone.Router http://backbonejs.org/#Router. It use history api in "new" browsers, with a fallback to hashtags in older browsers.

Some pseudo code:

First define your route. It will catch all pages under www.myweb.com/articles/*

var MyRouter = Backbone.Router.extend({

  routes: {
    "articles/:page": "loadPage"
  },

  loadPage: function() {
    var div = $("#overlay");
    div.html($.load("your page"))
    div.show()
  }
});

You would need to implement some logic to test if the loaded page is not under articles/.*

Init MyRouter when the page is loaded:

var router = new MyRouter();
router.start()

The overlay page will now open when you hit www.myweb.com/articles/cool-article

If you want to open the page from a parent page, simply call

$("button").click(function(){
    router.navigate("articles/cool-article", {trigger: true});
});

Thanks, Morten. You're right and this seems to be what I need to use. I'm going to start playing around with this to see before closing this as resolve. Cheers! — Alb-C, Jun 19 '15 at 13:26

Load external page on div and getting a specific url at the same time

2 Answers2