Trying to .scrollLeft with $(window).load function and not working

StackOverflow https://stackoverflow.com/questions/21901521

Question

My problem should be quite simple to solve and I want to do it properly to function across browsers. I would like to have a horizontal scrollbar with overflow-x:scroll and overflow-y:hidden align itself at a specified .scrollLeft position with any refresh of my website.

I have come up with:

<head>
<script type="text/javascript">
$(window).load(function(){
$('outside, html').scrollLeft (100);
});
</script>

<style type="text/css">
div#outside {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
div#inside { width: 500px;  }
</style>
</head>

<body>
<div id="outside">
<div id="inside">A bunch of text here...
</div>
</div>
</body>

I found a JSFiddle to use as a template for my attempt but it does not work when I preview in dreamweaver browsers (safari, chrome, firefox). I am pretty sure this is a simple fix and if anybody could help that would be much appreciated. Thanks!

http://jsfiddle.net/v6EwS/

Was it helpful?

Solution

I think you have to use window.onload event for this,you can use this like this..

HTML

<body onload="myFunction()">
   <div id="foo">
      <div id="bar">
         Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. Hello world. 
         </div>
     </div>
 </body>

JAVASCRIPT

<script type="text/javascript">
   function myFunction(){
      document.getElementById('foo').scrollLeft = 500;
   }
</script>

OTHER TIPS

Try this.

//$( "#foo" ).scrollLeft( 500 );  // Without animation
$("#foo").animate({scrollLeft:500})   // With animation

Fiddle Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top