Scroll accompanies mouse with datagrid

Asked

Viewed 253 times

0

I’m new in the development industry, 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 (scroll bar) when passing the mouse on the side of the grid, I saw an example on this site http://jsbin.com/uninug/3/edit but I am not knowing applied on my grid, someone can help me?

I made an example that I used but it didn’t 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;*/    
}
html5 css3

2 answers

1

This is a solution that could be applied, not used in my system but could help me too. 

<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 ...

0

You have to remove the css from the table’s style and use it separately to create the overflow effect and 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 plugin data provided 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>

  • I had seen this example there on another site and it didn’t help me because my problem was using a scroll inside a gridview.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.