zhongjin
/
cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

scroll fixed in table

Browse Source
1.0
Javier Álvarez Medina 14 years ago
parent a7a984aaab
commit e2c548dbe3
4 changed files with 87 additions and 40 deletions
Show Stats Download Patch File Download Diff File

17
cDBtable/cDBtable.css
Unescape View File

@ -1,16 +1,19 @@
div.table_position table {position:relative; width:auto; margin:5px 0 0 0; padding:55px 0 0 0; background:white; table-layout:fixed;}
div.table_position table thead {position:absolute; top:0; left:0; padding:0; margin:0; z-index:20;}
div.table_position table thead tr {border-bottom:1px solid #D2D3D5;}
/*TABLE*/
div.table_position {float:left; margin:103px 0 0 0; padding:0; width:1000px; overflow-x:scroll; overflow-y:hidden; background:url('/images/dashboard/content_bkg.png') repeat 0 0;}
div.table_position table {position:relative; width:auto; margin:0; padding:55px 0 0 0; table-layout:fixed;}
div.table_position table thead {position:absolute; top:0; left:0; padding:5px 0 0 0; margin:0; z-index:20; background:white;}
div.table_position table thead tr {position:relative; float:left; padding:0 0 0 41px; border-bottom:1px solid #D2D3D5;}
div.table_position table thead tr th {background-color:#FFFFFF; background: -moz-linear-gradient(100% 100% 90deg, #FFFFFF, #DDDEE1); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DDDEE1));
border-right:1px solid #E2E3E7; text-shadow:0 1px white; -moz-box-shadow:inset 1px 1px 0 white; -webkit-box-shadow:inset 1px 1px 0 white;}
div.table_position table thead tr th div {position:relative!important; padding:13px; width:100px;}
div.table_position table thead tr th div.first {position:relative; width:40px; padding:0;}
div.table_position table thead tr th.first {position:absolute; top:0; left:0; width:40px; height:52px; z-index:30;}
div.table_position table thead tr th.first div {position:relative; width:40px; height:40px; padding:0;}
div.table_position table thead tr th h3 {font:bold 11px "Helvetica"; color:#727272; text-align:left; text-shadow:0 1px white;}
div.table_position table thead tr th p {font:normal 11px "Helvetica"; color:#B4B4B4; text-align:left; text-shadow:0 1px white;}
div.table_position table thead tr th a {position:absolute; right:10px; top:10px; height:14px; width:14px; margin:0; background:url('/images/tables/head_option_bkg.png') no-repeat 0 0; text-indent:-9999px; z-index:100;}
div.table_position table thead tr th a {position:absolute; right:10px; top:10px; height:14px; width:14px; margin:0; background:url('/images/tables/head_option_bkg.png') no-repeat 0 0; text-indent:-9999px; z-index:10;}
div.table_position table thead tr th a:hover {background-position:0 -14px;}
div.table_position table tbody {float:left; padding:53px 0 0 0 ;}
div.table_position table tbody tr {position:relative; float:left; height:39px; padding:0 0 0 40px;}
div.table_position table tbody {float:left; padding:53px 0 0 0;}
div.table_position table tbody tr {position:relative; float:left; height:39px; padding:0 0 0 41px;}
div.table_position table tbody tr td {padding:0; margin:0; background-color:#f0f1f5; background:-moz-linear-gradient(100% 100% 90deg, #f9fafe, #f0f1f5); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9fafe), to(#f0f1f5));
border:1px solid #E4E5E9; border-left:none; border-top:none; font:normal 13px "Helvetica"; line-height:13px; color:#666666; text-shadow:0 1px white; -moz-box-shadow:inset 1px 1px 0 white; -webkit-box-shadow:inset 1px 1px 0 white;}
div.table_position table tbody tr td:hover {cursor:pointer;}

59
cDBtable/cDBtable.js
Unescape View File

@ -11,6 +11,12 @@
// - Floating tHead
// - Floating first column
//Elements out of the plugin (Be careful with this!)
// - Blue header
// - div.table_position
// We are playing with these containers but they don't belong to the plugin
(function( $ ){
@ -35,7 +41,7 @@
table = $(this)[0];
methods.getData(defaults, 'next');
methods.keepSize();
});
},
@ -80,7 +86,7 @@
//Draw the data
if ($(table).html()=='') {
var thead = '<thead><tr><th><div class="first"></div></th>';
var thead = '<thead><tr><th class="first"><div></div></th>';
$.each(data[0], function(index,element){
thead += '<th width="100"><div><h3>'+index+'</h3><p>String</p><a href="#">options</a></div></th>';
});
@ -160,22 +166,28 @@
addScroll: function() {
$('div.table_position').scroll(function(ev){
//For moving first table column
$(table).children('tbody').children('tr').children('td.first').css('left',$('div.table_position').scrollLeft()+'px');
$(table).children('thead').children('tr').children('th.first').css('left',$('div.table_position').scrollLeft()+'px');
});
$(window).scroll(function(ev) {
ev.stopPropagation();
ev.preventDefault();
//For moving thead when scrolling
if ($(window).scrollTop()>162) {
$(table).children('thead').css('top',$(window).scrollTop()-167+'px');
if ($(window).scrollTop()>58) {
$('section.subheader').css('top',$(window).scrollTop()+'px');
$(table).children('thead').css('top',$(window).scrollTop()-60+'px');
} else {
$('section.subheader').css('top','58px');
$(table).children('thead').css('top','0px');
}
//For moving first table column
$(table).children('tbody').children('tr').children('td.first').css('left',$(window).scrollLeft()+'px');
//For paginating data
if (!loading) {
var difference = $(document).height() - $(window).height();
@ -236,6 +248,35 @@
event.returnValue = false;
}
});
},
keepSize: function(){
//Keep the parent table div with the correct width, onresize window as well
if ($(window).width() != $('div.table_position').width()) {
setTimeout(function(){
resizeTable();
},500);
}
$(window).resize(function(ev){
resizeTable();
});
function resizeTable() {
$('div.table_position').width($(window).width());
var parent_width = $(window).width();
var width_table_content = (($(table).children('thead').children('tr').children('th').size()-1)*128) + 60;
if (parent_width>width_table_content) {
var head_element = $(table).children('thead').children('tr').children('th:last').children('div');
var body_element = $(table).children('tbody').children('tr');
$(head_element).width(128 + parent_width-width_table_content);
$(body_element).each(function(index,element){
$(element).children('td:last').children('div').width(128 + parent_width-width_table_content);
});
}
}
}
};

7
stylesheets/table.css
Unescape View File

@ -1,5 +1,6 @@
body {position:relative; background:url('/images/common/header_bkg.jpg') repeat-x center 0 #2D3451;}
body, html {height:100%;} /*table hack*/
/*HEADER*/
header {width:100%; height:58px; margin:0 auto; background:none; z-index:100;}
header a.logo {float:left; width:70px; height:15px; margin:23px 0 0 40px; background:url('/images/common/logo.png') no-repeat 0 0; text-indent:-9999px;}
@ -8,7 +9,8 @@ header p.session a {text-decoration:underline; color:white;}
header p.session a:hover {}
/*SUBHEADER*/
section.subheader {width:100%; height:103px; background:url('/images/common/sub_header_bkg.png') repeat-x 0 0; z-index:100;}
section.subheader {position:absolute; top:58px; left:0; width:100%; height:103px; background:url('/images/common/header_bkg.jpg') repeat-x center -58px #2D3451; z-index:100;}
section.subheader div.mamufas {float:left; width:100%; background:url('/images/common/sub_header_bkg.png') repeat-x 0 0;}
section.subheader div.left {position:relative; float:left; width:700px; height:88px; padding:15px 0 0 0; margin:0 0 0 40px;}
section.subheader h2 {float:left; width:auto; font:bold 21px Arial; color:white;}
section.subheader p.status {float:left; width:auto; padding:2px 7px; margin:4px 0 0 10px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; font:bold 11px Arial; color:white; background:#6FBE6F;}
@ -36,8 +38,7 @@ section.subheader div.right span.paginate a.previous {margin:0 3px 0 0; backgrou
section.subheader div.right span.paginate a.next {background:url('/images/icons/right_button.png') no-repeat 0 0;}
section.subheader div.right span.paginate a:hover {background-position:0 -23px;}
/*TABLE*/
div.table_position {float:left; margin:0; background:white;}

44
table.html
Unescape View File

@ -31,27 +31,29 @@
</header>
<section class="subheader">
<div class="inner_subheader">
<div class="left">
<h2>World Heritage sites 2010</h2>
<p class="status">PUBLIC</p>
<span class="tags">
<a href="#">WHS</a>
<a href="#">Natural</a>
<a href="#">History</a>
<a class="add" href="#">add tags</a>
</span>
<ul class="tab_menu">
<li class="selected"><a href="#" onclick="changeTo(event,'table')">Table</a></li>
<li><a href="#" onclick="changeTo(event,'map')">Map</a></li>
</ul>
</div>
<div class="right">
<p class="settings"><a class="delete" href="#">delete table</a></p>
<span class="paginate">
<a class="next" href="#">Next column</a>
<a class="previous" href="#">Previous column</a>
</span>
<div class="mamufas">
<div class="inner_subheader">
<div class="left">
<h2>World Heritage sites 2010</h2>
<p class="status">PUBLIC</p>
<span class="tags">
<a href="#">WHS</a>
<a href="#">Natural</a>
<a href="#">History</a>
<a class="add" href="#">add tags</a>
</span>
<ul class="tab_menu">
<li class="selected"><a href="#" onclick="changeTo(event,'table')">Table</a></li>
<li><a href="#" onclick="changeTo(event,'map')">Map</a></li>
</ul>
</div>
<div class="right">
<p class="settings"><a class="delete" href="#">delete table</a></p>
<span class="paginate">
<a class="next" href="#">Next column</a>
<a class="previous" href="#">Previous column</a>
</span>
</div>
</div>
</div>
</section>

Write Preview
Loading…
Cancel
Save