Weird Thoughts From Eric's Head

Tags - Categories : All | AJAX | BUSINESS | PERSONAL | PROGRAMMING | BOOK REVIEW

Things you would like to say at work
01. I can see your point, but you're still full of crap.
02. I don't know what your problem is, but I'll bet it's hard to pronouce.
03. I see you've set aside this special time to humiliate yourself in public.
04. I'll try being nicer if you'll try being smarter.
05. Ahh...I see the screw-up fairy has visited us again.
06. I like you. You remind me of when I was young and stupid.
07. I'm already visualizing the duct tape over your mouth.
08. The fact that no one understands you doesn't mean you're an artist.
09. What am I? Flypaper for freaks!?
10. And your cry-baby whiny-assed opinion would be...?
11. This isn't and office. It's Hell with fluorescent lighting.
12. If I throw a stick, will you leave?
13. Whatever kind of look you were going for, you missed.
14. Can I trade this job for what's behind door #1?
15. Chaos, panic, & disorder - my work here is done.

Scroll to an Element
Another common question I see is how do I scroll the window to a certain element on the page? Well you need to use the window.scrollTo() method to do it. The scrollTo() method recieves a x and y position.

For example scrollTo(100,200) would scroll to the 100 pixels to the right and 200 pixels down the page.

Now you are thinking, I do not knw the position of the element. It is just relatively positioned and it can be at a different spot depending on the size of the user's text on the screen.

Well I combined my script to find the position of any element on the page with the scrollTo() function.

The script finds the x and y position of the element that it is passed. You can do this for any element on the page that can be referenced.

The code:

<script>
function ScrollToElement(theElement){

  var selectedPosX = 0;
  var selectedPosY = 0;
              
  while(theElement != null){
    selectedPosX += theElement.offsetLeft;
    selectedPosY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }
                        		      
 window.scrollTo(selectedPosX,selectedPosY);

}
</script>
Now you can call the element on the body onload. A element with an id
<body onload="ScrollToElement(document.formName.elementName)">
A form element
<body onload="ScrollToElement(document.formName.elementName)">
Also if you want the form element to have focus. Do not forget to add elementReference.focus(). Example:
<body onload="ScrollToElement(document.formName.elementName);
document.formName.elementName.focus()">
Now I hope this helps you out!

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages


Hi. I use a DIV element to display a tree. The tree looks like the Window Explorer, with folders and +/- to go up or down in the tree. I use overflow: auto; to get scrollbars if the tree gets to big for the DIV. My problem is: I scroll down to a line and click + or the name below the + , then the screen moves to the next page. When i come back the scrollbar starts at the top again. I want to have position of the scrollbar at the point I was before and focus on that name in the tree. Can you help.
I just posted an article on scrolling a div to the last know position. See if it works.
http://radio.javaranch.com/pascarello/2005/07/18/1121709316718.html </br/> Eric
This was just the script that I was looking for!
awesome, thanks!
i have a drop down collection in my form to where the page scrollto. i used your function by passing the element as document.formName.elements["list[4].item"]. this didn't work, am getting the x and y coordinates as NAN. could you please help me. I appreaciate your reply at your earliest.


Add a comment

Title
Body
HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 6 + 2 = (Helps stop blog spam)
Name
E-mail address
Website
Remember me Yes  No 

E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).

TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1105293729000