\[code\]<html><head><link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/SmallTest/jquery.jscrollpane.css" media="all" /><link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/SmallTest/jquery-ui-1.8.18.custom.css" /><script type="text/javascript" src="file:///C:/Users/Documents/SmallTest/jquery-1.7.1.js"></script><script type="text/javascript" src="file:///C:/Users/Documents/SmallTest/jquery.jscrollpane.min.js"></script><style type="text/css">.scroll-pane{ width: 100%; height: 60px; overflow: auto; white-space: nowrap;}.horizontal-only{ height: auto; max-height: 200px;}table{ border-collapse:collapse;}table,th, td{ border: 1px solid black;}</style><script type="text/javascript"> $(document).ready(function() { $('.scroll-pane').jScrollPane(); $(this).build();}); var map1 = { "iDate":"test_value1", "iName":"test_value2" , "iFile":"test value three 3 " }; var map2 = { "iDate":"nexttest_value1", "iName":"nexttest_value2", "iFile":"next test value three 3" }; var list = new Array( map1, map2 );list[0] = map1;list[1] = map2;jQuery.fn.build = ( function() { jQuery.each( list, function( index, map ) { var trTag = $( "<tr></tr>" ).appendTo($( "#hpTable > tbody")); jQuery.each( map, function( key, value ) { var tdTag = $( '<td/>' ).appendTo( trTag ); var divTag = $( "<div class='scroll-pane horizontal-only' id='container' style='vertical-align: top'/>" ).appendTo( tdTag ); $( "<p>" + value + "</p>" ).appendTo( divTag ); }); }); $( '#hpTable' ).show(); $('.scroll-pane').jScrollPane();});</script> </head><body><table id="popFields" width="10%"><thead></thead><tbody> <tr><td> <select id="numberList"> <option value="http://stackoverflow.com/questions/9946342/1" selected>one</option> <option value="http://stackoverflow.com/questions/9946342/2">two</option> <option value="http://stackoverflow.com/questions/9946342/3">three</option> </select> </td> <td><div id="firstDiv" class="scroll-pane horizontal-only"><p>this is a test for the scrollbar div tag. ljilkjlkjlkj lkjl ljfh gfyt gyjhy uyg jhgj kjhg jhgu jfse dgf fdrh gfhtf hgf gfh td ghtffg ug fghgf.</p></div></td> </tr></tbody></table><br><table id="hpTable" cellpadding="0" width="30px"><thead><tr> <th>Date</th> <th>Name</th> <th width="2%">File</th> </tr></thead><tbody></tbody></table></body></html>\[/code\]Hello all, I'm back again and getting better with JQuery. Here's a small example (shown above) of my issue. I'm using this wonderful jScrollPane plugin, but for some reason I can't get two different tables to work...if I use it on one table it works fine. However, when I have two tables, I can't get the scrollbars to show up.I want to be able to allow each table the ability to have each cell that can have a scrollbar, if the text is too long for a cell, the cell will show the scrollbar.I tried to play around with the size of the table and cells, but that seem to make no difference. Using different div IDs didn't seem to have any impact either.Thanks in advance for reviewing my post and any help is appreciated! Happy Friday!
jscrollpane works for only one table
- Thread starter Molotov
- Start date