| <!doctype html> |
| |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| |
| <title>jsGET demo</title> |
| <meta name="description" content="simple demos, which show what you can do with jsGET"> |
| <meta name="author" content="Fabian Vogelsteller"> |
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <script type="text/javascript" src="jsGET.js"></script> |
| |
| <style type="text/css"> |
| body { |
| font-size: 12px; |
| font-family: verdana, sans-serif; |
| background-color:#000; |
| color: #fff; |
| } |
| |
| a { |
| color: #fff; |
| border-bottom: 1px dotted #eee; |
| } |
| |
| #menu h1 { |
| color:#fff; |
| font-size: 15px; |
| } |
| |
| #output { |
| width: 200px; |
| border: 1px solid white; |
| padding: 5px; |
| color: #ccc; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="menu"> |
| <h1>Navigation</h1> |
| <a href="#" onclick="jsGET.set('myNavi=firstpage');return false;">First page</a><br /> |
| <a href="#" onclick="jsGET.set({'myNavi':'secondpage'});return false;">Second page</a><br /> |
| <a href="#" onclick="jsGET.set({'myNavi':'lastpage','newVar':'newValue'});return false;">Last page</a><br /><br /> |
| <a href="#" onclick="jsGET.remove('myNavi');return false;">Remove "myNavi" var</a><br /> |
| <a href="#" onclick="jsGET.clear();return false;">Clear all</a><br /> |
| <h2>Mode</h2> |
| <a href="?mode=regular">Fire jsGET listener (and update output box below) with every change</a><br /> |
| <a href="?mode=only-browser-history">Fire jsGET listener (and update output box below) ONLY when you change the URL by going back in the browser history (or by manually editing the hash section)</a><br /> |
| Listener test frequency:<br /> |
| <a href="?freq=100">very fast (0.1s)</a> | |
| <a href="?freq=250">fast (0.25s)</a> | |
| <a href="?freq=500">regular/default (0.5s)</a> | |
| <a href="?freq=1000">slow (1s)</a> | |
| <a href="?freq=5000">very slow (5s)</a><br /> |
| </div> |
| <br /> |
| <div id="output"> |
| </div> |
| |
| <script type="text/javascript"> |
| |
| // run the putInOutpuBox always when the hash value changes |
| // (when the second parameter is FALSE, it only calls the function when the browser history button (back, forward) is clicked) |
| var newListener = jsGET.addListener(putInOutputBox, (get_uri_arg('mode') !== 'only-browser-history'), null, parseInt(get_uri_arg('freq'))); // the "newListener" var get the setIntervallId necessary for removeListener() |
| |
| // the function which get called by the listener |
| function putInOutputBox(hashVars) { |
| var outputBox = document.getElementById("output"); |
| outputBox.innerHTML = ''; |
| var output = ''; |
| |
| // show changed vars in the output box |
| output += '<b>Changed var(s)</b><br />'; |
| for(var key in hashVars.changed) { |
| output += key+' = '+hashVars.changed[key]+'<br />'; |
| } |
| |
| // show all current vars in the output box |
| output += '<br><b>Current var(s)</b><br />'; |
| for(var key in hashVars.current) { |
| output += key+' = '+hashVars.current[key]+'<br />'; |
| } |
| |
| // show all current vars in the output box |
| output += '<br /><b>Old var(s)</b><br />'; |
| for(var key in hashVars.old) { |
| output += key+' = '+hashVars.old[key]+'<br />'; |
| } |
| |
| output += '<br /><br /><b>This uses the get() method, to fetch the "myNavi" var:</b><br />'+jsGET.get('myNavi'); |
| |
| outputBox.innerHTML = output; |
| blink(1); |
| setTimeout(blink, 250); |
| } |
| |
| function blink(toggle) { |
| var outputBox = document.getElementById("output"); |
| outputBox.style.backgroundColor = (toggle == 1 ? '#800' : ''); |
| } |
| |
| // derived from http://www.netlobo.com/url_query_string_javascript.html |
| function get_uri_arg(name) |
| { |
| var re = '[?&]' + name + '=([^&#]*)'; |
| var regex = new RegExp(re); |
| var results = regex.exec(window.location.href); |
| if (results == null) |
| return ''; |
| else |
| return results[1]; |
| } |
| </script> |
| </body> |
| </html> |
