Menu
I was looking at this question and saw the reference to the iPhone game where you drag across the screen selecting letters as you go.
I was curious to see an implimentation of this in Javascript using tables. So you'd drag the mouse over each cell they would then become highlighted.
I'm not sure what the best method would be but I hope someone has a go. Someone attempted it here, but it doesn't really work.
Thank Cacoo for the sexy diagrams. It's like an online visio, really nice. Check it out ;)
315
You can click the first cell in the table row, and then press CTRL+SHIFT+RIGHT ARROW. Click the upper-left corner of the table. The following selection arrow appears to indicate that clicking selects the table data in the entire table.
Use the Go To command to quickly find and select all cells that contain specific types of data, such as formulas. Also, use Go To to find only the cells that meet specific criteria,—such as the last cell on the worksheet that contains data or formatting.
Here's a working prototype: http://jsfiddle.net/few5E/ Using jQuery for DOM hooking, but could easily be implemented with another framework.
Update: http://jsfiddle.net/Brv6J/ a slightly different version - the highlighted state will only change when you release and click again.
Update 2: http://jsfiddle.net/Brv6J/3/ - binding onselectstart so that text is not selected in IE.
A few relevant facts:
document. This is to ensure that it always runs. If the mouseup event was hooked on the table cell, it would not trigger if you released the mouse key with the mouse outside of the table. This state is tracked in isMouseDown.Full source code for reference:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css" media="screen"> table td { width:100px; height:100px; text-align:center; vertical-align:middle; background-color:#ccc; } table td.highlighted { background-color:#999; } </style> </head> <body> <table cellpadding="0" cellspacing="1" id="our_table"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { var isMouseDown = false; $("#our_table td") .mousedown(function () { isMouseDown = true; $(this).toggleClass("highlighted"); return false; // prevent text selection }) .mouseover(function () { if (isMouseDown) { $(this).toggleClass("highlighted"); } }) .bind("selectstart", function () { return false; // prevent text selection in IE }); $(document) .mouseup(function () { isMouseDown = false; }); }); </script> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
