Today i am here to share something that how to move your pages in left side with the help of javascript and Jquery . please follow some procedures to do this example and later you can try in your own way .
1. HTML
<html>
<head><title>Scroll</title>
<!-- Embed the style tag here -->
<body>
<div id=header>
<a href=#one > one</a>
<a href=#two >Two</a>
<a href=#three>Three</a>
</div>
<div id=float_left>
<div id=one> Hai hello </div>
<div id=two> Second page</div>
<div id=three>Third page</div>
</div>
</body>
</html>
<head><title>Scroll</title>
<!-- Embed the style tag here -->
<body>
<div id=header>
<a href=#one > one</a>
<a href=#two >Two</a>
<a href=#three>Three</a>
</div>
<div id=float_left>
<div id=one> Hai hello </div>
<div id=two> Second page</div>
<div id=three>Third page</div>
</div>
</body>
</html>
2.CSS
please be carefull when you change the CSS because it may change the page view entirely .
<style>
#html
{ color:#BEBEBE; }
#header
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
background-color:#BEBEBE;
padding:20px;
}
#float_left
{
margin-left:100px;
margin-top:50px;
}
#one,#two,#three
{
padding-left:150px;padding-top:100px;
width:3000px;
float:left;
color:blue;
text-shadow:1px 1px 2px #f0f0f0;
margin:20px 0px 0px 50px;
}
body {
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
</style>
3.Javascript with jquery
Do not forget to add the jquery.min.js
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
The real javascript to slide
<script>
$(document).ready(function() {
$("a[href*=#]").bind('click',function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left
}, 1000,function() {
location.href = target;
});
});
});
</script>
That's it now you would have understood how it works .
if you want to see the demo click below
vijayansparks.site11.com
the home page is in panorama .
later :)
No comments:
Post a Comment