> CardView

rolodex

This is a little control to browse through a collection of items like they were cards in a deck or in a rolling file device (rolodex). Mostly useful on mobile, but desktop compatibility has been added for ease of debugging.

Grab it on github or check out the online demo.

This is something I wanted to add to the SwipeView but while working on it I realized that they were two pretty different concepts and code bases.

The purpose of the widget is to let you browse through a potentially limitless collection of items, a bit like a rolodex. It’s basically a carousel, but each new item is a “card” that slides over the previous one.

Here urges an explanatory video.

Nothing particularly mind blowing but the good part is that it uses just three elements to handle an infinite list of items.

The control is of course targeted to mobile devices –or small screens anyway– and memory footprint was my main concern. There are only three DOM elements at any given time and at each card flip an event is fired to populate new content into the array.

CardView is a class that you can initiate like so:

var deck = new CardView('#wrapper', {
   effect: 'rotate',
   direction: 'v',
   dataset: data,
   onUpdateContent: function (el, data) {
      // Code to update the card content
   }
});

The first option is the “deck” wrapper, the DOM element that contains the three cards.

The second option is an object you use to configure the control.

effect is the visual effect used to flip the cards. It can be 'rotate' (default), 'slide', 'zoom'.

direction is the direction of the swipe the control reacts to. It can be 'vertical' (default) or 'horizontal' (you can abbreviate it to 'v' and 'h').

dataset is an array which contains all your cards data. Keep reading for some examples.

onUpdateContent is the function that get called when new content needs to be loaded from the dataset array. I’m giving you an example to show how it works.

The simplest dataset you can have might be as follow:

var data = ['image', 'some_other_image', 'another_one', ...];

Your wrapper would look like this:

<div id="wrapper">
    <ul id="deck">
        <li class="card"><div></div></li>
        <li class="card"><div></div></li>
        <li class="card"><div></div></li>
    </ul>
</div>

All that the onUpdateContent function has to do is to set the background image of the div inside the li.class element. So the function will look like this:

function (el, data) {
    el.querySelector('div').style.backgroundImage = 'url(' + data + '.jpg)';
}

The function passes two parameters: el is the DOM element that needs to be updated; data is the array element, or the actual data that you need to place into the new card.

Of course you can have a dataset of objects, so you can change not only the background image but also a title or a description or whatever. Please have a look at the demos for more complex configurations.

Admittedly the code is still a bit messy and it would need a clean up; also this widget screams for ajax support that I will eventually add if there will be any interest around this control. I hope you could make some use of this initial release nonetheless. Use it freely, it is released under the MIT license.

If you find this script useful and you wish to see more updates, please consider supporting the development!




Thanks!

/Share the joy

/Reactions

  • A made an angular component for this script in case anybody else is interested.

    https://github.com/steelsojka/angular-cardview

    Still requires the CardView script of course ;) These scripts are always top quality!

    Reply
    • Author: dave
    • Posted on: 2013/09/12
    • At: 04:16

    can you pass base-64 image data to the cardview?

    Reply
    • Author: Adi
    • Posted on: 2013/09/13
    • At: 05:58

    When mydeck.gotopage(n) is called the order of right or left scroll is not right after more than 3 shifts. I mean the third page is not the right page in sequence

    Reply
  • Hi Matteo,

    I used your cardview in http://webapp.to/aldente webapp. Looks smooth. Swip from left to right…

    Kind regards,
    Paul

    Reply
    • Author: Denny
    • Posted on: 2013/10/08
    • At: 16:16

    Hi
    I want to use cardview as a tab or page. i want put .net component to cardview. not show image or text only. How can I do it?

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>