Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Using hash links allows for bookmarkable/sharable links to trigger JavaScript code, instead of reloading the page. <a href="http://benalman.com/projects/jquery-hashchange-plugin/" rel="nofollow noreferrer">Ben Almans jQuery hashchange event</a> allows you to bind an event handler to the hashchange event, this plugin works with older browsers that don't support this normally. An event handler bound to hashchange can read the hash part of the url, and call any function.</p> <pre><code>// register event handler function bindHashchange() { $(window).bind('hashchange', function(event) { event.preventDefault(); var label = location.hash.substring(1); handleLabel(label); }); // trigger event so handler will be run when page is opened first time // otherwise handler will only run when clicking on hash links $(window).trigger('hashchange'); } // read and handle hash part of url function handleLabel(label) { if ( label.length &gt; 0 ) { // using label from url switchPage(label); } else { // use the default label, if no hash link was present switchPage('start'); } } // in this case, load hidden &lt;div&gt;'s into a &lt;div id="content"&gt; function switchPage(label) { if ( label == 'start ) { $('div#content').html($('div#start')); } else if ( label == 'some_other_page' ) { // do something else } } </code></pre> <p>This other event handler can process 2 arguments separated by a dot ('.') in the same url.</p> <pre><code>function processHash() { var str = location.hash.substring(1); var pos = $.inArray('.', str); var label = ''; var arg = ''; if ( pos &gt; -1 ) { label = str.substring(0, pos); } else { label = str.substring(0); } if ( pos &gt; 1 ) { arg = str.substring(pos+1); } if ( label.length == 0 ) { // the default page to open of label is empty loadContent('start'); } else { // load page, and pass an argument loadContent(label, arg); } } </code></pre> <p>If regular expressions are used, any combination of characters can be parsed.</p> <pre><code>var registry = {}; // split on character '.' var args = label.split(/\./g); for ( i in args ) { var arg = args[i]; // split on character '=' var temp = arg.split('='); var name = temp[0]; var value = temp[1]; // store argument in registry registry[name] = value; } // registry is loaded, ready to run application that depends on arguments </code></pre> <p>This will transform the url:</p> <blockquote> <p>mysite/#company.page=items.color=red</p> </blockquote> <p>Into the following JavaScript Object:</p> <blockquote> <p>Object { company=undefined, page="items", color="red"}</p> </blockquote> <p>Then it is only a matter of running jQuery's show() or hide() functions on your selected elements.</p> <p>This could be transformed into non-jQuery JavaScript, but then you would lose the functionality that Ben Alman delivers, which is crucial for a portable solution.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload