how to scroll the window horizontally scroll?
I got asked by my coleague to horizontal scroll the window , let me explain the scenario , page width is 1500px with a 1500px image in back ground and it should be always centered on page load and window resized. i got a solution thanx to jQuery.scrollTo plugin.
<html>
<head>
<title>how to center the window for small screen</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<style type="text/css">
<!--
#container {
width: 1500px;
border: 1px solid #333;
min-height:500px;
margin:0 auto;
text-align:center;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>This container has 1500px width and centered into the view port.</h1>
<h2> if this container is seen in less than 1500px ,</h2>
<h3> it should be scrolled to the centered on</h3>
<h4>page initializes and window resizes</h4>
</div>
<script>
$().ready(function(){
$.scrollTo('50%',{axis:'x'});
$(window).resize(function(){$.scrollTo('50%',{axis:'x'});});
});
</script>
</body>
</html> |