AJAX

Scrollbar help?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2006

Posts: 3

Reputation: Nouvelle is an unknown quantity at this point

Solved Threads: 0

Nouvelle

Offline

Newbie Poster

Scrollbar help?

Nov 12th, 2006

I need serious help with Scrollbars. how can i position them so they go exactly where i need them. say on a picture i need it in the circle area how can i get it there and what do i need to do? Could somebody point me in the right direction or towards a tutorial?

Thanks

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Scrollbar help?

Nov 13th, 2006

•

Originally Posted by Nouvelle

I need serious help with Scrollbars. how can i position them so they go exactly where i need them. say on a picture i need it in the circle area how can i get it there and what do i need to do? Could somebody point me in the right direction or towards a tutorial?

Thanks

Its a bit hard to understand what you want to do exactly.

Do you want to move the scrollbar to a specific position?

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Jul 2005

Posts: 154

Reputation: katarey is an unknown quantity at this point

Solved Threads: 20

katarey

Offline

Junior Poster

Re: Scrollbar help?

Nov 13th, 2006

•

picture i need it in the circle area how can i get it there and what do i need to do?

Please clearify what is the quetion is

Last edited by katarey; Nov 13th, 2006 at 6:18 pm.

Freelance Web Designer & Developer
Http//www.Katarey.com

•

Join Date: Nov 2006

Posts: 3

Reputation: Nouvelle is an unknown quantity at this point

Solved Threads: 0

Nouvelle

Offline

Newbie Poster

Re: Scrollbar help?

Nov 13th, 2006

yeah i need to know how to move it to a certain area on the photo, sorry for the vague descrition.... woulda picture being posted help?

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Scrollbar help?

Nov 13th, 2006

You cannot control the position of the scrollbars.

•

Join Date: Nov 2006

Posts: 3

Reputation: Nouvelle is an unknown quantity at this point

Solved Threads: 0

Nouvelle

Offline

Newbie Poster

Re: Scrollbar help?

Nov 13th, 2006

so i cant move it anywhere? then howcome on some web pages they have it positioned to go along with the picture.

such as.. the picceh above

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Scrollbar help?

Nov 13th, 2006

Not sure what you mean by "positioned to go along with the picture. ". I might just be looking at it from the wrong angle..

As for moving the scrollbar, yes you can do it with JavaScript. Its a bit tricky, but not too complicated.

If you're working with a vertical scrollbar, heres the properties of the scrollbar.

Assume you have an element (el) of ID = mydiv.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var el = document.getElementById('mydiv'); // div element
 
var h = el.scrollHeight; // height of div scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height
var el = document.getElementById('mydiv'); // div element

var h = el.scrollHeight; // height of div scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height

To change where the scrollbar is you'll just be modifying the scrollTop property of the element (that has the scrollbar you want to move).

Eg:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
el.scrollTop + 5; // move vertical scroll 5px down
el.scrollTop - 5; // move vertical scroll 5px up
el.scrollTop + 5; // move vertical scroll 5px down
el.scrollTop - 5; // move vertical scroll 5px up

The scrollTop property shows how many pixels from the top the scrollbar is. So if you want to move it up right to the top, its just el.scrollTop = 0;

However, if you want to move it to the bottom, there is not scrollBottom property, you'll still have to use scrollTop. If you just need it right at the bottom, just make scrollTop an extremely large number like: el.scrollTop = 5000; . That will move it down 5000 px, which is more than any normal screen resolution (I think).

If you want to know specifically how many pixels you are from the bottom, you'll have to use something like:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var el = document.getElementById('mydiv'); // div element
 
var h = el.scrollHeight; // height of div scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height
 
var scrollBottom = h - (y + c); // offset of scroll from bottom
var el = document.getElementById('mydiv'); // div element

var h = el.scrollHeight; // height of div scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height

var scrollBottom = h - (y + c); // offset of scroll from bottom

or you could make it a property of all HTML elements.. so you can use it withought writing all that code over and over..

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
HTMLElement.prototype.scrollBottom = function() {
var el = this; // element
 
var h = el.scrollHeight; // height of element scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height
 
var scrollBottom = h - (y + c); // offset of scroll from bottom
 
return scrollBottom;
}
HTMLElement.prototype.scrollBottom = function() {
var el = this; // element

var h = el.scrollHeight; // height of element scroll
var y = el.scrollTop; // vertical scroll offset from top (of scrollHeight)
var c = el.clientHeight; // scroll bar height

var scrollBottom = h - (y + c); // offset of scroll from bottom

return scrollBottom;
}

You'd use it like el.scrollBottom();
(not sure how to set just a regular property).

ref:
http://www.quirksmode.org/js/doctypes.html
http://www.mozilla.org/docs/dom/mozilla/protodoc.html

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Scrollbar help?

Nov 13th, 2006

All of the above post is related to events generated by the scrollbar. They won't help you "position it".

In your example, the image is likely in an IFRAME. The scrollbar is attached to the frame, not the image.

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Scrollbar help?

Nov 13th, 2006

•

Originally Posted by tgreer

All of the above post is related to events generated by the scrollbar. They won't help you "position it".

In your example, the image is likely in an IFRAME. The scrollbar is attached to the frame, not the image.

oh duh.. you wanna move the scroll bar itself.. lol.. unfortuantely, not possible.

You can create a custom HTML element that looks like and functions like a scrollbar, and place it where ever you want, but it would be a ton of code, if possible...

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Scrollbar help?

#10

Nov 14th, 2006

you can use bookmarked anchor tags to position the user's view somewhere. combined with some absolute positioning over the part of your image you want in focus, and a bit of offset calculation (you'll see what I mean if you take the <br/> parts out of the <a> tags), you'll get something like the effect you described...

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a rel="nofollow" class="t" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html>
<head>
<title>Anchor Bouncing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<img src="big_picture.gif" width="100%" height="1000px"/>
<a name="place1" style="position:absolute;left:100px;top:50px;" href="#place2"><br/><br/><br/><br/><br/>Place 1 is here</a>
<a name="place2" style="position:absolute;top:400px;left:50%;" href="#place3"><br/><br/><br/><br/><br/>Place 2 is here</a>
<a name="place3" style="position:absolute;left:50px;top:700px;" href="#place1"><br/><br/><br/><br/><br/>Place 3 is here</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a rel="nofollow" class="t" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html>
<head>
<title>Anchor Bouncing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<img src="big_picture.gif" width="100%" height="1000px"/>
<a name="place1" style="position:absolute;left:100px;top:50px;" href="#place2"><br/><br/><br/><br/><br/>Place 1 is here</a>
<a name="place2" style="position:absolute;top:400px;left:50%;" href="#place3"><br/><br/><br/><br/><br/>Place 2 is here</a>
<a name="place3" style="position:absolute;left:50px;top:700px;" href="#place1"><br/><br/><br/><br/><br/>Place 3 is here</a>
</body>
</html>