Question

I have a grid of divs, and each has content in it: some text, a picture and a [x] button of some sort. These divs all have position set to absolute (it’s a irregular grid, that’s why I chose to go with absolute).

What I want to do now is to have them expand when the mouse cursor is over them (and put it on top of other overlapping divs from the grid). I managed to do this here: http://jsfiddle.net/CvhkM/2833/ . The problem is that I want it to revert to its initial position and dimensions (each div has its own position and dimensions) and it won’t work for some reason… (note that this is my first time in jQuery). Oh, and might I add, how would I restrict it not to expand outside of a region (a rectangular region)?

Answer 1

The overflow issue mentioned above definitely helps, and you can do that in your CSS. I would personally do overflow : hidden or overflow : auto, so that your overflowed content remains hidden until the box is hovered over.

I’ve added code below to help you get your code to become dynamic, you can free to adjust the number on the hover animation as you please, and the multiplying factor, this is getting you a bit further in adjusting the size according to the original dimensions 🙂

var multiplying_factor = 1.5;
$(function() {
    $('.div').each(function() {
        $(this).data('original_position', $(this).offset());
        $(this).data('original_width', $(this).width());
        $(this).data('original_height', $(this).height());

        $(this).hover(function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor / 4),
                top    : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor / 4),
                width  : $(this).data('original_width') * multiplying_factor,
                height : $(this).data('original_height') * multiplying_factor
            }, 300);
        },function() {
            $(this).stop().animate({
                left   : $(this).data('original_position').left,
                top    : $(this).data('original_position').top,
                width  : $(this).data('original_width'),
                height : $(this).data('original_height')
            }, 300);
        });
    });

});    ​