Make Automatic Content Slider on Mouse Over as On Facebook Create Page

By -
Make Automatic Content Slider on MouseOver
Hello Friends, Today I Will Teach you Make A a box which will autoscroll with animation on hover on it. It's Concept is also used in Facebook when you use to create a new page when you are not logged in it. It is A Wonderful JQuery tool that you should Implement on your site.
Original Article is on my other tutorial site i.e. http://tutorial.ashutoshanand.com/

CLICK HERE TO VIEW ON MY SITE.













Here is the Complete Source Code of the
Tutorial. If You Dont Understand anything then comment below
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#tab").hover(function(){
    $('#t1').slideDown(400);
    $('#t2').slideDown(400);
 $("#middle").css("color","#0072c6",200);
     $("#t2").fadeOut(400);
 $("#t1").fadeIn("slow"); 
  },function(){
    $('#t1').slideUp(400);
    $('#t2').slideUp(400);
    $("#t2").fadeIn(400);
 $("#middle").css("color","#111");
 $("#t1").fadeOut(400);
  });
  $("#tab2").hover(function(){
    $('#t12').slideDown(400);
    $('#t22').slideDown(400);
 $("#middle2").css("color","#0072c6",200);
     $("#t22").fadeOut(400);
 $("#t12").fadeIn("slow"); 
  },function(){
    $('#t12').slideUp(400);
    $('#t22').slideUp(400);
    $("#t22").fadeIn(400);
 $("#middle2").css("color","#111");
 $("#t12").fadeOut(400);
  });
});
</script>
</head>
<style>
div.tab{display:inline-block;-webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(250, 250, 250) 100%);background-origin: padding-box;background-image: linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -o-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -moz-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -webkit-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -ms-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-size: auto;border-bottom-color: rgb(229, 229, 229);border-bottom-style: solid;border-bottom-width: 1px;border-left-color: rgb(229, 229, 229);border-left-style: solid;border-left-width: 1px;border-right-color: rgb(229, 229, 229);border-right-style: solid;border-right-width: 1px;border-top-color: rgb(229, 229, 229);padding:30px;width:204px;}
div.content{width:200px;height:270px;color:#222;font-family:'open sans', arial, sans-serif;font-size:13px;}
</style>

<body>
<table cellspacing=10 cellpadding=10>
<tr>
<td>

<div id="tab" style="height:220px;width:200px;overflow:hidden;cursor:pointer;padding:30px;" class="tab">
 
 
 <div id="t1" style="display:none;width:220px;height:100px;">
  <img src="http://profile.ak.fbcdn.net/hprofile-ak-ash4/c33.33.414.414/s160x160/295272_440228536008840_1472236200_n.jpg" height="70" width="70">

 </div>
 
 
 <div id="middle"  style="font-family:open sans light;font-size:25px;color:#222">
  Hi I am Middle element Place Your Title Here
 </div>
  
 
 <div id="t2" style="" class="content">
 <br>
 Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
 </div>
</div>
</td>

<td>
<div id="tab2" style="height:220px;width:200px;overflow:hidden;cursor:pointer;padding:30px;" class="tab">
 
 
 <div id="t12" style="display:none;width:220px;height:100px;">
  <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/c0.30.180.180/s160x160/539327_104541003013282_445606083_a.jpg" height="70" width="70">

 </div>
 
 
 <div id="middle2"  style="font-family:open sans light;font-size:25px;color:#222">
  Hi I am Middle of 2nd Box Place Your Title Here
 </div>
  
 
 <div id="t22" style="" class="content">
 <br>
 Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
 </div>

</div>
</td>
</tr>
</table>
</div>
</body>
</dhtml>


Live Demo:

Hi I am Middle element Place Your Title Here

Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
Hi I am Middle of 2nd Box Place Your Title Here

Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
References:
  • Jquery Reference
  • Jquery Slide Down Reference
  • Jquery Slide Up Reference

    • Comments

    Post a Comment

    Do Not Spam

    Popular posts from this blog

    Installing SSL Certificate from CPanel

    By -
    Image
    Many People wonder that how to install a SSL certificate on your web site. As most of the users have cpanel websites i am going to tell you all today that how to install ssl certificate from the cpanel. Installing SSL Certificate From CPanel Note that to Install SSL Certificate Your CPanel host should have enabled SSL/TLS Manager in Your Cpanel. Step 1: Go to Your website.com/cpanel or Open Cpanel of your website. Step 2: Login into the Cpanel . Step 3: In the Search Bar on the left type SSL/TLS Manager or Select the SSL/TLS Manager from the Security Tab . Here You Can See SSL/TLS Manager in the CPanel , If you Do not see it , it means your host does not provide you feature to install SSL from CPanel. Send Request to you Admin to enable SSL Step 4: Under the Section Private Keys , Select  Generate, view, upload, or delete your private keys. Step 5: Fill up the form by entering Host name and KEYS and Click Generate. Step 6: Return to the SSL Manager.
    Read more