-$(function() {
- $(".tabs").each(function() {
- var self = $(this);
- var about= $($(this).attr("data-tab-about"));
- about.find("[data-tabbed]:not(:first)").hide();
- $(this).find("[data-tab]:first").addClass("active");
- $(this).find("[data-tab]").each(function() {
- $(this).click(function (e) {
- e.preventDefault();
- self.find(".active").removeClass("active");
- $(this).addClass("active");
- about.find("[data-tabbed]").hide();
- $($(this).attr("data-tab")).fadeIn();
-
- });
- });
+$(function() {
+ var $main = $("#Changing");
+
+ String.prototype.decodeHTML = function() {
+ return $("<div>", {html: "" + this}).html();
+ };
+ afterLoad = function(html) {
+ document.title = html.match(/<title>(.*?)<\/title>/)[1].trim().decodeHTML();
+ /*
+ Quite UGLY but needed for styling the whole body with ID
+ Feel free to correct and find a better way
+ According to this link the probles is that $(html).filter('body').Attr('id') will not work!
+ http://www.devnetwork.net/viewtopic.php?f=13&t=117065
+ */
+ var bodyID = html.match(/<body id="(.*?)">/)[1].trim();
+ $('body').attr('id',bodyID);
+ init();
+ };
+
+ $(window).on("popstate", function(e) {
+ if (e.originalEvent.state !== null) {loadPage(location.href);}
});
- $("[data-audio-control]").each(function() {
- var playPauseButton = $(this).find('.playpause');
- var audio = $('#'+$(this).attr('data-audio'));
- var audioElement = audio[0];
- //alert($(this).attr('data-audio'));
- playPauseButton.on('click',function(e){
- if (audioElement.paused == false) {
- audioElement.pause();
- } else {
- audioElement.play();
- }
+ loadPage = function(href) {
+ history.pushState({}, '', href);
+ $main.load(href + " #Changing>*", null, afterLoad);
+ };
+ init = function() {
+ $("a, area").unbind('click').on('click',function() {
+ var href = $(this).attr("href");
+ if (href.indexOf(document.domain) > -1 || href.indexOf(':') === -1) {
+ loadPage(href);
+ return false;
+ }
});
- // Bind back event in case of direct control
- audio.on('play',function(){
- playPauseButton.addClass('icon-pause').removeClass('icon-play');
- }).on('pause',function(){
- playPauseButton.addClass('icon-play').removeClass('icon-pause');
+ $(".tabs").each(function() {
+ var self = $(this);
+ var about= $($(this).attr("data-tab-about"));
+ about.find("[data-tabbed]:not(:first)").hide();
+ $(this).find("[data-tab]:first").addClass("active");
+ $(this).find("[data-tab]").each(function() {
+ $(this).click(function (e) {
+ e.preventDefault();
+ self.find(".active").removeClass("active");
+ $(this).addClass("active");
+ about.find("[data-tabbed]").hide();
+ $($(this).attr("data-tab")).fadeIn();
+
+ });
+ });
});
+ $("[data-audio-control]").each(function() {
+ var playPauseButton = $(this).find('.playpause');
+ var audio = $('#'+$(this).attr('data-audio'));
+ var audioElement = audio[0];
+ //alert($(this).attr('data-audio'));
+ playPauseButton.on('click',function(e){
+ if (audioElement.paused == false) {
+ audioElement.pause();
+ } else {
+ audioElement.play();
+ }
+ });
+ // Bind back event in case of direct control
+ audio.on('play',function(){
+ playPauseButton.addClass('icon-pause').removeClass('icon-play');
+ }).on('pause',function(){
+ playPauseButton.addClass('icon-play').removeClass('icon-pause');
+ });
- });
+ });
+ }
+ init();
});