Skip to content

Instantly share code, notes, and snippets.

@gijs

gijs/gist:84059

Created March 24, 2009 12:26
Show Gist options
  • Save gijs/84059 to your computer and use it in GitHub Desktop.
Save gijs/84059 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>test</title>
<style>
div#bubble{
width: 200px;
height: 100px;
display: none;
}
div.time{
width: 100px;
height: 50px
}
.odd{
background-color: #f9f9f2;
}
div.day{
width: 150px;
height: 25px;
}
div.today{
width: 150px;
height: 25px;
}
div.today{
cursor:pointer;
}
</style>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.fn.mousehold = function(timeout, f) {
if (timeout && typeof timeout == 'function') {
f = timeout;
timeout = 100;
}
if (f && typeof f == 'function') {
var timer = 0;
var fireStep = 0;
return this.each(function() {
jQuery(this).mousedown(function() {
fireStep = 1;
var ctr = 0;
var t = this;
timer = setInterval(function() {
ctr++;
f.call(t, ctr);
fireStep = 2;
}, timeout);
})
clearMousehold = function() {
clearInterval(timer);
if (fireStep == 1) f.call(this, 1);
fireStep = 0;
}
// jQuery(this).mouseout(clearMousehold);
jQuery(this).mouseup(clearMousehold);
})
}
}
$(function(){
$.extend($.fn.disableTextSelect = function() {
return this.each(function() {
if($.browser.mozilla) {
$(this).css('MozUserSelect','none');
} else if($.browser.msie) {
$(this).bind('selectstart',function(){return false;});
} else {
$(this).mousedown(function(){return false;});
}
});
});
$('.noselect').disableTextSelect();
});
$(document).ready(function() {
var start;
var end;
$(".today").mousedown(function() {
$("#appointment").val("");
start = $(this).attr("id");
console.log($(this).attr('time'));
});
$(".today").mouseup(function() {
end = $(this).attr("id");
if(end<start) {
temp_start = start;
start = end;
end = temp_start;
} else {
end = end;
start = start;
}
console.log($(this).attr('time'));
$("div.today").slice((start-1),end).css('background', 'orange');
$("div#bubble").css('position', 'absolute');
$("div#bubble").css('top', $(this).position().top);
$("div#bubble").css('left', ($(this).position().left + 25));
$("div#bubble").show("slow");
start = 0;
end = 0;
});
});
</script>
</head>
<body>
<div id="bubble">
<form action="." method="post" accept-charset="utf-8">
<textarea name="appointment" id="appointment" rows="5" cols="20"></textarea>
<p><input type="submit" value="Plaats &rarr;"></p>
</form>
</div>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td class="times">
<div class="time">00:00</div>
<div class="time">01:00</div>
<div class="time">02:00</div>
<div class="time">03:00</div>
<div class="time">04:00</div>
<div class="time">05:00</div>
<div class="time">06:00</div>
<div class="time">07:00</div>
<div class="time">08:00</div>
<div class="time">09:00</div>
<div class="time">10:00</div>
<div class="time">11:00</div>
<div class="time">12:00</div>
<div class="time">13:00</div>
<div class="time">14:00</div>
<div class="time">15:00</div>
<div class="time">16:00</div>
<div class="time">17:00</div>
<div class="time">18:00</div>
<div class="time">19:00</div>
<div class="time">20:00</div>
<div class="time">21:00</div>
<div class="time">22:00</div>
<div class="time">23:00</div>
</td>
<td class="current">
<div id="1" time="2009-03-23 00:00" class="today noselect odd">&nbsp;</div>
<div id="2" time="2009-03-23 00:30" class="today noselect">&nbsp;</div>
<div id="3" time="2009-03-23 01:00" class="today noselect odd">&nbsp;</div>
<div id="4" time="2009-03-23 01:30" class="today noselect">&nbsp;</div>
<div id="5" time="2009-03-23 02:00" class="today noselect odd">&nbsp;</div>
<div id="6" time="2009-03-23 02:30" class="today noselect">&nbsp;</div>
<div id="7" time="2009-03-23 03:00" class="today noselect odd">&nbsp;</div>
<div id="8" time="2009-03-23 03:30" class="today noselect">&nbsp;</div>
<div id="9" time="2009-03-23 04:00" class="today noselect odd">&nbsp;</div>
<div id="10" time="2009-03-23 04:30" class="today noselect">&nbsp;</div>
<div id="11" time="2009-03-23 05:00" class="today noselect odd">&nbsp;</div>
<div id="12" time="2009-03-23 05:30" class="today noselect">&nbsp;</div>
<div id="13" time="2009-03-23 06:00" class="today noselect odd">&nbsp;</div>
<div id="14" time="2009-03-23 06:30" class="today noselect">&nbsp;</div>
<div id="15" time="2009-03-23 07:00" class="today noselect odd">&nbsp;</div>
<div id="16" time="2009-03-23 07:30" class="today noselect">&nbsp;</div>
<div id="17" time="2009-03-23 08:00" class="today noselect odd">&nbsp;</div>
<div id="18" time="2009-03-23 08:30" class="today noselect">&nbsp;</div>
<div id="19" time="2009-03-23 09:00" class="today noselect odd">&nbsp;</div>
<div id="20" time="2009-03-23 09:30" class="today noselect">&nbsp;</div>
<div id="21" time="2009-03-23 10:00" class="today noselect odd">&nbsp;</div>
<div id="22" time="2009-03-23 10:30" class="today noselect">&nbsp;</div>
<div id="23" time="2009-03-23 11:00" class="today noselect odd">&nbsp;</div>
<div id="24" time="2009-03-23 11:30" class="today noselect">&nbsp;</div>
<div id="25" time="2009-03-23 12:00" class="today noselect odd">&nbsp;</div>
<div id="26" time="2009-03-23 12:30" class="today noselect">&nbsp;</div>
<div id="27" time="2009-03-23 13:00" class="today noselect odd">&nbsp;</div>
<div id="28" time="2009-03-23 13:30" class="today noselect">&nbsp;</div>
<div id="29" time="2009-03-23 14:00" class="today noselect odd">&nbsp;</div>
<div id="30" time="2009-03-23 14:30" class="today noselect">&nbsp;</div>
<div id="31" time="2009-03-23 15:00" class="today noselect odd">&nbsp;</div>
<div id="32" time="2009-03-23 15:30" class="today noselect">&nbsp;</div>
<div id="33" time="2009-03-23 16:00" class="today noselect odd">&nbsp;</div>
<div id="34" time="2009-03-23 16:30" class="today noselect">&nbsp;</div>
<div id="35" time="2009-03-23 17:00" class="today noselect odd">&nbsp;</div>
<div id="36" time="2009-03-23 17:30" class="today noselect">&nbsp;</div>
<div id="37" time="2009-03-23 18:00" class="today noselect odd">&nbsp;</div>
<div id="38" time="2009-03-23 18:30" class="today noselect">&nbsp;</div>
<div id="39" time="2009-03-23 19:00" class="today noselect odd">&nbsp;</div>
<div id="40" time="2009-03-23 19:30" class="today noselect">&nbsp;</div>
<div id="41" time="2009-03-23 20:00" class="today noselect odd">&nbsp;</div>
<div id="42" time="2009-03-23 20:30" class="today noselect">&nbsp;</div>
<div id="43" time="2009-03-23 21:00" class="today noselect odd">&nbsp;</div>
<div id="44" time="2009-03-23 21:30" class="today noselect">&nbsp;</div>
<div id="45" time="2009-03-23 22:00" class="today noselect odd">&nbsp;</div>
<div id="46" time="2009-03-23 22:30" class="today noselect">&nbsp;</div>
<div id="47" time="2009-03-23 23:00" class="today noselect odd">&nbsp;</div>
<div id="48" time="2009-03-23 23:30" class="today noselect">&nbsp;</div>
</td>
<td>
<div id="1" time="2009-03-23 00:00" class="day noselect odd">&nbsp;</div>
<div id="2" time="2009-03-23 00:30" class="day noselect">&nbsp;</div>
<div id="3" time="2009-03-23 01:00" class="day noselect odd">&nbsp;</div>
<div id="4" time="2009-03-23 01:30" class="day noselect">&nbsp;</div>
<div id="5" time="2009-03-23 02:00" class="day noselect odd">&nbsp;</div>
<div id="6" time="2009-03-23 02:30" class="day noselect">&nbsp;</div>
<div id="7" time="2009-03-23 03:00" class="day noselect odd">&nbsp;</div>
<div id="8" time="2009-03-23 03:30" class="day noselect">&nbsp;</div>
<div id="9" time="2009-03-23 04:00" class="day noselect odd">&nbsp;</div>
<div id="10" time="2009-03-23 04:30" class="day noselect">&nbsp;</div>
<div id="11" time="2009-03-23 05:00" class="day noselect odd">&nbsp;</div>
<div id="12" time="2009-03-23 05:30" class="day noselect">&nbsp;</div>
<div id="13" time="2009-03-23 06:00" class="day noselect odd">&nbsp;</div>
<div id="14" time="2009-03-23 06:30" class="day noselect">&nbsp;</div>
<div id="15" time="2009-03-23 07:00" class="day noselect odd">&nbsp;</div>
<div id="16" time="2009-03-23 07:30" class="day noselect">&nbsp;</div>
<div id="17" time="2009-03-23 08:00" class="day noselect odd">&nbsp;</div>
<div id="18" time="2009-03-23 08:30" class="day noselect">&nbsp;</div>
<div id="19" time="2009-03-23 09:00" class="day noselect odd">&nbsp;</div>
<div id="20" time="2009-03-23 09:30" class="day noselect">&nbsp;</div>
<div id="21" time="2009-03-23 10:00" class="day noselect odd">&nbsp;</div>
<div id="22" time="2009-03-23 10:30" class="day noselect">&nbsp;</div>
<div id="23" time="2009-03-23 11:00" class="day noselect odd">&nbsp;</div>
<div id="24" time="2009-03-23 11:30" class="day noselect">&nbsp;</div>
<div id="25" time="2009-03-23 12:00" class="day noselect odd">&nbsp;</div>
<div id="26" time="2009-03-23 12:30" class="day noselect">&nbsp;</div>
<div id="27" time="2009-03-23 13:00" class="day noselect odd">&nbsp;</div>
<div id="28" time="2009-03-23 13:30" class="day noselect">&nbsp;</div>
<div id="29" time="2009-03-23 14:00" class="day noselect odd">&nbsp;</div>
<div id="30" time="2009-03-23 14:30" class="day noselect">&nbsp;</div>
<div id="31" time="2009-03-23 15:00" class="day noselect odd">&nbsp;</div>
<div id="32" time="2009-03-23 15:30" class="day noselect">&nbsp;</div>
<div id="33" time="2009-03-23 16:00" class="day noselect odd">&nbsp;</div>
<div id="34" time="2009-03-23 16:30" class="day noselect">&nbsp;</div>
<div id="35" time="2009-03-23 17:00" class="day noselect odd">&nbsp;</div>
<div id="36" time="2009-03-23 17:30" class="day noselect">&nbsp;</div>
<div id="37" time="2009-03-23 18:00" class="day noselect odd">&nbsp;</div>
<div id="38" time="2009-03-23 18:30" class="day noselect">&nbsp;</div>
<div id="39" time="2009-03-23 19:00" class="day noselect odd">&nbsp;</div>
<div id="40" time="2009-03-23 19:30" class="day noselect">&nbsp;</div>
<div id="41" time="2009-03-23 20:00" class="day noselect odd">&nbsp;</div>
<div id="42" time="2009-03-23 20:30" class="day noselect">&nbsp;</div>
<div id="43" time="2009-03-23 21:00" class="day noselect odd">&nbsp;</div>
<div id="44" time="2009-03-23 21:30" class="day noselect">&nbsp;</div>
<div id="45" time="2009-03-23 22:00" class="day noselect odd">&nbsp;</div>
<div id="46" time="2009-03-23 22:30" class="day noselect">&nbsp;</div>
<div id="47" time="2009-03-23 23:00" class="day noselect odd">&nbsp;</div>
<div id="48" time="2009-03-23 23:30" class="day noselect">&nbsp;</div>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment