Develop Reference

Got some trouble Implementing History.js for the site i am creating

I came across history.js as a possible solution to some issues i am having. For the website i am building i decided to create a static page where my content would be loaded into. So i would have 3 Divs, (one for the header, one for the menubar and one for the content) When clicking a link in the menu that page would be loaded into the content div. Because of this all traffic stays in the index.php page so clicking on the back button i would go to the last visited content but last visited page. Its my understanding i can solve this with history.js.
So on my page i have several links in the menu bar where onclick a function is called upon. For instance
<li><a href="javascript:void(0);" onclick="myprofile()" ><span>my profile</span></a></li>
<li><a href="javascript:void(0);" onclick="mysettings()"><span>Settings<small>
A function would look something like this.
function myprofile() {
$('#content').load('members.php');
}
function mysettings() {
$('#content').load('settings.php');
}
I added some javascript for history.js (found on this forum) And although it does change the urls inside my index.php but when clicking back it doesnt load the pages. How would i let history.js work when functions are used? (some links i do really need functions so just putting the onload inside link would not be an option for me)
<script>
$(function() {
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
// History.js is disabled for this browser.
// This is because we can optionally choose to support HTML4 browsers or not.
return false;
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
var State = History.getState();
$('#content').load(State.url);
/* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
$.get(State.url, function(response) {
$('#content').html($(response).find('#content').html()); });
*/
});
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('a').click(function(evt) {
evt.preventDefault();
History.pushState(null, $(this).text(), $(this).attr('onclick'));
});
});
</script>

The first parameter of the History.pushState is "data", which is for additional information.
So to save the History entry you could do this in your click event:
History.pushState({ href: 'members.php' }, $(this).text(), $(this).attr('onclick'));
And then when reading it back out you would do this in your History.Adapter.bind function:
$('#content').load(State.data.href);

How can I detect page navigation without reloading?

I have script, what work one time when window loaded, it work on this page, but site use some navigation links what not fully reload page (see this answer for example: Modify the URL without reloading the page). How can I detect that and run my script again?
I have one idea: storing URL (without anchor) in variable and check it periodically with current url, but I think this is bad solution. May be you know better one?
JavaScript or JQuery is possible to use.

Use window.onpopstate or window.onpushstate if u are using pushState or replaceState ( from ur given example).
ex:-
To Navigate Without reload ( you already did this )
// Your code to fetch new URL body and title
// update the DOM then use following code to update URL also (don't use location.href, otherwise the page reloads)
// sorry u already know this because u provided the example ;)
let data = { title : "Current Title",
body : document.body.innerHTML" } // to store current page data
window.history.pushState(data, 0, "newURL");
To detect navigation ( i.e., you wanna do )
window.onpushstate: when above code runs for navigation to a new url and load new content without reload ...
window.onpushstate(function() {
// detects ur navigation
})
window.onpopstate: when you press back button
window.onpopstate(function (e) {
let { data } = e.state;
// data object that u gave in pushState method when u called ur last / latest pushState method...
// use this data to retrieve previous data content and title
let { title, body } = data;
document.title = title;
document.body.innerHTML = body
})
for more detail mdn docs

That's because the new pages are either
1 ) Already at the ready and simply being brought in-sight by jQuery
2 ) Ajax called in.
If you scout for your navigation (the links you click on to go to the other page), you should find click me or so.
If you look for wherever this is is bound (i.e.: $('#navigation a').on("click", function(){});, you can simply wrap your script within a function, and trigger this function together with loading the new page every time. (after it, obviously).
I wish I could be more clear, but you did not provide any code yourself, so I have absolutely no idea of what kind of example I should be giving here.
-- the point: Those page changes are triggered by something in your javascript. Find the trigger that makes the page-change happen, and simply insert myCustomFunction();.
If you want to make your bindings update with a new DOM, you could use this:
function setBindings(){
//removing the old bindings prevents the "click" from triggering twice.
$('a').off("click");
$('a').on("click", function(){
//load page and such here
//Apply script you want to run here
setbindings(); //rerun the function to set the bindings.
});
}

I think you are looking for hashchanges you can listen to this event onhashchange
window.onhashchange = function(e) {
var sublink = window.location.hash.substring(1);
//do your thing here
}
You can also check what updated the url after the hashchange
var sublink = window.location.hash.substring(1);

I think the URL of script is cached，do you used Ajax get method？if it is，please
like this write url "wwww.baidu.com?"+Math.random();if not is ,in the firefox ,you can used pageshow event.

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

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?

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();
}
}

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});
});

Effectively handling Browser history and Back button [duplicate]

I want to change the way that content is displayed on my website:
var FNav = {
init: function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$(".page").fadeOut(500);
next_page.fadeIn(500);
How do I change this JavaScript, so I can have a proper back button functionality?
What I have tried (Unsuccessfuly). These are the solutions that I tried but without changing the javascript above. That is why I think none of them seem to work.
Using the History.js method described here:
https://github.com/browserstate/history.js/ I fill out all the steps and
enter the scripts to the header, however only the URL in the URL bar
changes when I click on a link. When I click the Back button, the URl
changes accordingly, but content doesn't load. When I enter a URL in
the URL bar, I get sent to the home page.
Ajaxify and Gist method
described here: https://github.com/browserstate/ajaxify Achieves the
same as above, same issues as well
Davis.js method described here:
https://github.com/olivernn/davis.js Achieves nothing upon completion
of the installation instructions. No change.
jQuery BBQ Plugin method
described here: http://benalman.com/projects/jquery-bbq-plugin/
Achieves nothing, no change upon loading the .js file in the header
of the website.
I read this article and understood it:
http://diveintohtml5.info/history.html

I'm not sure why you couldn't get Davis.js to work for you? Perhaps open an issue on the GitHub page.
If you want to use hash based routing with davis you need to include the hash routing extension. You then just need to include it in your page after davis.
The following setup should then allow you to handle routes
Davis.extend(Davis.hash)
Davis(function () {
this.get('/:page', function (req) {
FluidNav.goTo(req.params.page);
})
})
Assuming you have links in your page with the following
Page1
Page2
Davis will take care of handling the back button for you, so that if you click on the link for Page1 and then Page2, clicking on the back button will navigate to Page1 again.
If you have any problems please open an issue on the GitHub page detailing what you have and what isn't working and I can take a look at it.

The back button does not magically work. You need to code and listen for the event change!
In history.js, it shows you right on the front page:
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log(State.data, State.title, State.url);
});

is it possible to change change the url in address bar or browser on certain event

you all have used pinterest, you can see that when you click on any pin, a div is added and lightbox is shown on the same page but the url is changed to that of actual pin page. i have the same lightbox to show data, is it possible to change the url like that?..
one thing i want to tell is that, i have link which has onclick event which calls view() method, in which i am calling another page with ajax request, which shows the content of that page on my page, i want to change url when this link is clicked and back to previous url when closed..here is my code
function view(){
$.get('mypage.jsp', function(html) {
$(html).hide().appendTo('body').fadeIn(500);
}, 'html');
};

This feature is known as HTML5 Push State. Here's a related StackOverflow question which may provide more insight. Good tutorial for using HTML5 History API (Pushstate?)

I haven't checked Pintrest's solution. But is hash what you're looking for?
window.location.hash="Whatever-you-want-to-add-to-the-URL"
This will change http://stackoverflow.com/posts/11968693/ to http://stackoverflow.com/posts/11968693/#Whatever-you-want-to-add-to-the-URL

Yes, with HTML5's new history API. Where the lightbox is triggered, add something like this:
var hist = window.history;
hist.pushState({ image: [IMAGE URL] }, 'lightbox', [URL]);
This will change the current URL without reloading the page, and will create an entry in the browser history, so users can use their browser back button to return to the previous state (in this case, before they opened the lightbox).

You can change the url (not only the hash) by using the pushState or replaceState functions on the history object. More details: http://diveintohtml5.info/history.html