Question

I’d like to have elements on my page that expand on mouseover events. That’s working great already, but when the elements are too close to the edge of their containing div, parts of the expanded section aren’t visible (or show up outside the container).

How can I calculate a corrected position that would put the expanded element completely within the div? The expanding elements can have an arbitrary size, and so can the surrounding div.

Answer 1

If this code is static you can simply manually set the width of the containing and the contained div manually with CSS. However, if size of the containing div is variable based upon content you may want to use javascript (I like jQuery) to grab the width of the containing div and use that value as the final expand point of the contained div.

$('.contained_element').css("width", $('.container_element').width());

that jQuery will set the width of the contained element to the width of the containing element. jQuery’s $(element).width(); can be used to grab the width of any element and use that value elsewhere in your code.