•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 402,884 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,064 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 9972 | Replies: 14
 |
•
•
Join Date: Nov 2006
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Scrollbar help? 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
Thanks
•
•
Join Date: Sep 2005
Posts: 676
Reputation:
Rep Power: 5
Solved Threads: 39
Practically a Master Poster
•
•
•
•
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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
Junior Poster
•
•
•
•
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 5:18 pm.
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Nov 2006
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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,590
Reputation:
Rep Power: 7
Solved Threads: 34
You cannot control the position of the scrollbars.
•
•
Join Date: Nov 2006
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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: 676
Reputation:
Rep Power: 5
Solved Threads: 39
Practically a Master Poster
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.
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:
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:
or you could make it a property of all HTML elements.. so you can use it withought writing all that code over and over..
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
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.
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 heightTo 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:
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:
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..
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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
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.
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: 676
Reputation:
Rep Power: 5
Solved Threads: 39
Practically a Master Poster
•
•
•
•
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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 943
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
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...
i've uploaded it so you can see it working:
http://www.fusiongroupuk.com/anchorbouncing/index.html
try:
http://www.fusiongroupuk.com/anchorbouncing/index.html#place1
http://www.fusiongroupuk.com/anchorbouncing/index.html#place2
http://www.fusiongroupuk.com/anchorbouncing/index.html#place3
or click the anchors to bounce about =P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>
i've uploaded it so you can see it working:
http://www.fusiongroupuk.com/anchorbouncing/index.html
try:
http://www.fusiongroupuk.com/anchorbouncing/index.html#place1
http://www.fusiongroupuk.com/anchorbouncing/index.html#place2
http://www.fusiongroupuk.com/anchorbouncing/index.html#place3
or click the anchors to bounce about =P
Last edited by MattEvans : Nov 14th, 2006 at 1:09 am. Reason: , != .
If it only works in Internet Explorer; it doesn't work.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Abnormal Behaviour of Vertical ScrollBar (VB.NET)
- need help making scrollbar (HTML and CSS)
- scrollbar applet (Java)
- Impossible to scroll a richtextbox from a scrollbar (VB.NET)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Link-style
- Next Thread: Does window.stop() work in IE?
