Stack using li

Stack using li elements See doco re json http://code.google.com/p/jquery-json/ http://touchpunch.furf.com/ Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected. http://jscrollpane.kelvinluck.com/ re scrollbars that can be styled

by Andy Bulka

HTML

<script src="http://jquery-json.googlecode.com/svn/trunk/build/jquery.json.min.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<a href="http://www.w3schools.com/html/html_lists.asp">Doco on html Lists</a>
<hr>

<button id="btn_push">Push</button>
<button id="btn_pop">Pop</button>
<button id="btn_rolldown">RDN</button>
<button id="btn_rollup">RUP</button>
<button id="btn_swap">X<>Y</button>
<button id="btn_dup">Dup</button>
<ul id="rpnstack">
    <li>1<span class="note">a</span><span class="type">number</span></li>
    <li>2<span class="note">a</span><span class="type">number</span></li>
    <li>3<span class="note">a</span><span class="type">number</span></li>
    <li>hi<span class="note">a</span><span class="type">string</span></li>
</ul>

<hr>
    
<button id="btn_push2">Push</button>
<button id="btn_pop2">Pop</button>
<button id="btn_rolldown2">RDN</button>
<button id="btn_rollup2">RUP</button>
<button id="btn_swap2">X<>Y</button>
<button id="btn_dup2">Dup</button>    
<button id="btn_push2_array">Push Array</button>    
<ul id="rpnstack2">
</ul>
<input id="current" class="stack" type="text" value="78"></<input>    
<button id="btn_push2_input">Push</button>

CSS

.note {
    font: 12 Verdana;
    color:blue;
    text-align: right;
    padding-left: 20px;
    width: 10px;
    float:right;
        
}
#rpnstack li {width:220px; background:grey;}
li span {
}
ul li:hover span {background-color: green;}
ul li:hover span.type {background-color: olive;display:inline;float:right;}

li span.type {display:none;}

/* refurbished */
.comment {
    font: 12 Verdana;
    color:blue;
    text-align: right;
    padding-left: 20px;
    width: 10px;
    float:right;
}
#rpnstack2 li {background:beige; padding-right:2px; }
li span.val_type {
    display:none;
    padding-left:3px; 
    padding-right:3px;
}
ul li:hover span.val_type {
    background-color: olive;
    display:inline;
    float:right;
}

/*
#rpnstack2 { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#rpnstack2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

#rpnstack2 li span { position: absolute; margin-left: -1.3em; }
*/

#rpnstack2 {
    width:220px;
    height: 10em;
    overflow: scroll;
    overflow-x: hidden;
}

/* way the hell off screen */
/* unused
.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}
*/

JavaScript

// create the nodeType constants if the Node object is not defined
// from http://code.stephenmorley.org/javascript/dom-nodetype-constants/
var DomNodeTypes =
  {
    ELEMENT_NODE                :  1,
    ATTRIBUTE_NODE              :  2,
    TEXT_NODE                   :  3,
    CDATA_SECTION_NODE          :  4,
    ENTITY_REFERENCE_NODE       :  5,
    ENTITY_NODE                 :  6,
    PROCESSING_INSTRUCTION_NODE :  7,
    COMMENT_NODE                :  8,
    DOCUMENT_NODE               :  9,
    DOCUMENT_TYPE_NODE          : 10,
    DOCUMENT_FRAGMENT_NODE      : 11,
    NOTATION_NODE               : 12
  };
function assertEqual(a, b, message)
{
    if (a != b) throw new Error(message + " mismatch: " + a + " != " + b);
}

// Original version

function pusher() {
  var val = Math.random()*100;
  var li = encode_vals_to_li(val, typeof val);
  $('#rpnstack').append(li);
}
function popper() {
  return $('#rpnstack li:last').remove();
}
function rup() {
  $('#rpnstack li:first').appendTo('ul#rpnstack');
}
function rdn() {
  $('#rpnstack li:last').prependTo('ul#rpnstack');
}
function swapper() {
  var oldlast = $('#rpnstack li:last').detach();
  $('#rpnstack li:last').before(oldlast);
}
function dup() {
  var dup = $('#rpnstack li:last').clone();
  $('#rpnstack').append(dup);
}

function extract_vals_from_li($li) {
  //console.log('popped', x, typeof x, x instanceof jQuery, x.children('span[class*="type"]').text());
  var val = $li.contents().filter(function() {
        return this.nodeType == DomNodeTypes.TEXT_NODE;
    }).text();
  var type = $li.children('span').filter(".type").text();
  return [val, type];
}
function encode_vals_to_li(val, type) {
  var li = $('<li>').text(val);
  li.append($('<span>').text('b').addClass('note'));
  li.append($('<span>').text(type).addClass('type'));
  return li;
}

$('#btn_push').click(function() {
  pusher();
});
$('#btn_pop').click(function() {
  var $li = popper();
  var result = extract_vals_from_li($li);
  var val =...