Log in

View Full Version : Resolved Scrollbar Keeps Moving



Abbster22
01-06-2010, 12:48 AM
What's going on is every time a browser window resizes in Safari, the scrollbar that I created using the JavaScript from this site (http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html) and created my own custom arrows, handle, and scrollbar. I'm wondering how to have it so that when the user resizes the browser window that I can have the content and scrollbar be in the middle and have the scrollbar stay next to the content? Please let me know if anything else is needed.


Here is my CSS:
#scroller {
position: relative;
height: 275px;
width: 550px;
overflow: hidden;
}

.scroller-content {
position: absolute;
top: 0px;
left: 0px;
}

#scrollbar-content {
position: absolute;
top: 40px;
left: 60px;
}

.Scrollbar-Up {
cursor: pointer;
width: 28px;
height: 36px;
position: absolute;
top: 270px;
left: 880px;
}

.Scrollbar-Down {
cursor: pointer;
width: 28px;
height: 36px;
position: absolute;
top: 457px;
left: 880px;
}

.Scrollbar-Track {
width: 9px;
height: 151px;
position: absolute;
top: 306px;
left: 890px;
background: transparent url(/scrollbar.png) no-repeat center center;
}

.Scrollbar-Handle {
position: absolute;
width: 42px;
height: 25px;
}

Here is the HTML:
<div id="scrollbar-content">
<img src="images/up_arrow.png" class="Scrollbar-Up" />
<img src="images/down_arrow.png" class="Scrollbar-Down" />
<div class="Scrollbar-Track">
<img src="images/scrollbar_handle.png" class="Scrollbar-Handle" />
</div>
</div>
<div class="content">
<div id="scroller">
<div class="scroller-content">
This is where the content goes.
</div>
</div>

jscheuer1
01-06-2010, 06:35 AM
Please post a link to the page on your site that contains the problematic code so we can check it out.

Abbster22
01-06-2010, 06:39 AM
Thank you very much but I have the problem resolved. =] I don't have the site currently posted up yet, but it will be up in a day or two.

jscheuer1
01-06-2010, 06:55 AM
That's OK then, we won't need a link to it.