?
Solved

How to use scrollLeft?

Posted on 2007-10-19
5
Medium Priority
?
178 Views
Last Modified: 2008-01-09
Hi,

I must misunderstand something. I thought the following code will move the elements in body by 1000 and will show the number 1000:
document.body.scrollLeft=1000;   //Why nothing happened with this
alert(document.body.scrollLeft;     //Why this is zero?
0
Comment
Question by:johnwood
  • 3
5 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 20113987
Try:
document.all.getElementByTagName("body")[0].scrollLeft
Furthermore, I believe it works only for IE.
More info here:
http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/scrollLeft.htm

0
 
LVL 28

Accepted Solution

by:
TName earned 200 total points
ID: 20114549
Hi, first, use document.documentElement.scrollLeft.
Then, make the body wide enough. You can only set the scrollLeft property to a value that is smaller than or equal to the total width of the body tag minus the horizontal resolution in px. Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
  body {width:3000px; height:600px; border:2px solid #c00; }
</style>
<script>
function test() {
  document.documentElement.scrollLeft=1000;  
  alert(document.documentElement.scrollLeft);      
}
</script>
</head>
<body onClick="test();">
  Click somewhere inside the red border...
</body>
</html>
0
 
LVL 28

Expert Comment

by:TName
ID: 20114573
@hielo

   document.all.getElementByTagName("body")[0]
will not work as a way of accessing the body element. It should be
  document.getElementsByTagName('BODY')[0]  
so "document." instead of "document.all" and there should be a (plural) "s" - "Elements"...
0
 

Author Comment

by:johnwood
ID: 20114602
Thank you hielo and TName!

TName,
I have just tried your code and it worked. However, if I delete the first line
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
it would not work anymore!!! Very strange!!!
0
 
LVL 28

Expert Comment

by:TName
ID: 20114715
That's due to the fact that IE will behave differently in this respect if in strict vs. quirks mode. Have a look e.g. here:
    http://www.quirksmode.org/viewport/compatibility.html
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question