Homemade Scrollbars

Jun 22, 2003

This code is for an external, homemade scroolbar set, requiring 8 images:

arrowDown_on.gif --Active Button used when scrolling down (down arrow) http://www.boomspeed.com/buzz_killr_x/arrowDown_on.gif

arrowDown_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowDown_off.gif

arrowUp_on.gif --Active Button used when scrolling up (up arrow) http://www.boomspeed.com/buzz_killr_x/arrowUp_on.gif

arrowUp_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowUp_off.gif

arrowTop_on.gif --Active Button used to go straight to top of page (bigger up arrow) http://www.boomspeed.com/buzz_killr_x/arrowTop_on.gif

arrowTop_off.gif --Inactive Button http://www.boomspeed.com/buzz_killr_x/arrowTop_off.gif

arrowBottom_on.gif --Active Button used to go straight to bottom of page (bigger down arrow) http://www.boomspeed.com/buzz_killr_x/arrowBottom_on.gif

arrowBottom_off.gif --Inactive Arrow http://www.boomspeed.com/buzz_killr_x/arrowBottom_off.gif

var newWindow = null;
var scrolling = 0;// Controls whether the layer is scrollin or not
var yT = 25;// Pixel position the top of the scrolling layer should be set to
var lT = 25;// Initial position for the top of the layer
var yI = 5;// Increment that the scrolling layer should move at
var yH = 0;
var domStyle;// Stores the generic DOM for the scrolling layer to access style properties
var dom;// Stores the generic DOM for the scrolling layer
var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;

if (document.images){
imag = new Array();

imag[0] = "media/arrowUp_off.gif";
imag[1] = "media/arrowUp_on.gif";

imag[2] = "media/arrowDown_off.gif";
imag[3] = "media/arrowDown_on.gif";

imag[4] = "media/arrowTop_off.gif";
imag[5] = "media/arrowTop_on.gif";

imag[6] = "media/arrowBottom_off.gif";
imag[7] = "media/arrowBottom_on.gif";

im = new Array();
for (var i = 0; i < imag.length; i++)
im[i] = new Image();
im[i].src = imag[i];

if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}

var isIE = 0;

if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;}

var xC = 5;
var theDelay = 0;
var frameRateMax = 48;
varframeRate = 1;

