Scroll accompanies mouse with datagrid
I'm new to the development business, and I have a problem that for me is complicated to solve, I have a grid that contains data in SQL and I have to use a scroll (scrollbar) when hovering the mouse on the side of the grid, I saw an example on this site http://jsbin.com/uninug/3/edit but I'm not knowing applied on my grid, can anyone help me?
I made an example that I even used but it did not work in my grid:
div class="scrollableContent" runat="server" visible="true"
<table>
<tr>
<th>Teste</th>
<th>valor</th>
<td>Funciona</td>
<td>sdlkfjsdlfkjsdflkjsdflkjsdflkjsdfljksdfksdlfjsdlfkjsdlfkjsadlkfjlksajdflksjdflçsdlfkjsd</td>
</tr>
<tr>
<td>Cagamba</td>
<td>342000000000000fuuuuuuuuuuuuuuuuupsdoijfpaoiwisdfsdfsdlfkjsdflkjsdlkfjsdlkfjksdjfklsjdfskjlfj</td>
</tr>
</table>
CSS code:
.scrollableContent {
position:relative;
/*overflow:scroll;*/
}
2 answers
This is a solution that could be applied, I did not use in my system but it could help me as well.
<script type="text/javascript">
$ (Document). Ready (function () {
$ ("# FazerScrollable"). SmoothDivScroll ({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
</script>
<div id="FazerScrollable">
img src="images/demo/field.jpg" alt="Field" id="field" />
img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
img src="images/demo/golf.jpg" alt="Golf" id="golf" />
img src="images/demo/river.jpg" alt="River" id="river" />
img src="images/demo/train.jpg" alt="Train" id="train" />
img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
img src="images/demo/dog.jpg" alt="Dog" id="dog" />
</div>
But thanks for helping me ...
You have to remove the CSS from the table's style and use it separately to create the overflow effect and it must contain table display: block
<style>
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
</style>
<div style="height: 250px;">
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
<td>body 4</td>
</tr>
</tbody>
</table>
</div>
In the example you show is a plugin you will have to use the provided plugin data Example
/*CSS*/
<style>
.thumbs-block {
position:relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 714px;
height:142px; /**/
}
.thumbs-block .thumbs {
white-space: nowrap;
text-align: center;
}
.thumbs-block .thumb {
display: inline-block;
padding: 5px;
margin: 5px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 120px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.thumbs{
position:absolute; /**/
margin-left:0; /**/
}
</style>
/*HTML*/
<!DOCTYPE html>
<html>
<head>
/*Injeta o script do jquery*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
This one will have 60px "mousemove padding" at each side:
<div class="thumbs-block">
<div class="thumbs">
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=1" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=2" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=3" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=4" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=5" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=6" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=7" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=8" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=9" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=10" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=11" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=12" width="120" height="120" /></a>
</div>
</div>
</body>
</html>
/*Jquery*/
<script>
$(function(){
var $bl = $(".thumbs-block"),
$th = $(".thumbs"),
blW = $bl.outerWidth(),
blSW = $bl[0].scrollWidth,
wDiff = (blSW/blW)-1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = blW-(mPadd*2), // The mousemove available area
mmAAr = (blW/mmAA); // get available mousemove fidderence ratio
$bl.mousemove(function(e) {
mX = e.pageX - this.offsetLeft;
mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
});
setInterval(function(){
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$th.css({marginLeft: -posX*wDiff });
}, 10);
});
</script>