DOM: styles and attributes for NS and IE

[toolkit]

Hi there,

I am using a hidden to div to create a small popup. I wish to make sure that the popup is not clipped when it is displayed near the edge of the page. My code looks like this:

// initial position
if( ns6 ) {
    div.style.left = pageXOffset + e.clientX;
    div.style.top  = pageYOffset + e.clientY;
} else if( ie5 ) {
    div.style.pixelLeft = document.body.scrollLeft + window.event.clientX;
    div.style.pixelTop  = document.body.scrollTop  + window.event.clientY;
}

// some processing of div contents...

if( ns6 ) {
    // what goes here?
else if( ie5 ) {
    if( div.style.pixelLeft + div.clientWidth > document.body.clientWidth )
        div.style.pixelLeft -= div.clientWidth;
    if( div.style.pixelTop + div.clientHeight > document.body.clientHeight )
        div.style.pixelTop -= div.clientHeight;
}

I need to find NS equivalents of:
[ol]
[li]div.clientWidth
[li]document.body.clientWidth
[/ol]
I believe (2) could use self.innerWidth for NS?

Cheers, Neil

 

[baad]

1. try div.offsetWidth (& for ie5+ as well)
2. try what you wrote, if that won't work we'll see (just lazy to check) Victor

 

[toolkit]

vituz

Yep, I just discovered offsetWidth and offsetHeight !!

This looks to work for both browsers

Cheers, Neil

 

[toolkit]

No unfortunately, offsetWidth is used differently in IE5 and NS6. Say for example that I have the following:

mouse position:    700,500
hidden div width:  200
hidden div height: automatically calculated
page dimensions:   800,600

With IE5,

div.offsetWidth

will be 200. However, with NS6 this property is truncated so that

( parseInt( div.style.left ) + div.offsetWidth ) = self.innerWidth )

, in this case 100. If only there were some property that defined the real dimensions of the div :-(

Cheers, Neil