1+ // custom scroll application developed for three.oh 3/2001.
2+ // thanks to brandon (www.jesterworld.net) and grant (no site cuz he's too pimp for it) for the help w/ the visuals.
3+ // > youngpup > www.youngpup.net
4+
5+ // optimized for the latest version of {3.0} by bob
6+
7+ ThreeOhScroll . mo5 = navigator . userAgent . indexOf ( "Gecko" ) != - 1
8+ ThreeOhScroll . ie4 = navigator . appName == "Microsoft Internet Explorer" && document . all
9+ ThreeOhScroll . ie5 = navigator . appName == "Microsoft Internet Explorer" && document . getElementById
10+ ThreeOhScroll . pc = navigator . platform == "Win32"
11+
12+ // this number is for ie4 pc only - which cannot have the description box be of variable width (or atleast i can't figure out how to).
13+ // you set the number of pixels that the desc tag will be permanently.
14+ ThreeOhScroll . ie4pcDescWidth = 100
15+
16+ // i have no idea why this number is necessary, it just is. it is related to how far the scroller is from the top of the window
17+ // in mozilla, but you will have to play with it to get it just right.
18+ ThreeOhScroll . mozAdjust = ThreeOhScroll . mo5 ? 75 : 0
19+
20+ // this is how long it should take the scroller to animate when the user clicks a marker (in milliseconds)
21+ ThreeOhScroll . aniLen = 250
22+
23+
24+ function ThreeOhScroll ( id )
25+ {
26+ if ( ThreeOhScroll . mo5 || ( ThreeOhScroll . ie4 && ThreeOhScroll . pc ) || ThreeOhScroll . ie5 ) {
27+ this . id = id
28+ this . getMembers ( )
29+
30+ if ( ThreeOhScroll . ie4 && ! ThreeOhScroll . ie5 && ThreeOhScroll . pc ) this . description . style . width = ThreeOhScroll . ie4pcDescWidth
31+
32+ this . clipH = parseInt ( this . container . style . height )
33+ this . PTags = ypGetDescendantsByTagName ( "P" , this . content )
34+ var lastP = this . PTags [ this . PTags . length - 1 ]
35+ var lastPTop = lastP . offsetTop - ThreeOhScroll . mozAdjust
36+ this . docH = lastPTop + Math . max ( lastP . offsetHeight , this . clipH )
37+ this . scrollH = this . docH - this . clipH
38+ this . markersMax = parseInt ( this . markers . style . height ) - 7
39+ this . thumbMax = parseInt ( this . thumbContainer . style . height ) - this . thumbImg . height
40+ this . arrowMax = parseInt ( this . arrowContainer . style . height ) - this . arrowImg . height
41+
42+ this . gRef = "ThreeOhScroll_" + id
43+ eval ( this . gRef + "=this" )
44+ this . thumb . obj = this
45+ this . thumb . onmousedown = this . startDrag
46+ this . thumb . onmouseover = Function ( this . gRef + ".toggleThumb(1)" )
47+ this . thumb . onmouseout = Function ( this . gRef + ".toggleThumb(0)" )
48+ this . thumb . onmouseup = Function ( this . gRef + ".toggleThumb(0)" )
49+ this . thumb . ondragstart = function ( ) { return false }
50+ this . initMarkers ( )
51+ } else {
52+ alert ( 'ha ha!\n\nThe ThreeOh scroller won\'t work for your browser. Don\'t you feel stupid??\n\n I suggest you go get a newer one.' )
53+ }
54+ }
55+
56+ ThreeOhScroll . prototype . initMarkers = function ( ) {
57+ var shtml = "" , sTitle , iTop
58+ for ( var i = 0 ; i < this . PTags . length ; i ++ ) {
59+ sTitle = this . PTags [ i ] . getAttribute ( "description" )
60+ pTop = this . PTags [ i ] . offsetTop - ThreeOhScroll . mozAdjust
61+ iTop = Math . round ( pTop * this . markersMax / this . scrollH )
62+ if ( sTitle && sTitle != "" && sTitle != null ) {
63+ shtml += "<div id='" + this . id + "_marker_" + i + "' "
64+ shtml += "style='position:absolute; left:2px; top:" + ( iTop + 2 ) + "px; "
65+ shtml += "width:5px; height:3px; clip:rect(0 5 3 0); background-color:#CCCCCC; z-index:3;'></div>"
66+ shtml += "<div style='position:absolute; left:0px; top:" + iTop + "px; "
67+ shtml += "cursor:pointer; cursor:hand; width:9px; height:7px; clip:rect(0 9 7 0); z-index:4;' "
68+ shtml += "onmousedown='" + this . gRef + ".scrollTo(" + pTop + ")' "
69+ shtml += "onmouseover='" + this . gRef + ".toggleMarker(this, " + i + ", 1)' "
70+ shtml += "onmouseout='" + this . gRef + ".toggleMarker(this, " + i + ", 0)' "
71+ shtml += "description='" + sTitle . replace ( / ' / g, "|pos|" ) + "'>"
72+ shtml += "<img src='x.gif' width='9' height='7'></div>"
73+ }
74+ }
75+ this . markers . innerHTML += shtml
76+ }
77+
78+ ThreeOhScroll . prototype . getMembers = function ( ) {
79+ this . container = ypGetElementById ( 'filterContainer' ) ;
80+ this . content = ypGetElementById ( 'filterContent' ) ;
81+ this . markers = ypGetElementById ( 'filterMarkers' ) ;
82+ this . thumb = ypGetElementById ( 'filterThumb' ) ;
83+ this . arrow = ypGetElementById ( 'filterArrow' ) ;
84+ this . thumbImg = ypGetElementById ( 'filterThumbImg' ) ;
85+ this . arrowImg = ypGetElementById ( 'filterArrowImg' ) ;
86+ this . thumbContainer = ypGetElementById ( 'filterThumbContainer' ) ;
87+ this . arrowContainer = ypGetElementById ( 'filterArrowContainer' ) ;
88+ this . description = ypGetElementById ( 'filterDescription' ) ;
89+ this . descArrow = ypGetElementById ( 'filterDescArrow' ) ;
90+ }
91+
92+ ThreeOhScroll . prototype . startDrag = function ( e ) {
93+ if ( ! e ) e = window . event
94+ var ey = e . pageY ? e . pageY : e . clientY
95+ this . dragLastY = ey
96+ this . dragStartOffset = ey - parseInt ( this . style . top )
97+ ThreeOhScroll . current = this . obj
98+ document . onmousemove = this . obj . doDrag
99+ document . onmouseup = this . obj . stopDrag
100+ if ( this . obj . aniTimer ) window . clearInterval ( this . obj . aniTimer )
101+ return false ;
102+ }
103+
104+ ThreeOhScroll . prototype . doDrag = function ( e ) {
105+ if ( ! e ) e = window . event
106+ var obj = ThreeOhScroll . current
107+ var ey = ( e . pageY ? e . pageY : e . clientY )
108+ var dy = ey - obj . thumb . dragLastY
109+ var ny = parseInt ( obj . thumb . style . top ) + dy
110+ if ( ny >= obj . thumbMax ) obj . thumb . dragLastY = obj . thumbMax + obj . thumb . dragStartOffset
111+ else if ( ny < 0 ) obj . thumb . dragLastY = obj . thumb . dragStartOffset
112+ else obj . thumb . dragLastY = ey
113+ ny = Math . min ( Math . max ( ny , 0 ) , obj . thumbMax )
114+ obj . jumpTo ( ny * obj . scrollH / obj . thumbMax )
115+ return false ;
116+ }
117+
118+ ThreeOhScroll . prototype . stopDrag = function ( ) {
119+ this . onmousemove = null
120+ this . onmouseup = null
121+ ThreeOhScroll . current . toggleThumb ( 0 )
122+ }
123+
124+ ThreeOhScroll . prototype . scrollTo = function ( ny ) {
125+ this . endArrow = Math . round ( ny * this . markersMax / this . scrollH )
126+ this . startTime = ( new Date ( ) ) . getTime ( )
127+ this . startPos = parseInt ( this . content . style . top ) * - 1
128+ this . endPos = ny
129+ this . dist = this . endPos - this . startPos
130+ this . accel = this . dist / ThreeOhScroll . aniLen / ThreeOhScroll . aniLen
131+ if ( this . aniTimer ) this . aniTimer = window . clearInterval ( this . aniTimer )
132+ this . aniTimer = window . setInterval ( this . gRef + ".scroll()" , 10 )
133+ }
134+
135+ ThreeOhScroll . prototype . scroll = function ( ) {
136+ var now = ( new Date ( ) ) . getTime ( )
137+ var elapsed = now - this . startTime
138+ if ( elapsed > ThreeOhScroll . aniLen ) this . endScroll ( )
139+ else {
140+ var t = ThreeOhScroll . aniLen - elapsed
141+ var ny = this . endPos - t * t * this . accel
142+ this . jumpTo ( ny )
143+ }
144+ }
145+
146+ ThreeOhScroll . prototype . endScroll = function ( ) {
147+ this . jumpTo ( this . endPos )
148+ this . arrow . style . top = this . endArrow
149+ this . aniTimer = window . clearInterval ( this . aniTimer )
150+ }
151+
152+ ThreeOhScroll . prototype . jumpTo = function ( ny ) {
153+ this . thumb . style . top = Math . round ( ny * this . thumbMax / this . scrollH )
154+ this . arrow . style . top = Math . round ( ny * this . arrowMax / this . scrollH )
155+ this . content . style . top = - ny
156+ }
157+
158+ ThreeOhScroll . prototype . toggleMarker = function ( oTrigger , markerNum , bOn ) {
159+ if ( bOn ) {
160+ ypGetElementById ( this . id + "_marker_" + markerNum ) . style . backgroundColor = "#444444"
161+ if ( this . curMarker ) this . toggleMarker ( this . curMarker , 0 )
162+ this . curMarker = markerNum
163+ this . descArrow . style . top = parseInt ( oTrigger . style . top ) + 2 + "px"
164+ this . description . style . left = "-400px"
165+ this . description . style . top = "-400px"
166+ this . description . innerHTML = oTrigger . getAttribute ( "description" )
167+ var w = document . all && ! ThreeOhScroll . ie5 ? ThreeOhScroll . ie4pcDescWidth : this . description . offsetWidth
168+ this . description . style . left = 259 - w + "px"
169+ this . description . style . top = parseInt ( oTrigger . style . top ) - 1 + "px"
170+ this . description . style . visibility = "visible"
171+ this . descArrow . style . visibility = "visible"
172+ this . container . style . left = "0px"
173+ } else {
174+ ypGetElementById ( this . id + "_marker_" + markerNum ) . style . backgroundColor = "#cccccc"
175+ this . curMarker = 0
176+ this . description . style . visibility = "hidden"
177+ this . descArrow . style . visibility = "hidden"
178+ }
179+ }
180+
181+ ThreeOhScroll . prototype . toggleThumb = function ( bOn ) {
182+ //this.arrow.style.backgroundColor = this.thumb.style.backgroundColor = bOn ? "#7CDAFE" : "#5EBBE7"
183+ }
184+
185+ function ypGetChildNodes ( objParent ) {
186+ return ( objParent . childNodes ? objParent . childNodes : objParent . children )
187+ }
188+
189+ function ypGetElementById ( id ) {
190+ return ( document . getElementById ? document . getElementById ( id ) : document . all ? document . all [ id ] : false )
191+ }
192+
193+ function ypGetDescendantsByTagName ( sTag , objParent ) {
194+ return ( objParent . getElementsByTagName ? objParent . getElementsByTagName ( sTag ) : objParent . all && objParent . all . tags ? objParent . all . tags ( sTag ) : false )
195+ }
0 commit comments