Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

One page hash tag url change on section WordPress

  • SOLVED

Hi There,

Is someone able to implement this technique?
http://benalman.com/code/projects/jquery-hashchange/examples/hashchange

So when you click on a menu item, the #section is displayed in the browser url bit.
The logo and footer scroll up link would remove any #tag.

Ideally need it done within the next few hours!

Site url attached as image.

Thanks

2014-07-31 by yepyeh

Answers (4)

2014-07-31

Arnav Joy answers:

so you want to change the title at browser ?

yepyeh comments:

That would be nice if the Title Changed too.
But really what we need is the #section to show in the browser URL, so someone can see it, copy it and send section URL to someone else.

2014-07-31

Sébastien | French WordpressDesigner answers:

or you can use this code :
http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

2014-07-31

timDesain Nanang answers:

have you tried this:
http://forum.jquery.com/topic/get-string-in-url-after-hash-and-append-it-to-document
http://stackoverflow.com/questions/6573770/append-a-var-to-url-with-jquery-function
http://stackoverflow.com/questions/12508225/how-do-we-update-url-or-query-strings-using-javascript-jquery-without-reloading

2014-07-31

Dbranes answers:

Here's a sample snippet based on the <em>window.location</em>, that you could try:

jQuery( function( $ ){

$( "#nav a[href^=#]").on( "click", function( e ) {
window.location.hash = this.hash;
});

$( "#logo,#menu_top")on( "click", function( e ) {
window.location.hash = '';
});

});


You might also consider <em>window.history.pushState(state, title , url )</em> but only new browsers support it.

Then there is for example the [[LINK href="https://github.com/browserstate/history.js/"]]history.js[[/LINK]] library:

<blockquote>History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.</blockquote>