5

What I'm trying to achieve is this animation

enter image description here

Link to the animation is Material Design

What am I missing?How can I achieve the above result without using position:absolute for the items

what I've done so far

HTML:

<div class="product-list  " id="product_list">  
    <div class="item ">
        <a href="#" data-id="228">
            <div class="item-top">
                <img width="211" height="165" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26">                    
            </div>
            <div class="item-bottom">
                <div class="item-product-title">Unicity Activate</div>
            </div>
        </a>
    </div>

    <div class="item ">
        <a href="#" data-id="227">
            <div class="item-top">
                <img width="165" height="193" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product55_24">                    
            </div>
            <div class="item-bottom">
                <div class="item-product-title">Lean Complete</div>
            </div>
        </a>
    </div>

    <div class="item ">
        <a href="#" data-id="223">
            <div class="item-top">
                <img width="245" height="215" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product44_21">                    
            </div>
            <div class="item-bottom">
                <div class="item-product-title">Bios Life D</div>
            </div>
        </a>
    </div>
</div>

CSS

#product_list {
    right: 0;
    left: 0;
    text-align: center;
}
.product-list .item {
    display: inline-block;
    position: relative;
    border-radius: 3px;
    margin: 4px;
    overflow: hidden;
    text-align: start;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
    -webkit-transition: border-radius 500ms cubic-bezier(0.4, 0, 0.2, 1), width 500ms cubic-bezier(0.4, 0, 0.2, 1), height 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.item-top {
    width: 200px;
    height: 200px;
}
.item-bottom {
    padding: 8px;
    line-height: 1.5;
}

Javascript

$('.item').on('click','a',function(e){
    e.preventDefault();
    var target=$(e.currentTarget);
    var par=target.parent();
    par.css({width:par.width()+'px',height:par.height()+'px'});
    //par.css({height:'300px',width:'500px'});
    par.animate({height:'300px'},{"queue": false, "duration":500}).animate({width:'500px'},500,'linear'); par.css({transform:'translate('+0+'px,'+50+'px)scale(1.1,1.1)'});
    par.css({'transform-origin':'0,0',zIndex:'9999'});
});

Fiddle

11
  • 1
    Hint: The example is working with two different boxes. The big box is hidden until you click the smaller box. That would fix your positioning problem. Aug 18, 2014 at 12:41
  • @Doodlebunch Should I make the Big box position absolute, and then anmimate it Aug 18, 2014 at 12:45
  • Why don't you simply use the polymer framework?
    – idmean
    Aug 18, 2014 at 12:51
  • @wumm Because the framework doesn't work in FF and IE Aug 18, 2014 at 12:51
  • At me this animation does work in FF. And according to the FAQ they support the most recent versions of Chrome, Safari, Internet Explorer, and Firefox.
    – idmean
    Aug 18, 2014 at 12:55

2 Answers 2

6

This may help you: http://jsfiddle.net/holp/vkgLdv38/1

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
.product-list { list-style: none; padding: 0 }
.product-list  * { font-family: 'Source Sans Pro', sans-serif; }
.product-list li {
    width: 200px;
    float: left;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    overflow: hidden;
    cursor: pointer;
}
.product-list li div {
    width: 200px;
    height: 200px;
    z-index: 10;
}
.product-list li h3 {
    margin: 10px;
    z-index: 1;
}
.product-list li p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 10px;
    height: 20px;
    z-index: 1;
}
.place {
    visibility: hidden;
}

HTML

<ul class="product-list">  

<li>
<div style="background-color: rgb(246, 255, 118)"></div>
<h3>Pinapple</h3>
<p>Pellentesque mattis vestibulum semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ullamcorper lorem lacus, a mattis nibh scelerisque in. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>

<li>
<div style="background-color: rgb(167, 143, 212)"></div>
<h3>Grape</h3>
<p>Curabitur ullamcorper, nibh ac faucibus varius, felis nisl lacinia tellus, a mattis tellus augue in urna. Phasellus ac ornare nisi. Aliquam aliquet facilisis vulputate. Nullam accumsan orci quis lorem cursus, at luctus mauris sagittis.</p>
</li>

<li>
<div style="background-color: rgb(128, 177, 211)"></div>
<h3>Blueberry</h3>
<p>Mauris quis pharetra nunc. Nulla pretium diam eros, nec congue diam tempor sed. Quisque hendrerit risus a augue ultrices imperdiet. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>

<li>
<div style="background-color: rgb(224, 141, 170)"></div>
<h3>Strawberry</h3>
<p>Aliquam a semper orci. Integer dictum lacus a tellus porta hendrerit. Mauris vel est pretium, gravida eros quis, dignissim massa. Integer mollis vitae enim sit amet mattis. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>

</ul>

JS

chosen = null;

$('li').click(function() {

    var object = $(this);
    var margin = object.css('margin').replace(/[^-\d\.]/g, '');
    var scroll = $(window).scrollTop();

    if (chosen == null) {

    var ft = ($(window).height() / 2) - (300 / 2) - margin; var fl = ($(window).width() / 2) - (600 / 2) - margin;

    $('.product-list li').not(this).css('cursor','default');
    object.clone().insertAfter(object).addClass('place');
    object.css({'position':'fixed','top': object.offset().top - margin - scroll,'left': object.offset().left - margin}).animate({'top':ft, 'left':fl,'width':'600px','height':'300px'});
    object.children('div').animate({'width':'300px','height':'300px'});
    setTimeout( function(){
        object.children('div').css({'position':'absolute','top':'0','left':'0'});
        object.children('h3').css({'position':'absolute','top':'0','left':'0'}).animate({'left':'300px'});
        object.children('p').css({'position':'absolute','top':'40px','left':'0','white-space':'normal','width':'280px','height':'240px'}).animate({'left':'300px'});
    },300);
    chosen = this;


    } else if (chosen == this) {

    var ph = $('.place'); var pht = ph.offset().top - margin - scroll; var phl = ph.offset().left - margin; var phw = ph.width(); var phh = ph.height();

    object.children('p').animate({'left':'0'});
    object.children('h3').animate({'left':'0'});
    setTimeout( function(){
        object.children('p').removeAttr('style');
        object.children('h3').removeAttr('style');
        object.children('div').css({'position':'','top':'','left':''}).animate({'width':'200px','height':'200px'});
        object.animate({'top':pht, 'left':phl,'width':phw,'height':phh});
        setTimeout( function(){
            object.children('p').removeAttr('style');
            object.children('h3').removeAttr('style');
            object.children('div').css({'width':'','height':'','left':''});
            ph.remove();
            object.removeAttr('style');
            $('.product-list li').not(this).css('cursor','');
            chosen = null;
        },500);
    },300);

    }
});
5
  • Your code is working, but you clearly didn't test it. click on new element while other is open to find out.
    – Linial
    Aug 20, 2014 at 23:55
  • Well done, consider for learning purposes to keep the variables as readable as possible(ie. changing el to element).
    – Linial
    Aug 21, 2014 at 8:59
  • Your answer is good, but with little bit of bug, first open and close an element and then scroll the page a little then open and close an element Aug 22, 2014 at 5:13
  • You are right. I forgot to consider this, also checked another issue with the margins... Check it out Aug 22, 2014 at 17:42
  • This is an Awesome structure of work. It definitely works in a Desktop set up.<br> However, when veiw on a Mobile device width, the Landscape pop seems to overlap The screen width of the device. as in it goes outside of the screen width. any way we can achieve a Material Design behaviour with this. Thanks
    – Lemdor
    Feb 18, 2015 at 10:19
5
+50

I've made this jsfiddle

It may not be the prettiest code, but it does exactly what you want. If you want to add more expandable boxes, just change the img animation's left property in jquery. I would make it perfect, however this costs me more time. You can play with it as you wish.

HTML

