Can I detect when a page extends to the right with javascript?

Question

I am using a javascript plugin called pop (http://pop.seaofclouds.com/) to have a drop down menu.

It works fine but I want to show long strings so I need the drop down box to be wide rather than long. I would love to be able to make it so that if the box that appears extends the page to the right then the box would stretch to the left.

[ Button ]
[ This is an example of the long string in the box that appears ]

                                                                   [ Button ]
[ An example of the box extending to the left so it doesn't extend the page ]

So is it possible to detect if the page extends with javascript and then change it so the box drops to the left?

Or am I thinking about this wrong and there is a better way?

Answer 1

Yes, this is possible. You just need to check the position of the box on the page, the size of the box, and the size of the viewport. If the left coordinate of the position added to the width puts you beyond the viewport, then you open open to the left. Otherwise, to the right.

You can do similar calculations for pop-up "help bubbles" and things like that, and involve the vertical position as well.

The jQuery functions "outerWidth()" and "offset()" get you the numbers to work with.