Flip Cards



Flip Cards

Flip cards for browser, i pad application with Slide animation


HTML

<body>

<div id="container">
<div class="header"></div>
<div class="content">
<p class="user_ins">Click on the <strong>flashcard</strong> to flip it over.</p>
<div class="Prev prev_disable"></div>

<div class="slide_con">
<div class="slide_con1">
<div class="slide">
<div class="card1 cards">
<img src="imgs/bill_flip_01.png" class="Img1" />
<img src="imgs/bill_flip_02.png" class="Img2 img" />
<span class="card_head">Amerigo Vespucci</span>
<span class="card_desc">Italian explorer; the name "America" derives from his name</span>
</div>
</div>


<div class="slide">
<div class="card7 cards">
<img src="imgs/bill_flip_01.png" class="Img1" />
<img src="imgs/bill_flip_02.png" class="Img2 img" />
<span class="card_head">Jacques Cartier</span>
<span class="card_desc">French explorer; claims Quebec region of Canada for France</span>
</div>
</div>

<div class="slide">
<div class="card8 cards">
<img src="imgs/bill_flip_01.png" class="Img1" />
<img src="imgs/bill_flip_02.png" class="Img2 img" />
<span class="card_head">John Cabot</span>
<span class="card_desc">Explored North America for England (east coast of what is now U.S.)</span>
</div>
</div>

</div>
</div>

<div class="Next next_ena"></div>
</div>
<div class="footer">
<span class="pageNo"><span class="currentpage">1</span>/15</span>

<div class="restart restart_ena" title="Restart"></div>
<div class="lot" title="List of Terms"></div>
</div>
</div>

</body>



Java script
var totalSlides = 15;
var count = 0;
var nextdisable = true;
var prevdisable = false;
var time = 0;

$('.prev_ena').attr('title','Previous');
$('.next_ena').attr('title','Next');

$('.Next').live('click',function(){
            prevdisable = true;
            if(nextdisable){                                                                                       
                        count++;
                        if(count >= (totalSlides-1)){
                                    $('.Next').removeClass('next_ena').addClass('next_disable');
                                    nextdisable = false;
                        }
                        $('.Prev').removeClass('prev_disable').addClass('prev_ena');
                        $(".slide_con1").animate({"marginLeft": "-=545px"}, "slow");
                        $('.currentpage').html(count+1);
                        resetCards();
            }
});

$('.Prev').live('click',function(){ 
            nextdisable = true;
            if(prevdisable){                                                                                       
                        count--;
                        if(count <= 0){
                                    $('.Prev').removeClass('prev_ena').addClass('prev_disable');
                                    prevdisable = false;
                        }
                        $('.Next').removeClass('next_disable').addClass('next_ena');
                        $(".slide_con1").animate({"marginLeft": "+=545px"}, "slow");
                        $('.currentpage').html(count+1);
                        resetCards();
            }
});

$('.restart_ena').live('click', function(){
            $('.Next').removeClass('next_disable').addClass('next_ena');
            $('.Prev').removeClass('prev_ena').addClass('prev_disable');
            count = 0;
            nextdisable = true;
            prevdisable = false;
            $(".slide_con1").css({"marginLeft": "0px"});
            $('.currentpage').html("1");
            resetCards();
});

$('.restart_ena').live('click', function(){
            $('.Next').removeClass('next_disable').addClass('next_ena');
            $('.Prev').removeClass('prev_ena').addClass('prev_disable');
            count = 0;
            nextdisable = true;
            prevdisable = false;
            $(".slide_con1").css({"marginLeft": "0px"});
            $('.currentpage').html("1");
            resetCards();
});


$('.cards').live('click', function(){
            var classNam = $(this).attr('class');
            classNam = classNam.replace(" cards","");
            var imgSrc = $('.'+classNam+' .Img1').attr('src');
            if(imgSrc.indexOf('bill_flip_01') == -1){
                        $('.'+classNam+' .card_desc').hide();
                        clearTimeout(time);
                        time = setTimeout(function(){
                                    $('.'+classNam+' .card_head').show();
                        },500);
            }else{
                        $('.'+classNam+' .card_head').hide();
                        clearTimeout(time);
                        time = setTimeout(function(){
                                    $('.'+classNam+' .card_desc').show();
                        },500);
            }
            Flip(this);         
});

