Code for Next prev slideup and slidedown

var active = 0;                                                                                       view domo
$('.btn').click(function() {
    var $btn = $(this);
    var $box = $('#area-wrap').find('.box'); 
    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        } 
        $box.eq(active).delay(500).slideDown();
    });

});

countdown

function countdown(count, container) {     
  var $container = $(container);
  (function step() {
    $container.html(count);               
    if (count-- > 0) {                    
      setTimeout(step, 1000);              
    }
  })();                                     
}
countdown(20, '#timer');


View Domo

Crossword

HTML                          
                                                             View Domo


 var fruits = ["i", "c", "e", "n", "e", "r","f", "s", "i", "o", "n", "v", "n", "d", "a", "s", "m", "a", "n", "g","r", "o", "v", "e", "s", "e", "n", "i", "r", "g", "d", "f", "g", "d", "f", "v", "e", "e", "i", "l", "l", "e", "g","a", "l", "r", "t", "e", "i", "d", "e", "c", "o", "l", "o", "g", "y", "n"];
   
$("#btn1").live('click',function(){  
    var arrInputValues = new Array();  
      $("input[name='table']").each(function(){
           arrInputValues.push($(this).val()); 
      });
   
count=0;
for(var i=0;i<58;i++){
if(fruits[i] == arrInputValues[i]){
count++;
if(count == 58){
$('.corr').show();
}
}
else{
$('.incorr').show();
break;
}
}
 });

 


$('.hint').live('click', function() {
var fg=$(this).attr("id");
$('#'+fg).val(fruits[fg]);


});

var hint=1;
$('#hintans').live('click', function() {
if(hint == 1){
hint=2;
$('.tal').addClass("hint");
$('#hintans').css({"opacity":".5"});
}else{
hint=1;
$('.tal').removeClass("hint");
$('#hintans').css({"opacity":"1"});
}
});
var now=45;
$('#reset').live('click', function() {
$('.tal').val(null);

 
});

$(document).ready(function() {
  $('.tal').val(null);
   $(':input').autotab_magic();
});

Next prev with Drag and drop

HTML



<div class="dgdp">
<div class="dropArea">
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>

</div>

<div class="dragArea">
<div class="vdrag ha" id="vdg1"> one1 </div>
<div class="vdrag  ha hidden" id="vdg2"> one2 </div>
<div class="vdrag ha hidden" id="vdg3"> one3 </div>
<div class="vdrag  ha hidden" id="vdg4"> one4 </div>
<div class="vdrag  ha hidden" id="vdg5"> one5 </div>
<div class="vdrag  ha hidden" id="vdg6"> one6 </div>
<div class="vdrag  ha hidden" id="vdg7"> one7 </div>
<div class="vdrag ha  hidden" id="vdg8"> one8 </div>
<div class="vdrag ha  hidden" id="vdg9"> one9 </div>
<!--<div class="vd2"><div class="vdrag" id="vdg2"> two </div> </div>
<div class="vd3"><div class="vdrag" id="vdg3"> three </div></div>
<div class="vd4"><div class="vdrag" id="vdg4"> four </div> </div>
-->
</div>
</div>
<div class="submit btn next" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 100px">next</div>
<div class="submit btn prev" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 200px"> prev</div>



JS


$(document).ready(function(){


dragDiv();
 });
function dragDiv(){

var t=setTimeout(function(){$('.vdrag').draggable({revert:true,containment:'.dgdp' }); },1000)



var t=setTimeout(function(){


$('.vdrop').each(function(){
$(this).droppable({


drop:function(event,ui){
var vdragId = $(ui.draggable).attr('id');
$(this).removeClass("ha");
$('.dragArea').hide();
$('#'+vdragId).css({'top':'0px','left':'0px','z-index':'0' });
$(this).html(ui.draggable);
$('.btn').click();
 $('.dragArea').delay(1000).fadeIn('slow');
}


});  


});

  },2000)

}


 var $box;
var $btn;
 var active = 0;
$('.btn').live('click',function() {
    $btn = $(this);
    $box = $('.dragArea').find('.ha');

    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        }
        $box.eq(active).delay(0).slideDown();
    });

});





CSS


#page1{
border:1px solid orange;
height:380px;
width:640px;
margin:20px auto;
}
.dragArea{
height:30px;
width:150px;
border: 1px solid ;
 overflow:hidden;

float:left;
}
.dropArea{
height:300px;
width:150px;
border: 1px solid red;
float:right;
}

.vdrag{
background:#FF9999;
height:30px;
width:100px;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor:pointer;
}
.vd1,.vd2,.vd3,.vd4
{
margin:10px;
border:1px solid;
height:40px; width:150px;
}
.vdrop{
border:1px solid #e4e4e4;
height:30px;
width:100px;
margin:10px;
}
.dgdp{  border: 1px solid;
    height: 410px;
    position: absolute;
    width: 540px;}







.hidden{
display:none;
}



ViewDomo

Touch code for deag and drop

var dragRevert = true;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();





function init(){
var a=0;
$(".vdrag").each(function(){
var b=$(this).attr("id");
var c=document.getElementById(b);
a++;
c.addEventListener("touchstart",touchHandler,true);
c.addEventListener("touchmove",function(e){e.preventDefault();},true);
c.addEventListener("touchmove",touchHandler,true);
c.addEventListener("touchend",touchHandler,true);
c.addEventListener("touchcancel",touchHandler,true);
});
}

function touchHandler(a){
var b=a.changedTouches,c=b[0],d="";
switch(a.type){
case"touchstart":
d="mousedown";
break;
case"touchmove":
d="mousemove";
break;
case"touchend":
d="mouseup";
break;
default:
return
}
var e=document.createEvent("MouseEvent");
e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
c.target.dispatchEvent(e);
}


function is_touch_device() {
 if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){
  return true;
 }else{
  return false;
 }
}