Published on: 11/17/13 12:55 PM

Today we will see how to hide and show scroll bar of the table in div by Jquery mouse events

what I will do here , is I have created one table in div section for showing scroll bar I reduced the size of the div and when i will move the mouse on that div i will show the scroll and when will leave the mouse from div then hide scroll

HTML

[sourcecode language=”csharp”]
<div id="tableDiv" style="overflow: auto; width: 300px; height: 200px;">
<table border="1" id="table">
<tr>
<td>first TR first TD</td>
<td>first TR second TD</td>
<td>first TR third TD</td>
<td>first TR forth TD</td>
<td>first TR fifth TD</td>
<td>first TR sixth TD</td>
</tr>
<tr>
<td>second TR first TD</td>
<td>second TR second TD</td>
<td>second TR third TD</td>
<td>second TR forth TD</td>
<td>second TR fifth TD</td>
<td>second TR sixth TD</td>
</tr>
<tr>
<td>third TR first TD</td>
<td>forth TR second TD</td>
<td>fifth TR third TD</td>
<td>sixth TR forth TD</td>
<td>seventh TR fifth TD</td>
<td>eigth TR sixth TD</td>
</tr>
</table>
</div>
[/sourcecode]
[sourcecode language=”csharp”]
/*————————————
show scroll bar on mouse move and again hide on mouse leave */
$("#tableDiv").mousemove(function () {
$(this).css("overflow", "auto");

});
$("#tableDiv").mouseleave(function () {
$(this).css("overflow", "hidden");
});
[/sourcecode]

for more visit ,
Demo