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;}
Does it work like flip card in blogspot?
ReplyDeletewhere the demo??
ReplyDeleteLet's try online
ReplyDelete