Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question controls not clickable after using position:absolute

    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...]

    Code:
    <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>

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorry forgot attachement...

    Sorry forgot attachement...
    Attached Thumbnails Attached Thumbnails controls not clickable after using position:absolute-capture.jpg  


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •