Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Homemade Scrollbars

    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_...wBottom_on.gif

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

    Code:
    		<script>
    			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;
    var	frameRate = 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 {
    		scrollTo(xC,0);
    	}
    	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);
    	newWindow.focus()
    }
    
    function closeWindow() {
    	if (newWindow != null)  {	
    	 newWindow.close();
    	 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;
    			else 
    				yH = document.body.clientHeight - 25;
    			if (dom.offsetHeight != null) 
    				yH = yH - dom.offsetHeight;
    			else
    				yH = yH - dom.clip.height;
    			scroll(direction);
    		}	
    		
    		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 + ')';
    				setTimeout(code2run,0);
    			}
    			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;
    			else 
    				yH = document.body.clientHeight - 25;
    			if (dom.offsetHeight != null) 
    				yH = yH - dom.offsetHeight;
    			else
    				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;
    		}
    		</script>
    **Please do not use my images, as they were provided for examples only.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It would be better if you included a html example page so we could see what's gonna happen before jumping thru all those hoops.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #3
    Regular Coder
    Join Date
    May 2003
    Location
    34° 54' N 82° 13' W
    Posts
    996
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple CSS

    This simple CSS script works just as good, and much easier
    Code:
    <style type="text/css">
    BODY {scrollbar-base-color:gray;
               scrollbar-arrow-color:black;
               scrollbar-darkshadow-color:white;
               scrollbar-3dlight-color:black;
               }
    </style>

    Of course, the colors can be modified to suit your desires.


    Stevie Peele
    Neverside IRC Network - irc.veonex.net | tc.tutorialnetwork.org
    #dev - any programming,etc. question
    #design - design discussion and critque
    #central - general chat
    Come join us!

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    LOL, BURN!!


    Oh, well actually, it's not really the same, with the CSS thing, it's always the same arrows. He has custom arrows.
    Shawn

  • #5
    New Coder
    Join Date
    Jun 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am working on a site that has them in it, but it will be tomorrow at earliest before its up. In the meantime, go to www.sandmanfilm.org to see them in action.

    I had another set that I got out of a book, DHTML & CSS, but they are horrible, so I found their design and modified it enough so that it isn't quite the same.

  • #6
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The site you posted says there is a "bug" in Netscape that will not allow you to view the site. It is just Flash. What bug is there? Is it the arrow script?

    MNS

  • #7
    New Coder
    Join Date
    Jun 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beats me, I use IE and Opera. It's not my site, but here's a theory. It uses several different scripts, anyone who has seen can explain it, that do strange things, frame transitions, scroll bars, etc. I am having a little trouble getting the bars to work on my site, don't know why. As soon as I finish it, I'll get it up, and then you should be able to see it.

  • #8
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looking at the code, it's actually an IE/Opera bug that he's taking advantage of. Netscape is doing it right.

    He uses tables for the arrow navigation, and he set certain widths for the TD values. Because of default padding issues, the arrows are side-by-side in Netscape, while they are all vertical in IE/Opera. He needs to fix his tables (i.e. use 4 TR/TD's instead of 2) in order for it to work just fine.

    No, it's not a Netscape bug, it's the author's poor coding...

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #9
    Senior Coder
    Join Date
    Mar 2003
    Location
    OHIO
    Posts
    1,438
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Skyzyx

    Thanks for that clarification.

    MNS

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That site's pretty cool...I just thought it was a huge page turned sideways with anchors.
    A new black and white silent movie! What will they think of next?
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •