public
Created

First doodling with a lapcharter app, based on ideas contained in: http://blog.ouseful.info/2011/04/30/thoughts-on-a-couple-of-lap-charting-apps/

  • Download Gist
lapcharterTest1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
<html><head>
<title>Lapcharter - test 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 
<script type="text/javascript">
 
function moveToEnd(hashID){
$(hashID).appendTo("#biglist");
if (jQuery.inArray(hashID, currLapCars)>-1){
console.log(jQuery.inArray(hashID, currLapCars))
currLapCars=[]
currLapNum++
$('#lapper').append('<div id="lap'+currLapNum+'"></div>')
//need to handle unlapping somehow???
}
currLapCars.push(hashID)
var lapper="#lap"+currLapNum
$(lapper).append('<span>'+hashID+'</span>')
}
 
function delItem(hashID){$(hashID).remove()}
 
function delItemHandler(id){
var hashID='#'+id
var delHashID='#del_'+id
$(hashID).append(' <span id="del_'+id+'">X</span>')
$(delHashID).click(function() {delItem(hashID)});
}
 
function addItem() {
var id=$('#num').val()
var hashID='#'+id
var hxID='#x'+id
if (!$(hashID).length){
var addTxt='<div id="'+id+'" class="i-panel"><span id="x'+id+'">'+id+'</span></div>'
$('#biglist').append(addTxt)
$(hxID).click(function() {moveToEnd(hashID)});
delItemHandler(id)
}
}
 
var currLapCars=[]
var currLapNum=1
 
$(document).ready(function() {
$('#baseForm').submit(function() {addItem(); return false;});
$('#addNum').click(function() {addItem()});
$('#x14').click(function() {moveToEnd("#14")});
$('#x26').click(function() {moveToEnd("#26")});
$('#x93').click(function() {moveToEnd("#93")});
delItemHandler(14)
delItemHandler(26)
delItemHandler(93)
})
</script>
</head>
<body>
<form id="baseForm"><input type="text" id="num" /> <input type="button" id="addNum" value="Add" />
</form>
<div id="biglist" class="i-panel">
<div id="14" class="i-panel"><span id='x14'>14</span></div>
<div id="26" class="i-panel"><span id='x26'>26</span></div>
<div id="93" class="i-panel"><span id='x93'>93</span></div>
</div>
<div id="order"><h3>Order</h3>
<div id="lapper">
<div id="lap1"></div>
</div>
<div>
</body></html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.