[SOLVED] JavaScript document/screen properties (I think)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

[SOLVED] JavaScript document/screen properties (I think)

Post by Chris Corbyn »

I've created a nifty little "Start Menu" kind of thing that works just like you'd see in windows. It contains many submenus that open when hovered.

There's a bug with it though :(

If you hover over a sub menu that's close to the bottom of the screen, the contents of the <div> spill off the edge of the screen and they are inaccessible. I need to somehow detect if my div is in full view or if some off it is overflowing the screen.... that way I can adjust the position/size etc accordingly.

Anyone know if it can be done? At present, since the content of the menus is dynamic I don't know the actual height of the <div> which makes this tricker (I could code this in if I need to though).

Unfortunately I can't post the code I've got so far for licensing reasons :( although it shouldn't really be an issue in knowing the answer.

Many thanks,

d11
Last edited by Chris Corbyn on Mon Dec 12, 2005 6:36 am, edited 1 time in total.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

combination of { screen.availWidth, screen.availHeight, element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight } may help. Although I remember facing a glitch with objects that were hidden, i.e. they didn't report width/height or something like that... Keep me posted tho, how it comes along ;)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

n00b Saibot wrote:combination of { screen.availWidth, screen.availHeight, element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight } may help. Although I remember facing a glitch with objects that were hidden, i.e. they didn't report width/height or something like that... Keep me posted tho, how it comes along ;)
They will report the width and height (only if actually applied in the CSS) so that's not an issue. I was think along your lines too so I'll do some calculations for the height and then try it out.

I'll post back. Thanks :D
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

You were on the same wavelength as my thinking Mr. saibot ;)

In order to work across multiple browsers I ended up using a combination of window.innerHeight and document.body.offsetHeight (and width) to determine the dimensions available.

I then calculated the height of the div using JavaScript (since the CSS was being rather buggy if I hard-coded the height in there).

I could then determine the cursor position (that's where the <div> appears at vertically) and do some calculations to check if the <div> was out of range. By adjusting the position accordingly everything now works a peach :D

I have to say, this menu is one of my proudest DHTML creations to date :lol:

Thanks :)
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

d11wtq wrote:I have to say, this menu is one of my proudest DHTML creations to date
I usually end up with DHTML menus in abt. 5 outta 9 sites I code. So guess it was just matter of being more in the habit :P and it looks kinda neat too...
Post Reply