How do I reposition an HTML element to prevent a collision with browser's edge?

Question

5.00/5 (1 vote)

See more:

I have a CSS based drop-down menu, which uses nested UL elements. It works great.

My issue is that if the browser is towards the minimum width of the page, the right-most menu will "collide" with the browser's edge and get rendered partially outside the visible window. When the UL gets displayed, I would like to see if there is enough room and, if not, shift it far enough to the left so that it can be rendered completely.

The relevant CSS is:

CSS

#menu-table td > ul > li > ul { /* Drop-down */
    position:absolute;
    z-index:500;
    display:none;
    margin-left:-1px;
}

#menu-table td > ul > li:hover > ul { /* When top level item is hovered */
    display:block;
}

I am thinking that I could intercept the LI element's onMouseEnter event, assuming that it gets processed before the :hover style gets applied. But I am not sure how to calculate the position of the UL or its relative position to the window's right edge.

If it makes any difference, I am using CSS2 and XHTML 1.1. I know this can be done as I've seen it. Any suggestions?

Posted 26-May-10 7:32am

Gregory Gadow

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Media2r · Answer 1 · 2010-07-06T05:29:00

Hi,

if I understand your question correctly, I would suggest you look int the following:

myElement.offsetWidth (for determining the width in pixels of your element)
myElement.offsetLeft (for determining the left edge in pixels of your element)

then simply add those two, check if the sum is smaller than the available screen realestate (also, take into account if horisontal scroll has been applied to the document). If it is not smaller, offset your elements position by however much you deem appropriate.

Hope this helps,

//L