Scrollbar help?

[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

[digital-ether]

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?

[katarey]

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 :?:

[Nouvelle]

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?

[tgreer]

You cannot control the position of the scrollbars.

[Nouvelle]

[IMG]http://i50.photobucket.com/albums/f330/ponybutt/Hl%20photos/Untitled-2-1.jpg[/IMG]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

[digital-ether]

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.

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:

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

[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.

[digital-ether]

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...

[MattEvans]

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
parts out of the tags), you'll get something like the effect you described...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">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>


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

[tgreer]

What does that have to do with scrollbars, Matt?

[MattEvans]

well, it sounds like Nouvelle would rather manipulate focus than dynamically move the scrollbar, one could even set up a js timer routine to iterate between a vertical line of anchors, which would force movement of the scrollbar.

it would make a horrible clicking noise though... could also try using javascript to move focus through a vertical line of objects on a page. might be more graceful if movement is what's wanted.

[MattEvans]

could also try using javascript to move focus through a vertical line of objects on a page. might be more graceful if movement is what's wanted.

a'la http://www.fusiongroupuk.com/sillyscrolling

well. maybe it didn't turn out so graceful. once it starts moving you'll probably have to close your browser window.

[digital-ether]

a'la http://www.fusiongroupuk.com/sillyscrolling well. maybe it didn't turn out so graceful. once it starts moving you'll probably have to close your browser window.

interesting concept!

theres also the window.scroll() and window.scrollTo() properties that allow you to move the scrollbar.

I use the following function (part of a larger lib) to get the window scroll offset:
[HTML]/**
* Current x/y scroll offset of the window
*/
window.scrollOffset = function(parent) {
this.x = 0;
this.y = 0;
var doc = parent ? parent.document : document;
var win = parent ? parent.window : window;

if (doc.documentElement && doc.documentElement.scrollTop) {
this.y = doc.documentElement.scrollTop;
this.x = doc.documentElement.scrollLeft;
} else if (doc.body) {
this.y = doc.body.scrollTop;
this.x = doc.body.scrollLeft;
} else if (win.innerHeight) {
this.y = win.pageYOffset;
this.x = win.pageYOffset;
}
}

// example use:

var vertical_win_scroll = (new window.scrollOffset()).y;

[/HTML]

together with window.scroll() you can achieve the same effect... though not as interesting...

[MattEvans]

I use the following function (part of a larger lib) to get the window scroll offset: /// together with window.scroll() you can achieve the same effect...

that definately seems nicer =P

methinks on re-reading Nouvelle's post, maybe he/she wants to create another scrollbar around an object... you can do that with a DIV, and CSS:

div.scrollish{
   overflow:scroll;
}
---OR---
div.scrollish{
   overflow:auto;
}

be aware, putting certain things in scrolling/auto scrolling divs screws them right up: if you put a table with width 100% in a div with a scrollbar, it goes underneath the scrollbar.

i had a similar concept on my website for user uploaded images in blocks of nicely laid out text, instead of resizing the image arbitrariliy i put it as the background image of a div, inside a sized div with scroll set to auto. i changed it because divs don't vertical-align properly >_<

oh, one final thing, you can't have an un-sized div with scroll set to auto. it wouldn't make sense =PEDIT: I do still use them: http://www.fusiongroupuk.com/fuse-data/index.xrm . The IT section is big enough to cause its container to scroll. does that look like the sorta thing you're after?

[julianmoors]

Wow! What have you guys been smoking? Wouldn't it make more sense to use css. Much simpler and is supported even when the user has turned JavaScript off.

div#myelement {
    overflow-x: hidden;
    overflow-y: scroll;
}

If you want to then position the div container then all you have to add is this:

div#myelement {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    top: 200px;
    left: 200px;
}

If you want to constrain the width or height then just add them in the above code. Easy huh?

P.S. The secret to good web design is to keep it as simple as possible.

[digital-ether]

This thread is from 2006. Oveflow-x and overflow-y would not have worked back then across the major browser versions. If I remember correctly IE4-6, Firefox 1.0-1.5 and Netscape, Safari were the major ones. Even overflow:scroll was not usable back then I believe. Only reliable option would have been overflow:auto and position:absolute.

Not to mention the OPs question is not fully understood, hence the number of different solutions pointed out and subsequent questions that led to your answer in 2010.

When a post is referring to a transient topic such as CSS, JS and browser compatibility it is best to leave it when it is dead. It is a useless topic with todays CSS/JS paradise designers now work in.

[julianmoors]

That's funny coz according to the Web Standards Project ( http://www.webstandards.org/2006/10/20/browser-updates-for-october-2006/ ) the browsers were IE7 and Firefox 2.0 but you're right with working with today's browsers, it does seem like paradise.

[digital-ether]

Oveflow-x and overflow-y would not have worked back then across the major browser versions. If I remember correctly IE4-6, Firefox 1.0-1.5 and Netscape, Safari were the major ones.

You're right, IE and FF2.0 were stable. They weren't the major browsers though they had to be considered by then. You'd still have to consider IE6 and Firefox 1.5 as they were the major browsers. IE5.5 and Firefox1.0 were also a fair percentage... somewhat.

The point is the discussion is it's such a long time ago in browser years that it is irrelevant to describe a solution now at a time the browsers being used a totally different.

While we discuss it Firefox4 might just become stable and we should really start thinking about native 3D graphics with hardware acceleration.. yum. ;)

[julianmoors]

While we discuss it Firefox4 might just become stable and we should really start thinking about native 3D graphics with hardware acceleration.. yum.

... that sounds like a great idea and if the client's machine can't support 3d natively then we can always use the many libraries available for flash.