diff options
| author | Kyle Kaminski <kyle@kkaminsk.com> | 2013-06-16 03:25:26 -0500 |
|---|---|---|
| committer | Kyle Kaminski <kyle@kkaminsk.com> | 2013-06-16 03:25:26 -0500 |
| commit | 1bad4fc00814e2c03ecadaa7faf93c6372f5bd30 (patch) | |
| tree | 88104590feefcb804f5fa0ca57ee1a6c76cbf0a7 /wmlcards.html | |
| download | phpsandbox-1bad4fc00814e2c03ecadaa7faf93c6372f5bd30.tar.gz phpsandbox-1bad4fc00814e2c03ecadaa7faf93c6372f5bd30.tar.bz2 phpsandbox-1bad4fc00814e2c03ecadaa7faf93c6372f5bd30.zip | |
initial commit
Diffstat (limited to 'wmlcards.html')
| -rw-r--r-- | wmlcards.html | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/wmlcards.html b/wmlcards.html new file mode 100644 index 0000000..ba174ec --- /dev/null +++ b/wmlcards.html @@ -0,0 +1,156 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<head> + <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> + <title>Anchor Jumps</title> + <style type="text/css"> + p { color:gray; } + div.card { background-color:cyan; } + </style> + <script type="text/javascript"> + function cardHistory() { + this.redo = new Array(); // backward history + this.undo = new Array(); // forward history + this.get = ""; + this.post = ""; + this.requestheaders = ""; + + this.pushUndo = function(url) { // save a url to history + // hitting this function results in discarded forward history + if (this.redo.length > 0) + this.redo = []; + + this.undo.push(url); + return true; + } + this.pushRedo = function(url) { // saves url to redo list (forward) + this.redo.push(url); + return true; + } + + // pops the url from undo stack to redo stack + this.goBack = function() { + if (this.undo.length > 0) { + var back = this.undo.pop(); + this.redo.push(back); + this.jump(back); + } + } + + // pushes the url from redo stack to undo stack (history stack) + this.goForward = function() { + if (this.redo.length > 0) { + this.pushUndo(this.redo.pop()); + this.jump(); + } + } + + this.jump = function(url) { + // go to what's on top of history stack + if (url.indexOf('#') != 0) + window.location.href = url; // jumping to an url + else + window.location.hash = url; // jumping to an hash anchor + } + + this.undoTop = function() { + return this.undo[this.undo.length-1]; + } + this.redoTop = function() { + return this.redo[this.redo.length-1]; + } + } + + var trackHistory = new cardHistory(); + </script> +</head> + +<body> + <!-- + - form should have unique id + - everytime we leave a card we should push that chanhe onto undo stack + + onsubmit="return trackHistory.pushUndo(document.getElementById('card1_form').action);" + --> + + <div id="card1" class="card"> + <h2>Card 1</h2> + <p>This is Card 1.</p> + Here is just some text below Card 1.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card1_form" action="#card2" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + + </div> + + <div id="card2" class="card"> + <h2>Card 2</h2> + <p>This is Card 2.</p> + Here is just some text below Card 2.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card2_form" action="#card3" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + </div> + + <div id="card3" class="card"> + <h2>Card 3</h2> + <p>This is Card 3.</p> + Here is just some text below Card 3.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card3_form" action="#card4" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + </div> + + <div id="card4" class="card"> + <h2>Card 4</h2> + <p>This is Card 4.</p> + Here is just some text below Card 4.<br /> + More text to kill window space.<br /> + <a href="#card6" onclick="trackHistory.pushUndo(window.location.href);">Go to Card 6</a><br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card4_form" action="#card5" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + </div> + + <div id="card5" class="card"> + <h2>Card 5</h2> + <p>This is Card 5.</p> + Here is just some text below Card 5.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card5_form" action="#card6" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + </div> + + <div id="card6" class="card"> + <h2>Card 6</h2> + <p>This is Card 6.</p> + Here is just some text below Card 6.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card6_form" action="#card7" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Next</button> + </form> + </div> + + <div id="card7" class="card"> + <h2>Card 7</h2> + <p>This is Card 7.</p> + Here is just some text below Card 7.<br /> + More text to kill window space.<br /> + <button onclick="trackHistory.goBack();">Prev</button> + <form id="card7_form" action="#card1" onsubmit="return trackHistory.pushUndo(window.location.href);"> + <button type="submit">Go to Card 1</button> + </form> + </div> +</body> +</html> + |