Take the 2-minute tour ×

I have a menu formed from an unordered list with nested lists set to visibility: hidden, then shown on hover.

The menu is dynamic so I cant predict which could be close to the windows' edge, when a dropdown is invoked near the edge a scrollbar appears as it overflows the bounds of the window. What I need is to be able to add a class if this happens.

Any help would be gratefully received.

Edit: just done a brief fiddle of this issue jsfiddle.net/TP8v9

share|improve this question
You could help everybody who want to help you back by providing an example jsfiddle.net Not everything could be covered by expplanation –  kidwon Dec 21 '12 at 12:57
Here is the issue as a fiddle hope this helps jsfiddle.net/TP8v9 –  pixelator Dec 21 '12 at 15:45
add comment

3 Answers


if ($(document).width() > $(window).width()) {
    // Overflowing

Example JS Fiddle

share|improve this answer
add comment

When the mouseover event is triggered you can check the width and position of the dropdown that is about to appear and check if that is more than the width of the window.

share|improve this answer
add comment

Try something like this.

$(document).ready(function() {
        /* Assuming you want to add some_class to some_element
           if the width document width is more than window's
share|improve this answer
thanks for that, I am working with it, but found that you are missing a closing bracket after .width() eg should be .width()) as in Frédéric Hamidi's answer, but what I am looking for is something more specific, that would figure this out on mouseover –  pixelator Dec 21 '12 at 15:30
Then why don't you bind it to a mouse over event? –  kidwon Dec 21 '12 at 16:04
add comment

Your Answer


