I am using jQuery to display a tabbed area and I have a table under the tabs. All of this, the tabs and the table, are significant.
I would like the table to have a scroll bar, so when you change the size of the container, the size of the scroll bar changes.
Now I have two problems.
1) I would like the scroll bar to extend from just below the tabs to the bottom of the tab container object. I would like this to be dynamic as the user resizes the window. But I cannot hold the bottom of the scrollbar exactly above the bottom of the container.
2) The entire container (tabs and table) is dragged. But this seems to disable the drag of the scroll bar (so you cannot drag the scroll - “elevator” .. you need to click on the arrows or “elevator shaft” of the scroll bar to move it. 'Handle' in jQuery and couldn't force it work.
To be thorough, I have included all the code so that you can reproduce the problem. Open this .htm file and try to stretch the window and try to work the scroller, and you will see my problems. stretching a large window makes the scroller far from the bottom of the container.
Any attempts to help are greatly appreciated!
→ , " ". , : - . ( , , . -, divs !)
<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>
<style type="text/css">
#grid-tabs {
width: 720px;
overflow-x: hidden;
overflow-y: hidden;
height: 185px;
}
.outer-container{
height: 100%;
position: relative;
top: -45px;
}
.filler{
height: 60px;
position: relative;
top: -60px;
}
.inner-container{
height: auto;
overflow-y: scroll;
position: relative;
top: -15px;
}
.scroll-area{
height: 70%;
position: relative;
top: 0px;
}
table{
border:1px solid #62bbe8;
}
td {
width: 50px;
}
</style>
</head><body>
<div id='grid-tabs'>
<ul>
</ul>
<div class='outer-container'>
<div class='filler'>
</div>
<div class='inner-container'>
<div class='scroll-area'>
<table class='content'>
<tbody>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
<tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
<tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
<tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
<tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
<tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
<tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
<tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
<tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery('#grid-tabs').tabs({collapsible:true}).draggable().resizable();
jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");
</script>
</body>