In this article I’m going
to explain how to create JQuery sliding div from left to right direction.
JQuery is a powerful JavaScript
library that designed to help with JavaScript programming. And it is a
lightweight, "write less, do more", JavaScript library. The purpose
of jQuery is to make it much easier to use JavaScript on your website. JQuery also simplifies a lot of the complicated things
from JavaScript.
I have already written many articles
for JQuery UI for website. Here I’ll explain JQuery sliding div from left to
right.
So first we have to download JQuery
library from jquery.com website. If you don't want
to download and host jQuery yourself, you can include it from a CDN (Content
Delivery Network). Both Google and Microsoft host JQuery
JQuery
CDN:
<script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Google
CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Microsoft CDN:
<script href="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"
type="text/javascript"
></script>
Add JQuery library:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Add Script:
<script type="text/javascript">
jQuery(function
($) {
$('a.panel').click(function () {
var
$target = $($(this).attr('href')),
$other = $target.siblings('.active');
if
(!$target.hasClass('active')) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left:
-($target.width())
}).animate({
left: 0
}, 500);
}
});
});
</script>
Add styles:
<style type="text/css">
#left,
#right {
position:
relative;
float:
left;
margin:
20 5px 0 0;
border:
1px solid black;
width:
200px;
height:
250px;
overflow:
hidden; }
div.panel {
position:
absolute;
height:
100%;
width:
100%;
display:
none;
text-align:
left; }
</style>
Add
HTML Markup:
<div id="left" align="left">
<a href="#target1" class="panel">Audi</a><br />
<a href="#target2" class="panel">BMW</a><br />
<a href="#target3" class="panel">Ford</a><br />
</div>
<div id="right">
<div class="panel" id="target1">
Audi
<img src="Images/audi.jpg" width="150px" height="150px" />
</div>
<div class="panel" id="target2">
BMW
<img src="Images/bmw.jpg" width="150px" height="150px" /></div>
<div class="panel" id="target3">
Ford
<img src="Images/ford.jpg" width="150px" height="150px" /></div>
</div>
Complete
source code:
<html>
<head>
<title>jQuery
Move DIV FROM Left to Right </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(function
($) {
$('a.panel').click(function () {
var
$target = $($(this).attr('href')),
$other = $target.siblings('.active');
if
(!$target.hasClass('active')) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left:
-($target.width())
}).animate({
left: 0
}, 500);
}
});
});
</script>
<style type="text/css">
#left,
#right {
position:
relative;
float:
left;
margin:
20 5px 0 0;
border:
1px solid black;
width:
200px;
height:
250px;
overflow:
hidden; }
div.panel {
position:
absolute;
height:
100%;
width:
100%;
display:
none;
text-align:
left; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="left" align="left">
<a href="#target1" class="panel">Audi</a><br />
<a href="#target2" class="panel">BMW</a><br />
<a href="#target3" class="panel">Ford</a><br />
</div>
<div id="right">
<div class="panel" id="target1">
Audi
<img src="Images/audi.jpg" width="150px" height="150px" />
</div>
<div class="panel" id="target2">
BMW
<img src="Images/bmw.jpg" width="150px" height="150px" /></div>
<div class="panel" id="target3">
Ford
<img src="Images/ford.jpg" width="150px" height="150px" /></div>
</div>
</form>
</body>
</html>