Slide Show Using J Query



 This is a simple slideshow j Query. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

This slide show is provided with limited support but if you find a bug please submit an with a brief description of the bug and a link to where it can be reviewed.


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/03_08b_02_i1.js"></script>
<link href="css/03_08b_02_i1.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="ClickRevealStar">
<div class="InterBody">
<div class="tab">
<div class="center_area">
<div title="Play" tabindex="1" class="startbtn"></div>
<div class="playTxt"><em>Select <strong>Play</strong> to begin.</em></div>
<div title="Replay" class="replaybtn"></div><span class="replayTxt"><strong>Replay</strong></span></div>
<div class="container_bg"></div>
<div class="contentMiddleBg">

<div class="set" style="height:355px">
<div class="fl leftContent">
<img src="images/img1.png" class="img_03_02b_02" style=" position:absolute"/>
</div> 
<div class="fl rightContent1">
</div>
<div class="clr"></div>
</div>


<div class="set hide" style="height:355px">
<img src="images/img2.png" class="img_03_02b_02" style=" position:absolute"/>
<div class="clr"></div></div>
<div class="set hide" style="height:355px">
<div class="fl leftContent" style="margin-left:40px;">
<img src="images/new3.png" class="img_03_02b_02" style=" position:absolute"/></div>
<div class="fl leftContent"></div>
<div class="fl rightContent1" style="width:550px;">
</div>
<div class="clr"></div>
</div>


<div class="set hide" style=" height:355px">
<div class="fl leftContent">
<img src="images/img4.png" class="img_03_02b_02" style=" position:absolute"/>
</div>
<div class="fl rightContent1" style="margin:100px 0 0 0">
</div>
<div class="clr"></div>
</div>
</div>


<div class="contentBottomBg" style=" margin:6px 0 0 19px">
<div class="btnpos">
<input type="button" class="prev" disabled="disabled" alt="Previous"/>
<input type="button" class="nxt" alt="Next" title="Next" />
</div>
</div> 
</div>
</div>
<span style=" position:absolute; margin:329px 0 0 -289px; font-size:11px">© 2011 FLVS</span>
</div>
</body>
</html>


J QUERY
$('.nxt').live('click',function(){ 
clearTime();
$(".prev").css('cursor','pointer');                       
var oCurrSet = $(this).closest(".tab").find(".set:visible");
$(oCurrSet).next(".set").show();
$(oCurrSet).hide();
$(this).closest(".tab").find(".prev").removeAttr("disabled").css({'opacity':'1','filter':'alpha(opacity = 100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)','cursor':'pointer'});
$(this).closest(".tab").find(".prev").attr({'title':'Previous'});
if($(oCurrSet).next(".set").next(".set").length==0){
animateFlag = false;
time12 = setTimeout(function(){
$(".replaybtn, .replayTxt").show();
$(".container_bg").show();
},5000);
$(this).closest(".tab").find(".nxt").attr("disabled", "true");
$(this).closest(".tab").find(".nxt").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity = 30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)','cursor':'default'});      
$(this).closest(".tab").find(".nxt").removeAttr("title");
}

});

$('.prev').live('click',function(){
clearTime();
$(".nxt").css('cursor','pointer');             
var oCurrSet = $(this).closest(".tab").find(".set:visible");
$(this).closest(".tab").find(".nxt").removeAttr("disabled").css({'opacity':'1','filter':'alpha(opacity = 100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)','cursor':'pointer'});
$(this).closest(".tab").find(".nxt").attr({'title':'Next'});
$(oCurrSet).prev(".set").show();
$(oCurrSet).hide();
if($(oCurrSet).prev(".set").prev(".tab .set").length==0){
$(this).closest(".tab").find(".prev").attr("disabled", "true");
$(this).closest(".tab").find(".prev").removeAttr("title");
$(this).closest(".tab").find(".prev").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity = 30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'});      
}


});
$(".startbtn").live('click',function(){
$(".startbtn, .playTxt, .container_bg").hide();
$(".container_bg").hide();
});       

$(".replaybtn").live('click',function(){
clearTime();
animateFlag = true;
$(".replaybtn, .replayTxt").hide();
$(".container_bg, .set:visible").hide();
$('.set:first').show();
$(".nxt").removeAttr("disabled").css({'cursor':'pointer'}).css({'opacity':'1','filter':'alpha(opacity = 100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'});
$(".nxt").attr({'title':'Next'});
$(".prev").attr("disabled", "true").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity = 30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'});

});
var time12 = 0;
function clearTime(){
clearTimeout(time12);
}