function scrollPageTo(xN) {

if (xC > xN) {
xC = xC - frameRate;
posDif = (xC - xN)/(frameRate/2);
if (xC < xN) { frameRate = 1; return; }
else {
xC = xC + frameRate;
posDif = (xN - xC)/(frameRate/2);
if (xC > xN) { frameRate = 1; return; }
if (isIE) {
document.body.scrollLeft = xC;
else {
if ((posDif >= frameRateMax) && (frameRate != frameRateMax)) frameRate = frameRate + 1;
else if (frameRate > 1) frameRate = frameRate - 2;
setTimeout ('scrollPageTo(' + xN + ')',theDelay);

function findDOM(objectID1,objectID2,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID2).style) ; }
else {
if (isAll) { return (document.all[objectID2].style); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }
else {
if (isID) { return (document.getElementById(objectID2)) ; }
else {
if (isAll) { return (document.all[objectID2]); }
else {
if (isLayers) {
if (objectID1) { return (document.layers[objectID1].layers[objectID2]); }
else { return (document.layers[objectID2]); }

function openWindow(contentURL,windowName,windowWidth,windowHeight) {
widthHeight = 'height=' + windowHeight + ',width=' + windowWidth + ',scrollbars=yes'
newWindow = window.open(contentURL,windowName,widthHeight);

function closeWindow() {
if (newWindow != null) {
newWindow = null;
function startScroll(objectID1,objectID2,direction) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
scrolling = 1;
yT = domStyle.top;
if (document.getElementById) {
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
if (window.innerHeight != null)
yH = window.innerHeight - 25;
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
yH = yH - dom.clip.height;

function scroll(direction) {
if (scrolling == 1) {
if ((direction == 1) && (yT <= lT)) {
yT = (yT/1) + yI;
if (yT > lT) yT = lT;
domStyle.top = yT;
else {
if ((direction == 0) && (yT >= yH)) {
yT -= yI;
if (yT < yH) yT = yH;
domStyle.top = yT; }
if (document.getElementById) {
yT = domStyle.top;
pxLoc = yT.indexOf('px');
if (pxLoc >= 1) yT = yT.substring(0,pxLoc);
code2run = 'scroll('+ direction + ')'
return false;

function stopScroll() {
scrolling = 0;
dom = null;
domStyle = null;
return false;

function URB(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
dom = findDOM(objectID1,objectID2,0);
if (window.innerHeight != null)
yH = window.innerHeight - 25;
yH = document.body.clientHeight - 25;
if (dom.offsetHeight != null)
yH = yH - dom.offsetHeight;
yH = yH - dom.clip.height;
domStyle.top = yH;
dom = null;
domStyle = null;

function URT(objectID1,objectID2) {
domStyle = findDOM(objectID1,objectID2,1);
domStyle.top = lT;
dom = null;
domStyle = null;

function toggle(imgName,num){
if (document.images && imgName){
imgName.src = im[num].src;
return false;

**Please do not use my images, as they were provided for examples only.

View 9 Replies


IE6, Xhtml, Scrollbars And You

Jul 20, 2005

IE6 in standards mode doesn't seem to hide scrollbars on the body element
(overflow:hide) Ain't this a quandary. I have it in my head that I need to
specify html instead. The scrollbars do hide on Gecko browsers though, so
there is definitely a disagreement among browser developers on how to
implement scrollbars (as a side note, Gecko browsers with their notoriously
bug-ridden resize code seem to always screw up when asked to stretch and
scroll divs, even when the page is reloaded on every resize!)

My first thought is to modify the CGI that generates the style sheet as I
already have code that deprecates the document type when hidden scroll bars
are required on IE6 (but not IE5.) This is based on the simple empirical
evidence that the scroll bars are still there on IE6 in standards mode, so
the optimal document type (XHTML strict) cannot be used. So I could just
change this to output an html style (rather than a body style) for IE6 and
lose the deprecation (it wouldn't be needed at this point.)

So the question is this. Given that CGI-based processing of browser
versions for these kinds of tweaks is taboo, what would you check on the
client side before dynamically generating the style for the body and/or html
element? It doesn't seem like you could just send both as this would surely
break some older browsers (I know you can do tricks with comments and such,
but that only works for NS4 and maybe IE3 AFAIK.)

documentElement is the only thing I can think of that indicates standards
mode and NS6/Mozilla support this AFAIK.

IE Conditional comments perhaps? I would hate to hard-code a test for a
browser version number into the actual document (for obvious reasons), but I
guess it is an alternative if the browser version is exposed to these

I don't see any other way to deal with a situation like this than with
server-side code that looks at the browser's version number and makes the
necessary adjustment. And there are lots of little differences like this
that just don't seem to have viable client-only solutions. There's DirectX
stuff (probably is an object detect for that) and funky colored scrollbars
(hey people ask for them) and document margins (Opera did them slightly
differently than the rest as I recall) and now this scrollbar thing.

View 24 Replies View Related

Scrollbars In Textarea

Jul 20, 2005

I have used a textarea to display typewriter effect text. The scrollbars are displayed by default. What is the code to disable the scrollbars in a textarea form field? < scrolling="no"> does not seem to work.

View 2 Replies View Related

Repositioning The Scrollbars

Feb 4, 2004

in the parent window, i have some objects that will release a pop-up window. in the pop-up window you can make various changes that will affect the database. to see those changes in the parent window, i need to refresh...right?

well, when i refresh...if you're working at the bottom of the page it pops the scrollbars all the way back up to the top. is there a way to reposition the scrollbars without the use of anchors?

View 2 Replies View Related

Detect If Scrollbars Visible

Jul 23, 2005

Is there anyway to detect if scrollbars were made visible in a
textarea? I'm not talking about initial setting of the scrolling
attribute, but rather whether scrollbars have been added either
horizontally or vertically based on the users text input?

View 2 Replies View Related

Scrollbars In Window.open()

May 13, 2006

After i open a new window can i show scrollbars ???
(if an image is bigger than my screen)

Something like :

xxx(a,b) {
if (a < b){
self.scrollbars = true;
} else {
self.scrollbars = false;

well, the example does not work, but is there a way to do something like
that ???

View 4 Replies View Related

Vertical Viewport Without Scrollbars?

Apr 25, 2007

I'm looking for an solution to find out the real vertical viewport -
without the height of horizontal scrollbars.

I have two frames side by side. The left one declared 'scrolling="no"'
and the right one 'scrolling="auto"'. For the left frame it is important
to know if the right frame has a horizontal scrollbar and how sick it
is. So I have tried to compare the viewport of both frames.

Using 'window.innerHeight', 'document.documentElement.clientHeight',
'document.body.clientHeight' or 'document.body.offsetWidth' I get the
height including the scrollbars.

The same problem with two frames (rows="50%,50%) i've solved with block
elements declared with a width of 100%. Comparing the offsetWidth of
both, I can see if there is a scrollbar in one frame. But with frames
side by side that doesn't work.

View 2 Replies View Related

How To Hide Scrollbars In Netscape?

Jul 20, 2005

i use netscape 7 and want to hide the scrollbars of the window when
something happens. I tried this:


Nothing works. Is it also possible only to hide the vertical scrollbar instead of both?

View 6 Replies View Related

JQuery :: How To Stylize The Scrollbars

Oct 10, 2011

I was checking on jQuery plugins, but most of the scrollbar ones are using like 4 - 5 div classes just to stylize one scrollbar and most of the classes names must be specific to make it work with the plugin, is there any way to give some style to a scrollbar without doing all that coding?

View 2 Replies View Related

JQuery :: Scrollbars On The UI Grid?

Jun 9, 2010

How exactly does the sizing of the grid work? I have a grid that I've tried to experiment with and it seems like no matter what setting I use, there is a vertical and a horizontal scrollbar. the only thing that changes is if it stretches to fill the its container div. How do I get it to fit within a specific width and also to not display scrollbars?

View 3 Replies View Related

Open New Window With No Scrollbars Etc?

Aug 23, 2009

I am trying to add a link to a web page which will open a new window which has no scrollbars ,toolbars,menu etc for a nice clean look(the window will display a flash image display gallery) I know you do this with javascript but am having trouble placing the javascript in the html ,what would be ideal is if someone was kind enough to give me an example of exactly how the complete page code would look with the javascript included,it need only be a very simple page with no content except the link which maybe we could just call sample.

View 2 Replies View Related

Detecting The Horizontal Scrollbars?

May 16, 2011

I have mangled up the following to add fixed position left/right scroll links to a horizontal scrolling site:

Code JavaScript:

$(document).ready(function() {
$('#container').append('<ul class="scroll_controllers"><li class="left"><a href="#" title="Scroll Left">«</a></li><li class="right"><a href="#" title="Scroll Right">»</a></li></ul>');
$('.right a').click( function(){


I'd like to make it conditional on there being a need to scroll.

View 2 Replies View Related

Having IFrame With Constant Scrollbars?

Oct 9, 2011

how to have an iframe with constant scrollbars so the scrollbars are visible even though there is nothing to scroll!

I have this now:


<script type="text/javascript">
function ChangeScrollState (select) {
var iframe = document.getElementById ("thisIframe");


If I hit the option with scroll I get what I want, but how do I make this static?

View 2 Replies View Related

How To Add Scrollbars To Image Popup?

Feb 15, 2006

I setup the image popup ( http://www.sitepoint.com/article/res...it-images-size) on our portfolio:www.visualdevelopments.com/portfolio but the large image I want to display the whole thing. Can I set this somehow to add scrollbars so the user can see the entire image if the image is larger then their screen size?

View 2 Replies View Related

Detect If Scrollbars Are Visible Inside A Div

Aug 11, 2005

I have a div that has an overflow set to auto. I would like to know if
the scrollbars are visible in javascript.

View 3 Replies View Related

Image Dragging Outside Of Window, Scrollbars

Jun 22, 2007

I'm working on a script that involves dragging an element around a
page. When it is dragged so that part is out of the window, the
scrollbars are activated. Is there a way to turn off this behavior?

View 3 Replies View Related

JQuery :: Scrollbars On Dynamic Content?

Jan 5, 2012

I have a div that is filled with content dynamically and is fixed so it will always be in the same place even when you scroll. I need scrollbars to appear when the div is has too much content and goes beyond the screenborder.

View 1 Replies View Related

Force Scrollbars To Bottom Of Div Onload?

Mar 18, 2010

i want the scrollbars to be preset at the bottom of the div each time someone visits the site.

<div id="scroller-shoutbox" border="0" cellspacing="0" style="background-image:url(images/table-bg.png);border-bottom:solid 1px #333; width:498px; height:300px;border-left:solid 1px #333;border-right:solid 1px #333; overflow-x: hidden; overflow-y: auto;">


the latest content is unseen because the scrollers are at the top

View 4 Replies View Related

Show Iframe Scrollbars Only On Mouseover?

May 12, 2011

I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display I am using the following code for the iFrame but believe that I need to add some script to make it work:

<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"

View 1 Replies View Related

Window.onresize, Width & Scrollbars

May 17, 2007

I'm listening for the window.onresize event and trying to get the document.body.clientWidth afterwards to make sure a wide block fits onscreen. I'm working in Firefox and the thing is, when a scrollbar is added to the page due to content getting longer, the body.clientWidth gets smaller, but the window.onresize doesn't fire (I guess this makes sense as the window hasn't been resized per se).

I am assuming that I will have to check the body.clientWidth manually after the content gets longer and then call my resize function if so. But is there a way to achieve this or watch body.clientWidth other than window.onresize?

View 2 Replies View Related

Window.open - Fullscreen Scrollbars=no

Jan 25, 2003

I'm trying to open a fullscreen page using this link:

<a class=sangnavn href="javascript:void(0);" if low.txt&side=1','',' fullscreen=yes, scrollbars=no')";>Let if low</a>

But I still gets a deactivated scrollbar on the right side, and I don't want it

View 2 Replies View Related

Fullbrowser Canvas Element W/o Scrollbars

Jul 14, 2011

I'm playing around with full browser canvas element it seems to spill beyond the browser bounds generating horizontal and vertical scrollbars.This is the technique I'm using: [code]I've also tried to wrap the canvas element inside a div and set that div's overflow equal to hidden, but the results are unchanged.

View 2 Replies View Related

JQuery :: Hide Scrollbars On Parent Of Iframe?

Jul 14, 2011

I have a site project where I'm using an overlay to display an iframe that contains a slide show. When the overlay/iframe loads there is a scrollbar on the parent window. What would be the proper jquery syntax to write a function that tells the parent window to set overflow to hidden to hide the scrollbar when the iframe loads? I was thinking maybe this, but I'm not sure of the correct syntax:

$(function() {


View 3 Replies View Related

JQuery :: Compute Body Width WITHOUT Scrollbars?

Jun 15, 2009

I have an application that resizes itself upon window resize. Theproblem is that if I resize down the window so it is smaller, twoscrollbars appear during resize (nothing new for now...), but thecomputed body width is the width with the scrollbars.Then, when I stop resizing, my app resizes itself, but as you may haveguessed, there are a small empty space on right and bottom,corresponding to the scrollbars.I have not found a pretty way to do it (of course I could set a timerinside my resize function that will call itself again 10ms later, just

View 2 Replies View Related

Interferences With Scrollbars EX: Sizes, Placements, Positions

Nov 17, 2007

Interferences with scrollbars:

What would effect a scrollbar in a browser on a website?

Let me clear that up. While writing a "rain effect" script, what could interfere with the scrollbar actually not showing up on that specific webpage.

Below is the script I am working with - If in any instance someone may need to review a certain area of it. Code:

View 1 Replies View Related

Random Resizeable Background - Avoiding Scrollbars

Jan 19, 2010

I am building a website with a very plain main page. It displays some text but it also displays a random background avoiding scrollbars, etc. I've managed to do the random image thing, but I also want it to scale the random image. Also I have tried this same thing and I got it working but in a different file, I just don't know how to combine this two solutions. I attach the code of both files:


View 1 Replies View Related

Copyrights 2005-15 www.BigResource.com, All rights reserved