5

i'm actually trying to build a products list inside a table. I already have the php code which takes data from db and places in the page but i'm stuck with jquery and javascript, i'm such a noob in that. I've been reading around some documentation and i went out with this script:

javascript

$(window).load(function(){
$('.principale').hover(function() {
    $(this).animate({
        width: 215, height: 350, margin: 0,
    }, 'fast');
/*  $(this).animate().css('box-shadow', '0 0 10px #44f')*/
    $(this).animate().css('box-shadow', '0 0 5px #000')

    }, function() {
        $(this).animate().css('box-shadow', 'none')
        $(this).animate({
            width: 210, height: 240, margin: 0,
        }, 'fast');
    });
});

css

.tabellainizio {
    margin-top:100px;
}
.bordini {
    border: 1px #DDD solid;
}
.principale {
    height: 240px;
    width: 210px;
    overflow: hidden;
}
.principale .contenitore {
    height: 240px;
    width: 210px;
    float: left;
    display: block;
}
.immagine {
    border: 1px solid maroon;
    text-align: center;
    margin: 15px;
    height: 168px;
    width: 168px;
    position:relative;
}
.content {
    display: none;
margin: 15px;
}
.contenitore:hover {
    width: 215px;
    height: 350px;
    margin: 0px;
    border: 1px solid black;
}
.contenitore:hover .content {
    display: block;
}
.contenitore:hover .immagine {
    position:relative;
}

you can see a demo here: http://jsfiddle.net/fozzo/EWJGJ/

But this isn't really what i need. When a div expands it should expand from the center over the others that should instead remain in their positions. I think this involve to use z-index and position in css as far as i read working examples but i really don't understand how to make it works. Any help would be apreciate.

Fabio
  • 23,183
  • 12
  • 55
  • 64

3 Answers3

5

Answer has been reworked based on the OP's clarification of his question

You will have to position .contenitore absolutely and position it from the top left corner of the parent container .principale. The parent should have a relative position while the content child should be absolutely positioned.

.principale {
    height: 240px;
    width: 210px;
    position: relative;
}
.principale .contenitore {
    background-color: #fff;
    height: 240px;
    width: 210px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

Also, you cannot use text-align: center to center the image element. Instead use margin: 15px auto:

.immagine {
    border: 1px solid maroon;
    margin: 15px auto;
    height: 168px;
    width: 168px;
    position:relative;
}

Upon the hover event, you change the size of the content and also animate the top and left positions:

$(window).load(function(){
$('.contenitore').hover(function() {
    $(this).animate({
        width: 300,
        height: 400,
        top: -80,  // Half the height difference 0.5*(400-240)
        left: -45  // Half the width difference 0.5*(300-210)
    }, 'fast');
    $(this).animate().css('box-shadow', '0 0 5px #000');
    $(this).css({
        zIndex: 100  // Change z-index so that is the positioned above other neighbouring cells
    });
}, function() {
    $(this).animate().css('box-shadow', 'none')
    $(this).animate({
        width: 210,
        height: 240,
        top: 0,
        left: 0
    }, 'fast');
    $(this).css({
        zIndex: 1
    });
});
});

See fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/

Terry
  • 63,248
  • 15
  • 96
  • 118
  • thanks for your answer. i checked your update but actually it seems other divs still move when one expand it doesn't look like it is expanding over them. – Fabio Mar 15 '13 at 15:25
  • That is because you are still changing the width of the div when the mouseover event is triggered, and you are adding a border. That is why. By expanding, what do you mean? Do you mean you want the entire cell to expand over neighbouring cells, or just the content? You need toy be more specific. – Terry Mar 15 '13 at 15:27
  • Sorry i wasn't clear at first stage, i want cell expand over the neighbouring cells and content as well (wich is hidden when cell is not expanded). – Fabio Mar 15 '13 at 15:31
  • Check this fiddle then - is it what you want? http://jsfiddle.net/teddyrised/EWJGJ/5/ (exaggerated the width change to show the effect) – Terry Mar 15 '13 at 15:32
  • this is pointing in the right way but cell should expand from the center in to the top and bottom as well as right and left in the same way. I hope to be clear. – Fabio Mar 15 '13 at 15:34
  • Then you will have to calculate the negative left offset (half the difference between the two widths) and the negative top offset (half the difference between the two heights). – Terry Mar 15 '13 at 15:38
  • ok that is what i was doing, what about content wich doesn't remain inside borders (i will manage later to fix height and width). – Fabio Mar 15 '13 at 15:40
  • this is exactly what i needed, i'm gonna place in the page, i really apreciate! – Fabio Mar 15 '13 at 15:47
  • There is the risk of the left most and right most cells expanding out of view - make sure you have sufficient whitespace around the table in your page design. Plus, if you want the expanded div to be fluid based on content height, it requires more extensive JS hacking. – Terry Mar 15 '13 at 15:48
  • thanks for the info, as i said i'm not such an expert here with js so i don't know how to handle that, it's like my first day of coding js. I can't even handle shadow to disapear with a fade while closing. – Fabio Mar 15 '13 at 16:27
4

you could actually do this without any js at all if you re-think the approach a little... The HTML markup is a bit different, but you would have much better performance if it was done with just css:

http://jsfiddle.net/adamco/GeCXe/

ul,li{
list-style:none;padding:0;margin:0;
}
ul{
    width:400px;
}
li, .item {
    width:100px;
    height:100px;   
}
li {
    float:left;
    margin:5px;
    position:relative;
}
.item {
    background-color: #eee;
    border:1px solid #ccc;
    position:absolute;
    z-index:1;
    -webkit-transition:all 0.1s ease-in-out;
}
.item:hover {
    width:110px;
    height:200px;
    z-index:2;
    -webkit-transform:translate(-5px,-5px);
    -webkit-box-shadow: 1px 1px 1px #888;
}
Adam Coulombe
  • 1,505
  • 1
  • 11
  • 11
1

I recommend not using tables to set the layout of the product listing. Using divs with set widths/heights is much more suited to your application. Using absolute positioning within boxes set to relative positioning will allow you to achieve what you're trying to do quite easily.

CSS:

   .outside {
        float: left;
        width: 150px;
        height: 150px;
        position: relative;
        padding: 10px;
    }

    .inside {
        position: absolute;
        border: 1px solid #000;
        width: 150px;
        height: 150px;
        background: #eee;
        z-index: 900;
    }

jQuery:

$('.inside').hover(

function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
});

Here's the full example: http://jsfiddle.net/wms6x/

levigideon
  • 173
  • 2
  • 9