Radio Button Interaction Using J query



 HTML
create a simple commands to Single Choice function.

Steps to create a Single Choice function:
           
            To create a Single Choice, you need to declare the header "jquery.js" in the head section.

In the head section you must need to mention the and source as given below.
User need to mention the type to make a different type of functions.


In the body section you must need to declare the following code to make a Single Choice function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/01_05_01c_i1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/01_05_01c_i1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Init();
});
</script>
</head>

<body>
<div class="iBody">
<div class="MultiChoice">
<div class="InterBorder">
<div class="contentTopBg"></div>
<div class="contentMiddleBg">       
<div class="InterBody">
<div class="MCHead">
<img src="../module01/01_04_01c_i1/web/imgs/mouse_icon.png" class="fl" alt="" />
<div class="MCInstruction">Select the <b>best option</b> from the choices given. Then select the <b>Submit</b> button once you have finished.</span>
</div>
</div>
<div class="MCBody">
<div class="puzzle_caption"></div>
<div class="MCSet" style="display:block;">
<div class="fl" style="width:680px; margin:15px; float:left; ">
<div class="fl">1) "Good afternoon, Ms. Jones. How are you this afternoon?"</div>
<div class="MCOption">
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">hi</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h2</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h3</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl MCcrct" /><span class="fl MCOpTxt">h4</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h5</span>
</div>
<div class="clr">
</div>
</div>
</div>
<div class="MCOverlay"></div>
<div class="MCFeedback">
<div class="MCFeedtxt">
<span class="MCC">Excellent You know the right thing to say at the right time!</span><span class="MCINC1">Try Again! <br /> That not the correct answer.</span> <span class="MCINC2">Take a look for correct answer.</span>
</div>
<div class="fr MCTryAgain">
</div>
</div>
<div class="clr">
</div>
</div>

</div>
</div>
</div>
<div class="contentBottomBg1a">
<div class="MCFoot">
<div class="fl">
<div class="RevealCopyRight">&copy; 2012 Associated Press
</div>
</div>
<div class="fr MCButtonRight">
<div class="MCForward">
</div>
</div>
<div class="fr MCButton">
<div class="MCSubmit MCDisable">
</div>
<div class="MCRestart">
</div>

</div>
</div>
</div>
</div>  
</div>
</div>
</body>
</html>


CSS


 This Code for CSS to design the webpage as we needed

