Jquery hover event between mousedown and mouseup - possible?
If you fancy in Microsoft paint you can click and hold to paint in an area, id would like to do a similar thing, but adding a class to the cells in the table:
(note that this is not for drawing / art, just for explaining it!)
the following doesn't work ...
$(function(){
$('td').mousedown(function(){
console.log('down');
$('td').bind('hover', function(){
$(this).addClass('booked');
});
})
$('td').mouseup(function(){
$('td').unbind('hover');
});
})
+2
a source to share
3 answers
No hover event. Why not just add the class to the "mousedown" handler and remove it on "mouseup"?
If you want the class to be added only after a delay, set the timeout to "mousedown" to add the class, and cancel the timeout on "mouseup" (and also remove the class).
$(function(){
var timeout;
$('td')
.mousedown(function(){
var $cell = $(this);
timeout = setTimeout(function() {
$cell.addClass('booked');
}, 1000);
})
.mouseup(function(){
cancelTimeout(timeout);
$(this).removeClass('booked');
});
});
+1
a source to share
Take a look at jQuery UI Selectable which does something similar to what you described. Take a look at the demo . An example of a simple implementation:
<script type="text/javascript">
$(function() {
$("#selectable").selectable();
});
</script>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
0
a source to share