CODEWITHSUNDEEP
jqueryhtml
adrianton3
adrianton3

Reputation: 2358

Expand div in all directions using JQuery

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)?

Upvotes: 2

Views: 1194

Answers (2)

Bryan
Bryan

Reputation: 6752

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);
        });
    });

});    ​

Upvotes: 4

Chinmaya003
Chinmaya003

Reputation: 476

Its an overflow problem. Try adding 

$('.div').css('overflow','visible');

See this JSFiddle:

http://jsfiddle.net/CvhkM/2834/

Upvotes: 0

Related Questions