Skip to content

Instantly share code, notes, and snippets.

@psychemedia

psychemedia/lapcharterTest1.html

Created June 7, 2011 22:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save psychemedia/1013385 to your computer and use it in GitHub Desktop.
Save psychemedia/1013385 to your computer and use it in GitHub Desktop.
Download ZIP
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/
Raw
lapcharterTest1.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment