Daydaysotbamy
New Member
I am trying to highlight cells with user preferred colors. A user will select a cell and drag mouse to select multiple cells that they want to color with the selected color. How can I trigger the javascript function that lives in a separate file (i know I have to include the file to html file, I have done that already) when user click and drag the mouse without using inline event handlers.The code is there to drag and select but I would like to call this function when user click and drag cells. Before I was using google.setOnLoadCallBack to call this function, but that would call it only once. I would like user to have multiple selections. I hope I made sense.HTML\[code\]<section id="importance"> <label class="green">Green</label> <input type="radio" name="importance" value="http://stackoverflow.com/questions/14492540/green"> <label class="yellow">Yellow</label> <input type="radio" name="importance" value="http://stackoverflow.com/questions/14492540/yellow"> <label class="orange">Orange</label> <input type="radio" name="importance" value="http://stackoverflow.com/questions/14492540/orange"> <label class="red">Red</label> <input type="radio" name="importance" value="http://stackoverflow.com/questions/14492540/red"></section><table cellpadding="0" cellspacing="0" 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>\[/code\]Javascript\[code\]function select_multiple() { var isMouseDown = false; // id for all the cells that were selected at the same time var colorGroupId = Math.floor(Math.random() * 1000); var highlight = find_importance_color(); $("#our_table td") .mousedown(function () { isMouseDown = true; $(this).toggleClass(highlight); $(this).attr("data-highlightedId", colorGroupId); return false; // prevent text selection }) .mouseover(function () { if (isMouseDown) { $(this).addClass(highlight); } }); $("#our_table td") .mouseup(function (event) { isMouseDown = false; // time_importance(event); });}function find_importance_color() { return $('#importance input[name=importance]:checked').val();}\[/code\]CSS\[code\].green { background-color: green;}.yellow { background-color: yellow;}.orange { background-color: orange;}.red { background-color: red;}table td { width:100px; height:100px; text-align:center; vertical-align:middle; background-color:#ccc; border:1px solid #fff;}\[/code\]