One Page Navigation With Umbraco, SammyJS, PushState, HashBang
Hi All,
As an exercise we wanted to test google's ajax indexing techniques using #!.
We developed a micro-site around the approach and the issues we found along the way. During the time of development using solely #! based navigation, SammyJS introduced pushstate support (not without its' gotchas).
We've updated the site to use pushstate with a #! fallback and all powered by Umbraco!
The nice part about it is that we've made use of Umbraco's alternative masterpage functionality and exploited it a little by rolling our own default.aspx codebehind.
We think the solution is pretty neat, highly indexable and the approach using umbraco has opened up some thoughts around alternative use of the alternative masterpage functionality for feeds/json etc.
We'd love you to have a look and comment on the micro-site with thoughts around the approach and any feedback!
I found your example very useful and interesting for what I need to do. Unfortunatly I can't really make it work. I know we have the alternate templates which I 've made like the example but what about the other templates how is the structure there and what about the pages on the content section, do they use the basic templates aren't they. I see the calls in firebug and all are /path/ajax even the homepage. Sorry I am missing something maybe. Is there any zip with the project so I can have a look as it seems that I got a few gaps.
1. AJAX - The ajax template is the alternative template that SammyJS uses to request the title and body content of all the pages if the browser supports pushstate or hasbang. SammyJS routes send a request to <whatever was in the nav link>/ajax the most important thing about this template is that it has an id of content-body. SammyJS grabs the contents of content-body and injects it in to the content area of the page you're on.
2. ContentPage: The Content Page template is the template used when the browser might not support the SammyJS hashbang/push state approach. What it means is that you then have a complete fallback to a page that would look identical if the browser can't handle some of the features used to make the site a single page app
We don't have a downloadable solution at present. If you want to post me a zip of what you have I'd be happy to have a look for you?
If I had my time again I would have taken a much simpler approach and not really used SammyJS as it is a bit too much for what we really need to achieve the nav portion of the demo. You could get away with using something like this: Ajaxify GitHub Gist
One Page Navigation With Umbraco, SammyJS, PushState, HashBang
Hi All,
As an exercise we wanted to test google's ajax indexing techniques using #!.
We developed a micro-site around the approach and the issues we found along the way. During the time of development using solely #! based navigation, SammyJS introduced pushstate support (not without its' gotchas).
We've updated the site to use pushstate with a #! fallback and all powered by Umbraco!
The nice part about it is that we've made use of Umbraco's alternative masterpage functionality and exploited it a little by rolling our own default.aspx codebehind.
We think the solution is pretty neat, highly indexable and the approach using umbraco has opened up some thoughts around alternative use of the alternative masterpage functionality for feeds/json etc.
We'd love you to have a look and comment on the micro-site with thoughts around the approach and any feedback!
http://hashbang.envoyat.com/
Cheers,
Tom - Envoy Advanced Technologies
Hi Tom,
I found your example very useful and interesting for what I need to do. Unfortunatly I can't really make it work. I know we have the alternate templates which I 've made like the example but what about the other templates how is the structure there and what about the pages on the content section, do they use the basic templates aren't they. I see the calls in firebug and all are /path/ajax even the homepage. Sorry I am missing something maybe. Is there any zip with the project so I can have a look as it seems that I got a few gaps.
Thanks for your time,
Giorgos
Hi Giorgos,
Thanks for the post.
There are 2 main templates the site uses:
1. AJAX - The ajax template is the alternative template that SammyJS uses to request the title and body content of all the pages if the browser supports pushstate or hasbang. SammyJS routes send a request to <whatever was in the nav link>/ajax the most important thing about this template is that it has an id of content-body. SammyJS grabs the contents of content-body and injects it in to the content area of the page you're on.
2. ContentPage: The Content Page template is the template used when the browser might not support the SammyJS hashbang/push state approach. What it means is that you then have a complete fallback to a page that would look identical if the browser can't handle some of the features used to make the site a single page app
We don't have a downloadable solution at present. If you want to post me a zip of what you have I'd be happy to have a look for you?
If I had my time again I would have taken a much simpler approach and not really used SammyJS as it is a bit too much for what we really need to achieve the nav portion of the demo. You could get away with using something like this: Ajaxify GitHub Gist
Hi Tom,
Thank you for the quick reply. Is there any email which I can use to pass you some credentials of the dev server to have a look.
Cheers, Giorgos
Hi Girgos,
it's [email protected]
is working on a reply...