jquery - Horizontal scrollbar control for child div outside parent div/ floating div control -
developed replica of question:
if refer fiddle has 2 div's inside parent div, when parent div overflowed show vertical scrollbar right inner div's horizontal scrollbar goes inside overflowed vertically , horizontal scrollbar unavialable person use.
how can achieve horizontal scrollbar of inner div accessed if data more; seems me floating or creating replica of scrollbar outside parent div??
any ideas??
code:
<div class="parent"> <div id="left-order-panel"> <table id="edit-left"> <thead> <tr> <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th> <th>h5</th> </tr> </thead> <tbody> <tr> <td>h1</td> <td>h2</td> <td>h3</td> <td>h4</td> <td>h5</td> </tr> </tbody> </table> <table id="data-left"> <thead> <tr> <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th> <th>h5</th> </tr> </thead> <tbody> <tr>v1</tr> <tr>v2</tr> <tr>v3</tr> <tr>v4</tr> <tr>v5</tr> </tbody> </table> </div> <div id="right-order-panel"> <div id="right-order-inner"> <table id="order-right"> <thead> <tr style="height: 26px;"> <th data-lang="dashboard.order-projection" colspan="10">order projection</th> </tr> <tr style="height: 26px;"> <th colspan="4"> 2013 </th> <th colspan="4"> 2014 </th> </tr> </thead> <tbody> <tr style="height: 26px;"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr style="height: 26px;"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr style="height: 26px;"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr style="height: 26px;"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>4</td> <td>4</td> </tr> </tbody> </table> </div> </div>
you jquery.
just include library:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> see jsfiddle: http://jsfiddle.net/v4t4v/
using scroll function can detect when wrapper1 being scrolled , move wrapper2.
$(function(){ $(".wrapper1").scroll(function(){ $(".wrapper2") .scrollleft($(".wrapper1").scrollleft()); }); $(".wrapper2").scroll(function(){ $(".wrapper1") .scrollleft($(".wrapper2").scrollleft()); }); }); you can place bar outside div, @ top etc.
simply place want scrollbar (note wrapper's css must same width):
<div class="wrapper1"> <div class="div1"> </div> </div> you go on float scroller inside parent div css positioning.
Comments
Post a Comment