diff --git a/cDBtable/cDBtable.css b/cDBtable/cDBtable.css index 2a59e895c5..5933187ef0 100644 --- a/cDBtable/cDBtable.css +++ b/cDBtable/cDBtable.css @@ -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;} diff --git a/cDBtable/cDBtable.js b/cDBtable/cDBtable.js index 08c332e2a7..5448f45bce 100644 --- a/cDBtable/cDBtable.js +++ b/cDBtable/cDBtable.js @@ -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 = '
'; + var thead = '
'; $.each(data[0], function(index,element){ thead += '

'+index+'

String

options
'; }); @@ -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); + }); + } + } + } }; diff --git a/stylesheets/table.css b/stylesheets/table.css index 5680e362cb..3cc554e191 100644 --- a/stylesheets/table.css +++ b/stylesheets/table.css @@ -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;} + diff --git a/table.html b/table.html index fdc7122ace..a18b3e6dd2 100644 --- a/table.html +++ b/table.html @@ -31,27 +31,29 @@
-
-
-

World Heritage sites 2010

-

PUBLIC

- - WHS - Natural - History - add tags - - -
-
-

delete table

- - - - +
+
+
+

World Heritage sites 2010

+

PUBLIC

+ + WHS + Natural + History + add tags + + +
+
+

delete table

+ + + + +