CODEWITHSUNDEEP
javascriptresponsive-design
user1016695
user1016695

Reputation: 91

An impressive responsive javascript effect. How to do it?

recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:

http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.

As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!

Upvotes: 0

Views: 392

Answers (5)

James Smith
James Smith

Reputation: 538

This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/

Upvotes: 4

Johan
Johan

Reputation: 35194

Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/

At least thats how i would do it. Let me know if you want me to elaborate

Some example code:

$(function(){

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

        var $this = $(this);
        var $divToShow = $this.nextUntil('div.container');
        //fetch the divs content via ajax or however u want to do it here...
        $divToShow.stop(true, true).slideToggle();
    });

});

Upvotes: 1

zozo
zozo

Reputation: 8582

If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.

Upvotes: 0

japrescott
japrescott

Reputation: 5015

I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)

The More Content part, could be implemented by pure css, without any javascript. with this structure;

<div class="thumb">
    <div class="img"></div>
    <div class="content"></div>
</div>

and have this css present;

.thumb{
    display:block;
    width:100px;
    height:100px;
}
.thumb div{
    position:absolute;
    width:inherit;
    height:inherit;
}
.thumb div.content{
    opacity:0;
}
.thumb:hover div.content{
    opacity:1;
}

or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.

Upvotes: 1

frenetix
frenetix

Reputation: 1209

I would try http://api.jquery.com/slideDown/ for the very basics... after that... it's just a mix of imagination and good taste :) There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide

Upvotes: 0

Related Questions