function Flip(obj){
            var iWidth;
            iWidth = $(obj).width();
            $(obj).children(".Img1").css("position","absolute");
            $(obj).children(".Img1").css("z-index","1000");
            $(obj).children(".Img1").css("left","0px");
            $(obj).children(".Img2").css("position","absolute");
            $(obj).children(".Img2").css("z-index","999");
            $(obj).children(".Img1").show();
           
            $(obj).children(".Img1").animate( {left: (iWidth/2) + "px",
            width:"10px"}, 200, "linear", function(){
            $(this).css("z-index","999");
            $(this).hide();
            $(this).parent().children(".Img2").css("left", (iWidth/2) + "px");
            $(this).parent().children(".Img2").css("width","10px");
            $(this).parent().children(".Img2").show();
           
            $(this).parent().children(".Img2").animate( {left:"0px", width: iWidth + "px"}, 200, "linear", function(){
            $(this).css("left","0px");
            $(this).css("width", iWidth + "px");
            $(this).css("z-index","1000");
           
            $(this).parent().children(".Img1").css("left","0px");
            $(this).parent().children(".Img1").css("width", iWidth + "px");
            $(this).parent().children(".Img2").attr("class","Img2001");
            $(this).parent().children(".Img1").attr("class","Img2");
            $(this).parent().children(".Img2001").attr("class","Img1");
            });
            });
}

function resetCards(){
            $('.cards').each(function(){
                        $(this).find('img').eq(0).removeAttr('class').removeAttr('style').addClass('Img1');
                        $(this).find('img').eq(1).removeAttr('class').removeAttr('style').addClass('Img2 img');
            });
            $('.card_head').show();
            $('.card_desc').hide();
}



CSS
body{margin:0px; padding:0px; width:100%; height:100%;}
::selection {
            background: #ffb7b7; /* Safari */
            }
::-moz-selection {
            background: #ffb7b7; /* Firefox */
}
img{ border:none;}

#container{ margin:0 auto; width:700px; height:404px; border:0px solid;  font-size:14px; font-family:Arial, Helvetica, sans-serif;}

.header{background:url(../imgs/content_topbg.png) no-repeat;  width:700px;    height:28px;}

.content{background:url(../imgs/content_middlebg.png) repeat-y;           width:700px; height:325px;}

.footer{background:url(../imgs/content_botbg.png) no-repeat;    width:700px;    height:53px; }

.pageNo{ float: left;
    font-size: 14px;
    margin: 9px 0 0 25px;
    text-align: center;
    width: 46px;}

.restart{ float: right;
    margin: 8px 30px 0 0;
    width: 117px;
            height:24px;}

.restart_ena{
            background:url(../imgs/restart_btn.png) no-repeat -125px 0px;
            cursor:pointer;}           
                       
.restart_dis{
            background:url(../imgs/restart_btn.png) no-repeat 0px 0px;
            cursor:default;}

.Next
{
    height: 27px;
    width: 29px;
    margin: 150px 0 0 5px;
            float:left;
}

.next_ena{  background:url(../imgs/next.png) no-repeat; cursor:pointer;}

.next_disable{ background:url(../imgs/next_d.png) no-repeat; cursor:default;}

.Prev
{
    height: 27px;
    width: 29px;
            float:left;
            margin:150px 0 0 25px;
}

.prev_ena{  background:url(../imgs/prev.png) no-repeat; cursor:pointer;}

.prev_disable{ background:url(../imgs/prev_d.png) no-repeat; cursor:default;}

.slide_con{ float:left; width:545px; margin:10px 20px 0 20px; overflow:hidden; height:280px; position:relative;}

.slide_con1{ width:10000px;}

.slide{ float:left; display:inline; height:270px; width:545px; border:0px solid;}
.cards{
     float:left;
     position:relative;
             cursor:pointer;
             margin:10px 0 0 190px;
     width:214px;
     height:258px;
             color:#ffffff;
}
.cards img{
     width:214px;
     height:258px;
             position:absolute;
}

.card_head{ position:absolute; z-index:1999; margin: 115px 0 0 0;  text-align: center; width: 210px; font-size:18px;}

.card_desc{ position:absolute; display:none; z-index:1999;  margin: 85px 10px 0 20px; font-size:18px; width: 180px;}

.Img2{ display:none;}

.user_ins{ display: block;
    float: left;
    font-size: 13px;
    font-style: italic;
    margin: 0 0 0 30px;
    width: 655px; color:#852424;}
           
.lot{ float: right;
    margin: 8px 10px 0 0;
    width: 117px;
            background:url(../imgs/listofterms.png) no-repeat -125px 0px;
            cursor:pointer; height:24px;}    

3 comments: