...

View Full Version : controls not clickable after using position:absolute



vibes
08-23-2010, 11:43 AM
Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]



<script language="javascript" type="text/javascript">
var floating_header = function() {

this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

this.getXY = function(o) {
var y = 0;
var x = 0;
while (o != null) {
y += o.offsetTop;
x += o.offsetLeft;
o = o.offsetParent;
}
return { "x": x, "y": y };
}

this.setheader = function() {
if (window.header == undefined) {
floating_header();
}
var screenpos = this.scrollTop;
var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
if (screenpos > window.theady - 100 && screenpos < theady_max) {
window.header.style.position = 'absolute';
window.header.style.top = this.offsetTop;
window.header.style.display = 'block';
window.headerOffsetTop = this.offsetTop;
}
else {
if (screenpos != undefined && window.header != undefined) {
window.header.style.position = '';
window.header.style.top = '';
window.headerOffsetTop = undefined;
window.header = undefined;
}
else {
if (window.headerOffsetTop) {
window.header.style.position = 'absolute';
window.header.style.top = window.headerOffsetTop;
window.header.style.display = 'block';
}
}
}
}
document.getElementById("divcn").onscroll = this.setheader;
this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
};
floating_header();
</script>

vibes
08-23-2010, 11:45 AM
Sorry forgot attachement...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum