how to keep an element fully visible within a container after increasing element's size and exceeding container?
wow, that's quite a title.. :)
i am coding a horizontal slide-bar that contains an unordered list (of images) and when the cursor hovers over the images, they are animated via css to become bigger. this all works fine.. however, when the images are near the left or right extremity of the bounding container for the slider, they can get clipped horizontally as their size is increased via the animation. so basically, when someone hovers over an image that's near the edge of the slide-bar, the image gets bigger and gets cut off horizontally.
so i've been looking for the best jquery solution to ensure that the image remains positioned far enough away from the left/right edge of the slider box that when it is animated to become large none of the image is outside the boundary of the container (container = a div element).
i saw .position and also the collision detection in jquery-ui..
i don't have jquery-ui installed on my site and i want to keep the size down.. so ideally i'd like to do this with just jquery.
does anyone know of code where this has already been done?
or have any advice?
thanks