Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Slide DIV Content from Left to Right or Move DIV from Right to Left in jQuery

Dec 12, 2013
Introduction

Here I will explain how to move or slide div content from left to right in
jQuery or move div content right to left in jQuery.
                                                                                   
Description:
  
In previous articles I explained jQuery slideup slidedown slidetoggle example, jQuery fadein or fadeout example,
jQuery create rounded corners for textbox, jQuery show time in webpage and many articles relating to JQuery. Now I will explain how to move div from left to right or right to left in jQuery.

To implement this we need to write the code like as shown below


<html>
<head>
<title>jQuery Move DIV FROM Left to Right & Right to Left</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
$(function() {
$("#btnright").click(function() {
$('#slidediv').toggle('slide', { direction: 'right' }, 700);
});
$("#btnleft").click(function() {
$('#slidediv').toggle('slide', { direction: 'left' }, 700);
});
});
</script>
<style type="text/css">
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
#slidediv {
color:#F25022;
background-color:#EFEFEF;
border:2px solid #00A4EF;
display:none;
text-align:justify;
}
#slidediv p {
margin: 15px;
font-size: 0.917em;
}
#contentdiv {
clear: both;
margin: 0 auto;
max-width: 534px;
}
</style>
</head>
<body>
<div id="contentdiv">

<h2>Slide DIV from right to left or left to right.</h2>
<p>
<input type="button" id="btnleft" value="Left to Right" />
<input type="button" id="btnright" value="Right to Left" />
</p>
<div id="slidediv">
<p>Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com </p>
</div>
</div>

</body>
</html>
Demo



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

Irtekaz Ahmed Khan said...

fantastic, thanks sir

Anonymous said...

nice!!!

Unknown said...
This comment has been removed by the author.
Anonymous said...

super

lshcollection said...

hi, if user click outside div, how to make it return back

Anonymous said...

Thanks a lot!

Unknown said...

Wow nice!!

Mansour said...

You saved my life, Thanks!

Unknown said...

In Html Version Everything is working fine, but I have implemented in wordpress but it's working

Unknown said...

Thank you! I put iframe in div. Is it posible when after 2nd onclick(show >hide>show) save changes in div ? For example : i open other web page by div , make changes , hide div and show web page with changes

Unknown said...
This comment has been removed by the author.
Unknown said...

if it is not dificult write please code

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.