<div class="product-list" id="product_list">
<div class="tr">
    <div class="item "> <a href="#" data-id="228">
    <div class="item-top"><img src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26"/>                  </div>
                <div class="item-bottom">
                    <div class="item-product-title">Unicity Activate</div>
                </div>
            </a>

    </div>
    <div class="item "> <a href="#" data-id="227">
    <div class="item-top"><img style="left:300px;" src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product55_24"/>                  </div>
                <div class="item-bottom">
                    <div class="item-product-title">Lean Complete</div>
                </div>
            </a>

    </div>
    <div class="item "> <a href="#" data-id="228">
    <div class="item-top"><img src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26"/>                  </div>
                <div class="item-bottom">
                    <div class="item-product-title">Bios Life D</div>
                </div>
            </a>

    </div>
</div>

CSS

    #product_list {
    text-align: center;
    position:relative;
    width:100%;
    margin:0px;
    padding:0px;
}
.tr {
    position:relative;
    margin:0px;
    border: 5px solid transparent;
}
.product-list .item {
    position: absolute;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.item-top img {
    width: 200px;
    height: 200px;
}
.item-bottom {
    padding: 8px;
}
.item-bottom .item-product-title {
    text-align:left;
}
.item a {
    color:black;
    text-decoration:none;
    background-color:blue;
}

JS

var myPadding = 10;
var myWidth = 0 - myPadding;
var myHeight = 0;
var numRows = $(".tr").length;
var allItemHeights = [];
var allItemWidths = [];
var allItemLefts = [];
var allItemsTextLefts = [];
var allItemsTextTops = [];
var parentBorderWidth = parseInt($(".tr").css("border-left-width"), 10);
for (var j = 0; j < numRows; j++) {
    var numItems = $(".tr:eq(" + j + ") .item").length;
    var parentPositionLeft = $(".tr:eq(" + j + ")").offset().left;
    for (var i = 0; i < numItems; i++) {
        var itemWidth = $(".item:eq(" + i + ")").outerWidth();
        $(".item:eq(" + i + ")").css({
            left: myWidth + parentPositionLeft + "px"
        });
        myWidth = myWidth + itemWidth + myPadding;
        thisHeight = $(".item:eq(" + i + ")").outerHeight();
        allItemHeights.push($(".item:eq(" + i + ")").height());
        allItemWidths.push($(".item:eq(" + i + ")").width());
        allItemLefts.push(parseInt($(".item:eq(" + i + ")").css("left"), 10));
        allItemsTextLefts.push($(".item:eq(" + i + ") .item-bottom").position().left);
        allItemsTextTops.push($(".item:eq(" + i + ") .item-bottom").position().top);

        if (thisHeight > myHeight) {
            myHeight = thisHeight;
        }
    }
    $(".tr:eq(" + j + ")").css({
        width: myWidth + "px",
        height: myHeight + "px"
    });
}
var openItem = false;
$('.item').click(function () {
    var par = $(this);
    var eq = $(".item").index(this);
    var left = allItemLefts[eq];
    var textLeft = allItemsTextLefts[eq];
    var textTop = allItemsTextTops[eq];
    if (!openItem) {
        par.css({
            zIndex: '9999'
        });
        par.animate({
            height: '300px',
            width: myWidth + 5 + 'px',
            left: -parentBorderWidth + "px"
        }, 500);
        $(".item:eq(" + eq + ") img").animate({
            "margin-left": -((myWidth / 2) + parentBorderWidth + myPadding) + "px",
            height: 300 + "px",
            width: 300 + "px"
        }, 500);
        $(".item:eq(" + eq + ") .item-bottom").css({
            position: "absolute",
            left: textLeft + "px",
            top: textTop + "px"
        });
        $(".item:eq(" + eq + ") .item-bottom").animate({
            left: 300 + 20 + "px",
            top: 20 + "px"
        }, 500);
        openItem = true;
    } else {
        par.animate({
            height: allItemHeights[eq] + 'px',
            width: allItemWidths[eq] + 'px',
            left: left + "px"
        }, 500, function () {
            par.css({
                zIndex: '0'
            });
        });
        $(".item:eq(" + eq + ") img").animate({
            "margin-left": 0 + "px",
            height: 200 + "px",
            width: 200 + "px"
        }, 500);
        $(".item:eq(" + eq + ") .item-bottom").animate({
            left: textLeft + "px",
            top: textTop + "px"
        }, 500);
        openItem = false;
    }
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.