Sliding Fanpage in Jquery
We have divided the the entire code into HTML, CSS and jQuery.
HTML :
<html>
<head>
<title>Jquery window animation</title>
</head>
<body>
<div id="myDiv" class="facebook">
<a id="myAnchor" href="http:www.facebook.com" alt="Facebook">Go to Facebook</a>
<img id="myImg" src="http://www.99codingexamples.com/images/facebook-vertical.png" alt="Facebook" />
</div>
<div id="myDiv" class="google">
<a id="myAnchor" href="http:www.gmail.com" alt="Gmail">Go to Gmail</a>
<img id="myImg" src="http://www.99codingexamples.com/images/google-plus-vertical.png" alt="Facebook" />
</div>
</body>
</html>
In the HTML section , we have created two divs for respective Facebook and Google+ fan page.
We are showing an anchor tag on sliding div. Similarly you can include much more according to your need.
Images for facebook and google+ we are using from another site. You can replace your image and customize it.
CSS :
<style type="text/css">
#myDiv
{
width:224px;
height:200px;
margin-left:-240px;
border:3px solid black;
}
#myImg
{
margin-top:50px;
float:right
position:absolute;
margin-left:234px;
}
#myAnchor
{
margin-top:70px;
margin-left:20px;
position:absolute;
font-family:comic sans ms;
}
</style>
The CSS helps in giving the Fan page proper position and look.
jQuery :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".facebook").hover(function()
{
$(this).stop().animate({marginLeft:"-10px"},1500);
},function()
{
$(this).stop().animate({marginLeft:"-240px"},"fast");
});
$(".google").hover(function()
{
$(this).stop().animate({marginLeft:"-10px"},1500);
},function()
{
$(this).stop().animate({marginLeft:"-240px"},"fast");
});
});
</script>
The jQuery does the work of animation. Using jQuery, we are changing the div's position on hovering the image. The jQuery gives the animation effect while changing its position using animate method. We have used notepad as an editor for this code. You can use this code in any other editor as well. To use this code in notepad you have to add jQuery reference as added above in the code. You should have internet access while running this code, to download and use jQuery file mentioned in reference.
Watch Video :
Nice Post about adding Fan Page to website cheer
ReplyDelete