body {}
.MultiChoice{display:block;width:745px;  height:auto;}
.MultiChoice .InterBorder{ order:solid 10px #569ac9;}
.MultiChoice .InterBody{ font-family:Arial;font-size:12px;color:#000000;width:745px;
    height:auto;position:relative;background-color:#eff8ff; line-height:14px;}
.fl{    float:left;}
.fr{    float:right;}
.clr{    clear:both;}
.mgTop10{    margin-top:9px;}
.mgTop8{    margin-top:6px;}
.MCSet{     display:none;}
.MCHead{    height:25px;    padding:0px 10px 10px 25px;}
.MCInstruction{    font-family:Arial;font-size:13px;font-style:italic;color:#984842;
   margin-left:55px;}
.MCBody{    height:375px;    padding:0px 10px;}
.MCFoot{order-top:dashed 1px #025286;height:40px; ackground-color:#bce4fe;}
.MCOption{margin:10px 0px 0px 20px;           float:left;           width:375px;clear:both;}
.MCButton{ margin:8px 0px 8px 8px; cursor:pointer;}
.MCSubmit{ background:url(../imgs/submit_btn.png) no-repeat; height:24px; width:116px;}
.MCPager{background:url(../imgs/counter_btn.png) no-repeat; height: 15px;
    margin: 8px;    padding: 2px 30px;    width: 20px;}
.MCButtonRight{    width:37px;    margin:8px;}
.MCForward{background:url(../imgs/forward_btn.png) no-repeat;  height:24px;
    width:37px;    cursor:pointer;    display:none;}
.MCRestart{    background:url(../imgs/restart_btn.png) no-repeat;
    height:24px;    width:116px;    display:none;}
.MCTryAgain{    background:url(../imgs/tryagain_btn.png) no-repeat;
    height:24px;    width:116px;    margin-right:5px;    cursor:pointer;}
input{cursor:pointer; margin:0 10px 0 0;}
.RevealCopyRight{ font-size:12px;color:#0A0B0C;      width: 180px;    margin:10px 0 0 200px;}
.RevealCopyRight .rtxt{   font-family:Arial;    font-size:10px;
    color: #000000;    line-height: 17px;}
.MCFeedback{    background-color: #e6f5ff;    border: 1px solid #025286;    height: 118px; position: absolute; top: 285px;width: 333px;  z-index:2; display:none;   left:25px;                      }
.MCFeedtxt{    height:79px;    padding:5px;}
.MCFeedtxt span{    display:none;}
.MCFeedImg{    height:15px;    width:16px; }
.MCCorrect{    background:url(../imgs/correct.png) no-repeat;}
.MCinCorrect{    background:url(../imgs/incorrect.png) no-repeat;}
.MCOverlay{    background-color:#ffffff;    opacity:0;    filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    z-index:1;
position:absolute; top:0px;left:0px;width:720px; height:410px;display:none;}
.MCDisable{ opacity:0.2; filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; cursor:default;}
.MCOpTxt{margin-top:3px;display:block;width:300px;}
.img_cont{        width:290px;height:190px;border:1px solid #025286;   background-color:#000000;}
.img_txt{          font-size:12px;  text-align:center;           position:absolute;          width:220px;    margin:78px 0 0;            font-family:Arial, Helvetica, sans-serif;   color:#ffffff;       padding:0 35px;            font-weight:bold;}
.puzzle_imgCont{position:absolute;width:290px;height:190px;}
.puzzle_img{float:left;    display:none;}
.puzzle{position:absolute;margin:100px 0px 0px 420px;top:0px;left:0px;}
.puzzle_caption{position:absolute;width:290px;margin:270px 0 0 405px;display:none;}
.contentTopBg {           float:left;background: url("../imgs/content_topbg.png") no-repeat scroll 0 0 transparent;   height: 28px;    width: 745px;}
.contentMiddleBg {      float:left;    background: url("../imgs/content_middlebg.png") repeat-y scroll 0 0 transparent;       min-height:338px;    width: 745px;}
.contentBottomBg1a{ background: url("../imgs/content_botbg.png") no-repeat scroll 0 0 transparent;    float: left;    height: 53px;    width: 725px;   padding:0 20px 0 0;}



JAVA SCRIPT

This code used all interaction once you used same query are used all radio button interaction

Root=null;
UserAttempt=0;
var puzzle_imgIndex = 0;
 function Init(){
    Root = $(".MultiChoice");
    $(Root).find(".MCSet:first").show();
    SetPager();
    $(Root).find("input").click(function(){
        $(this).closest(".MCSet").find("input").removeClass("attended");
        $(this).addClass("attended");
        $(Root).find(".MCSubmit").removeClass("MCDisable");
    });
    $(Root).find(".MCTryAgain").click(function(){
        var oCurrSet;
        oCurrSet=$(this).closest(".MCSet");
        $(oCurrSet).find("input").removeAttr("checked");
        $(oCurrSet).find(".MCOverlay").hide();
        $(oCurrSet).find(".MCFeedback").hide();
        $(oCurrSet).find(".MCFeedback .MCFeedtxt span").hide();
        UserAttempt+=1;
    });
    $(Root).find(".MCSubmit").click(function(){
        if(!$(this).hasClass("MCDisable")){
            var oCurrSet;
            UserAttempt+=1;
            oCurrSet = $(Root).find(".MCSet:visible");
            $(this).addClass("MCDisable");
            $(oCurrSet).find(".MCFeedback").show();
            $(oCurrSet).find(".MCOverlay").show();
            if($(oCurrSet).find("input.attended").hasClass("MCcrct")){
                $(oCurrSet).find(".MCFeedback").find(".MCC").show();
                $(oCurrSet).find(".MCFeedback").find(".MCTryAgain").hide();
      $(oCurrSet).find("input.attended").parent().find(".MCFeedImg").addClass("MCCorrect");
                if($(Root).find(".MCSet:visible").next(".MCSet").length==0){
                    $(Root).find(".MCRestart").show();
                    $(this).hide();
                                                            showCaption();
                }
                else{
                    $(Root).find(".MCForward").show();
                }
                                                showPuzzleImg();
            }
            else{
                $(oCurrSet).find("input.attended").parent().find(".MCFeedImg").addClass("MCinCorrect");
                if(UserAttempt==1){
                    $(oCurrSet).find(".MCFeedback").find(".MCINC1").show();
                    $(oCurrSet).find(".MCFeedback").find(".MCTryAgain").show();
                }
                else{
                    $(oCurrSet).find(".MCFeedback").find(".MCINC2").show();
                    $(oCurrSet).find(".MCFeedback").find(".MCTryAgain").hide();
                    $(oCurrSet).find("input.MCcrct").parent().find(".MCFeedImg").addClass("MCCorrect");
                    if($(Root).find(".MCSet:visible").next(".MCSet").length==0){
                        $(Root).find(".MCRestart").show();
                        $(this).hide();
                                                                        showCaption();
                    }
                    else{
                        $(Root).find(".MCForward").show();
                    }
                                                            showPuzzleImg();
                }
            }
        }
    });
    $(Root).find(".MCForward").click(function(){
        var oCurrSet;
        UserAttempt=0;
        $(this).hide();
        oCurrSet = $(Root).find(".MCSet:visible");
        $(oCurrSet).next(".MCSet").show();
        $(oCurrSet).hide();
        SetPager();
    });
    $(Root).find(".MCRestart").click(function(){
        UserAttempt=0;
        $(this).hide();
        $(Root).find(".MCSet:visible").hide();
        $(Root).find(".MCSet:first").show();
        $(Root).find(".MCFeedback").hide();
        $(Root).find(".MCOverlay").hide();
        $(Root).find(".MCFeedback").find("span").hide()
        $(Root).find(".MCCorrect, .MCinCorrect").removeClass("MCCorrect").removeClass("MCinCorrect");
        $(Root).find("input").removeAttr("checked");
        $(Root).find(".MCSubmit").show();
        SetPager();
                        hidePuzzleImg();
    });
};
SetPager=function(){
    $(Root).find(".MCPager").text( ($(Root).find(".MCSet").index($(Root).find(".MCSet:visible"))+1) + "/" + $(Root).find(".MCSet").length);
};
function showPuzzleImg(){
            puzzle_imgIndex = $(Root).find(".MCSet").index($(Root).find(".MCSet:visible"));
            $('.img_txt').hide();
            $('.puzzle_imgCont img:eq('+puzzle_imgIndex+')').show();
}
function hidePuzzleImg(){
            $('.puzzle_imgCont img,.puzzle_caption').hide();
            $('.img_txt').show();
}
function showCaption(){
            $('.puzzle_caption').show();
}

Load XML Using J query


Load XML Using  J query



HTML

This is a very simple code foe every one ,first we can create Html file as . we needed
Then give any class name or id name .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load XML With jQuery</title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
             <script src="aud_pre.js" type="text/javascript"></script>
    <link href="styleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>

<input id="nxt" type="button" value="next"/>
<input id="nxt1" type="button" value="prev"/>
</body>
</html>


CSS
Write down css for every class and id as our design and for our j query

body
{
    color: #3e3935;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 90%;
    line-height: 1.4em;
    width: 85%;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
}
p
{
    margin: 12px 0;
     line-height: 1.4em;
}
h1, dl
{
    padding: 0;
    text-align: left;
    line-height: 1em;
}
.title
{
    font-weight: bold;
    font-size: 1.25em;
    color: #4a887d;
}

.bookImage
{
    clear: left;
    width: 150px;
}
h1
{
    font-size: 2em;
    color: #4a887d;
    margin-bottom: 1em;
}

dl, dd, dt, img, p
{
    margin: 0;
    padding: 0;
}

dt
{
    clear: left;
    width: 150px;
    float: left;
    height: 1%;
    margin-bottom: 20px;
}
dd
{
    margin-left: 170px;
    margin-bottom: 20px;
    height: 1%;
}
dd:after
{
    content: ".";
    visibility: hidden;
    clear: both;
    display: block;
    height: 0;
}
.loadingPic
{
    margin: auto;
    background: url(loadingIcon.gif) no-repeat 0 0;
    padding-left: 25px;
}

.hide{display:none;}



Jquery
This very simple query  easily every one understand  look this code  


var lenk=0;
$(document).ready(function()
                                                                           {
                                    var nxtvalue=1;            
                                    xmlload(1)       
$('body').append('<h1> Recommended Web Development Books </h1>');
 $('body').append('<dl />');
                        $('#nxt').click(function(){
                                                            nxtvalue++                  
                                                 if(nxtvalue <lenk ){
                                                             xmlload(nxtvalue)        
                                                 }
                                                });
                       
                        $('#nxt1').click(function(){
                                                 nxtvalue--       
                                                 if(nxtvalue >0 ){
                                                 xmlload(nxtvalue)        
                                                 }
                                                                                                 
                                                });
});
function xmlload(no)
                        {
                                    var s=1
                                    $.get('myData.xml', function(d){
                        len = $(d).find('book').length;
                        $(d).find('book').each(function(){
                                                            lenk++;                                                           
                                                if (s==no)
             {                                                                    
                                     var len = $(d).find('book').length;
                                    var currentDiv = 0;
                                                var $book = $(this);
                                                var title = $book.attr("title");
                                                var description = $book.find('description').text();
                                                var imageurl = $book.attr('imageurl');
                                    var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
                                                html += '<dd> <span class="loadingPic" alt="Loading" />';
                                                html += '<p class="title">' + title + '</p>';
                                                html += '<p> ' + description + '</p>' ;
                                                html += '</dd>';
                        $('dl').html($(html));
                                                $('.loadingPic').fadeOut(1400);                                    
                                                             }
        s++;
                                                });                                  
                                     });
            }

XML


To create a valid XML Document. This document can then be passed to jQuery to create a typical jQuery object that can be traversed and manipulated.

This  is our simple  XML document file :


<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg" index=0>
        <description>
            While CSS is a relatively simple technology to learn, it is a difficult one to master. When you first start developing sites using CSS, you will come across all kinds of infuriating browser bugs and inconsistencies.
        </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg" index=1>
        <description>
            Building on the revolutionary ASP.NET 2.0 release, ASP.NET 3.5 adds several key new developer features including AJAX, LINQ, and a new CSS designer in Visual Web Developer 2008.
        </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
        <description>
            jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource,
        </description>
    </book>
    <book title="Learning jQuery" imageurl="images/asp.jpg" class="hide">
        <description Class="hide">
            jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource,
        </description>
    </book>
</books>

Audio synchronized interaction


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="audio/jquery-1.7.min.js"></script>

<style>
body{ width:500px; height:300px; border:1px solid; }
.aud{ width:50px; height:50px; background:#0066FF;}
</style>

<script type="text/javascript">
var sAudio;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
window.onload = function() {
   gameAud.addEventListener('ended', audEnded, false);
}

function audioPlay(uagent, sAudio, eleAud, objAud){
 audFile = sAudio;
 if(navigator.platform == 'iPad'){
    $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAud(objAud);
 }else if(uagent.search('android') > -1 || uagent.search('android') > -1 || platformAgent.search('android')>-1 || platformAgent.search('linux')>-1){
  if($.browser.version>534){
    $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAudAndroid(objAud);
  }else{
   var audioNamePath='audio/'+audFile+'.mp3';
   var audioElement = document.getElementById('gameAud');
   audioElement.setAttribute('src',audioNamePath);
   audioElement.load()
   audioElement.addEventListener("load", function() {
    audioElement.play();
   }, true);
  }
 }else if(uagent.search('firefox') > -1){
    $('#gameAud').attr({src:'audio/'+audFile+'.ogg',type:'audio/ogg'});
   loadAud(objAud);
 }else{
     $('#gameAud').attr({src:'audio/'+audFile+'.mp3',type:'audio/mp3'});
   loadAud(objAud);
 }
}
function playAud(){
  gameAud.play();
}
function loadAud(){
 gameAud.load();
 gameAud.play();   
}
function loadAudAndroid(){
 gameAud.load();
}
function gameAudioStop(){
   gameAud.pause();
    $(this).attr({src : 'imgs/play.png'});
}
function audEnded(){
 alert('in end')
 gameAudioStop();
 $(".aud_play").attr({src : 'imgs/play.png'});
}
$('.aud').live('click',function(){
                                    sAudio = "s1";
                                    audioPlay(uagent, sAudio, "gameAud", gameAud);
});

</script>
</head>

<body>
 <audio id="gameAud" preload="preload" src="" autoplay="autoplay"></audio>
<div class="aud"></div>
</body>

</html>

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;}