Scrollbar + Image = How?

[V + E + R + T]

I'm looking for a code that can let you use any kind of image as a scrollbar. A similiar example is at: www.threeoh.com (the news scrollbar with a custom image). I'll be very happy if someone could help me out. Thanks in advance!

In exchange for a successful script, I'll create anything you need (banner ad, logo design, etc.).

[V + E + R + T]

... Or ...

I'm also looking for a script that can handle a horizontal scrollbar AND not showing a vertical scrollbar.

Here's the details and requirements the script must abide by:

+ Horizontal scrollbar with NO vertical scrollbar shown.
+ Scrollbar script must be able to be placed in a frame.
+ Must be cross-browser (Netscape/Explorer)

Thanks in advance! Again.. I'll also do something in exchange.

[westmich]

Try here -
http://www.sitepointforums.com/showt...threadid=19013

[V + E + R + T]

Heh, nah.. That's not what I'm looking for (colored scrollbars) .

[lynlimz]

The scrollbar..what you mean..right right browservertical scrollbar? if so, there can;t be any images!

for vertical/horizontal moving text..go to http://dynamicdrive.com

[creole]

Why don't you just view source on their page? I just looked and their code is all right there.

Just hack it apart to see how it works, then put it back together and get it looking like you want it to.

[lynlimz]

ah! i ofund it! its the image scrollbar alright.
lol..i've seen this before..let me try to recall...

yes! i found it! phew..good old search engines
okie..here's the link

http://www.htmlguru.com/
eveyrhting is scrollable via the same method.
to learn how to use the scrooller thingy...go to tutorials, and downlaod the curious eye tutorial..or view it online. shuld be comprehensive enough

all the best!
its dhtml though..and it doens't work on mozilla..didn't test on netscpae 4(removed it..ha!)

its under curious eye tutorial, interactivity, page scrolling!

[V + E + R + T]

Thanks for the info lynlimz.

Creole: Hehe, I would do that, but then people would certainly find out that I used a script from one of the most visited and reknown design sites.

[creole]

where do you think those people learned?

You'll notice that I never said cop it directly from their page.

I directed you to take it apart, study it, then put it back together in a configuration that suits your site. At that point, you are merely standing on the shoulders of giants.

[WALoeIII]

// custom scroll application developed for three.oh 3/2001.
// i'd say copyright, but i know it wouldn't stop you... so have at it...
// thanks to brandon (www.jesterworld.net) and grant (no site cuz he's too pimp for it) for the help w/ the visuals.
// > youngpup > www.youngpup.net

// quirkiness.
ThreeOhScroll.ie4mac = navigator.platform == "MacPPC" && navigator.appName == "Microsoft Internet Explorer" && !document.getElementById
ThreeOhScroll.ie4pc = navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && !document.getElementById
ThreeOhScroll.mo5 = navigator.userAgent.indexOf("Gecko") != -1
ThreeOhScroll.ie5 = navigator.appName == "Microsoft Internet Explorer" && document.getElementById

ThreeOhScroll.aniLen = 1000

function ThreeOhScroll(id)
{
if (ThreeOhScroll.ie4mac || ThreeOhScroll.ie4pc || ThreeOhScroll.mo5 || ThreeOhScroll.ie5) {
this.id = id
this.getMembers(ypGetElementById(id))

this.clipH = parseInt(this.container.style.height)
this.PTags = ypGetDescendantsByTagName(this.content, "P")
var lastP = this.PTags[this.PTags.length-1]
var lastPTop = lastP.offsetTop - (ThreeOhScroll.mo5 ? 108 : 0)
this.docH = lastPTop + Math.max(lastP.offsetHeight, this.clipH)
this.scrollH = this.docH - this.clipH
this.markersMax = parseInt(this.markers.style.height) - 7
this.thumbMax = parseInt(this.thumbContainer.style.height) - this.thumbImg.height
this.arrowMax = parseInt(this.arrowContainer.style.height) - this.arrowImg.height

// ie4 pc cannot measure the dynamic text so well, so we'll just set it to a constant 100px
if (ThreeOhScroll.ie4pc) this.description.style.width = "100px"

this.gRef = "ThreeOhScroll_"+id
eval(this.gRef+"=this")
this.thumb.obj = this
this.thumb.onmousedown = this.startDrag
this.thumb.onmouseover = Function(this.gRef + ".toggleThumb(1)")
this.thumb.onmouseout = Function(this.gRef + ".toggleThumb(0)")
this.thumb.onmousup = Function(this.gRef + ".toggleThumb(0)")
this.thumb.ondragstart = function() { return false }
this.initMarkers()
}
}

ThreeOhScroll.prototype.initMarkers = function() {
var shtml = "", sTitle, iTop
for (var i = 0; i < this.PTags.length; i++) {
sTitle = this.PTags[i].getAttribute("description")
pTop = this.PTags[i].offsetTop - (ThreeOhScroll.mo5 ? 108 : 0)
iTop = Math.round(pTop * this.markersMax / this.scrollH)
if (sTitle && sTitle != "" && sTitle != null) {
shtml += "<div id='" + this.id + "_marker_" + i + "' "
shtml += "style='position:absolute; left:2px; top:" + (iTop + 2) + "px; "
shtml += "width:5px; height:3px; clip:rect(0 5 3 0); background-color:#7BB0D6; z-index:1;'></div>"
shtml += "<div style='position:absolute; left:0px; top:" + iTop + "px; "
shtml += "cursor:pointer; cursor:hand; width:9px; height:7px; clip:rect(0 9 7 0); z-index:2;' "
shtml += "onmousedown='" + this.gRef + ".scrollTo(" + pTop + ")' "
shtml += "onmouseover='" + this.gRef + ".toggleMarker(this, " + i + ", 1)' "
shtml += "onmouseout='" + this.gRef + ".toggleMarker(this, " + i + ", 0)' "
shtml += "description='" + sTitle.replace(/'/g, "|pos|") + "'>"
shtml += "<img src='imgs/1_pix.gif' width='9' height='7'></div>"
}
}
this.markers.innerHTML += shtml
}

// this is so that we only loop through the descendant tree looking for elements one time - it loads faster!
ThreeOhScroll.prototype.getMembers = function(a) {
var c = a.childNodes ? a.childNodes : a.children, cn
if (c) {
for (var i = 0; i < c.length; i++) {
cn = c[i].className
if (cn == "container") this.container = c[i]
else if (cn == "content") this.content = c[i]
else if (cn == "markers") this.markers = c[i]
else if (cn == "thumb") this.thumb = c[i]
else if (cn == "arrow") this.arrow = c[i]
else if (cn == "skip") this.skip = c[i]
else if (cn == "thumbImg") this.thumbImg = c[i]
else if (cn == "arrowImg") this.arrowImg = c[i]
else if (cn == "thumbContainer") this.thumbContainer = c[i]
else if (cn == "arrowContainer") this.arrowContainer = c[i]
else if (cn == "description") this.description = c[i]
else if (cn == "descArrow") this.descArrow = c[i]

if ((c[i].childNodes ? c[i].childNodes : c[i].children).length > 0)
this.getMembers(c[i])
}
}
}

ThreeOhScroll.prototype.startDrag = function(e) {
if (!e) e = window.event
var ey = e.pageY ? e.pageY : e.y
this.dragLastY = ey
this.dragStartOffset = ey - parseInt(this.style.top)
ThreeOhScroll.current = this.obj
document.onmousemove = this.obj.doDrag
document.onmouseup = this.obj.stopDrag
if (this.obj.aniTimer) window.clearInterval(this.obj.aniTimer)
return false;
}

ThreeOhScroll.prototype.doDrag = function(e) {
if (!e) e = window.event
var obj = ThreeOhScroll.current
var ey = (e.pageY ? e.pageY : e.y)
var dy = ey - obj.thumb.dragLastY
var ny = parseInt(obj.thumb.style.top) + dy
if (ny >= obj.thumbMax) obj.thumb.dragLastY = obj.thumbMax + obj.thumb.dragStartOffset
else if (ny < 0) obj.thumb.dragLastY = obj.thumb.dragStartOffset
else obj.thumb.dragLastY = ey
ny = Math.min(Math.max(ny, 0), obj.thumbMax)
obj.jumpTo(ny * obj.scrollH / obj.thumbMax)
return false;
}

ThreeOhScroll.prototype.stopDrag = function() {
this.onmousemove = null
this.onmouseup = null
ThreeOhScroll.current.toggleThumb(0)
}

ThreeOhScroll.prototype.scrollTo = function(ny) {
this.endArrow = Math.round(ny * this.markersMax / this.scrollH)
this.startTime = (new Date()).getTime()
this.startPos = parseInt(this.content.style.top) * -1
this.endPos = ny
this.dist = this.endPos - this.startPos
this.accel = this.dist / ThreeOhScroll.aniLen / ThreeOhScroll.aniLen
if (this.aniTimer) this.aniTimer = window.clearInterval(this.aniTimer)
this.aniTimer = window.setInterval(this.gRef + ".scroll()", 10)
}

ThreeOhScroll.prototype.scroll = function() {
var now = (new Date()).getTime()
var elapsed = now - this.startTime
if (elapsed > ThreeOhScroll.aniLen) this.endScroll()
else {
var t = ThreeOhScroll.aniLen - elapsed
var ny = this.endPos - t * t * this.accel
this.jumpTo(ny)
}
}

ThreeOhScroll.prototype.endScroll = function() {
this.jumpTo(this.endPos)
this.arrow.style.top = this.endArrow
this.aniTimer = window.clearInterval(this.aniTimer)
}

ThreeOhScroll.prototype.jumpTo = function(ny) {
this.thumb.style.top = Math.round(ny * this.thumbMax / this.scrollH)
this.arrow.style.top = Math.round(ny * this.arrowMax / this.scrollH)
this.content.style.top = -ny
}

ThreeOhScroll.prototype.toggleMarker = function(oTrigger, markerNum, bOn) {
if (bOn) {
ypGetElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#DAEEFE"
if (this.curMarker) this.toggleMarker(this.curMarker, 0)
this.curMarker = markerNum
this.descArrow.style.top = parseInt(oTrigger.style.top) + 2 + "px"
this.description.style.left = "-400px"
this.description.style.top = "-400px"
this.description.innerHTML = oTrigger.getAttribute("description").replace(/\|pos\|/g, "'")
var w = this.description.offsetWidth
// something wierd was going on with the measurement being 3px off in ie mac 4. -- i dunno...
this.description.style.left = (ThreeOhScroll.ie4mac ? 217 : 220) - w + "px"
this.description.style.top = parseInt(oTrigger.style.top) - 1 + "px"
this.description.style.visibility = "visible"
this.descArrow.style.visibility = "visible"
this.container.style.left = "0px"
} else {
ypGetElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#7BB0D6"
this.curMarker = 0
this.description.style.visibility = "hidden"
this.descArrow.style.visibility = "hidden"
}
}

ThreeOhScroll.prototype.toggleThumb = function(bOn) {
this.arrow.style.backgroundColor = this.thumb.style.backgroundColor = bOn ? "#7CDAFE" : "#5EBBE7"
}


function ypGetElementById(s) {
return (document.getElementById ? document.getElementById(s) : document.all[s])
}
function ypGetDescendantsByTagName(a, s) {
return (a.getElementsByTagName ? a.getElementsByTagName(s) : a.all.tags(s))
}
function ypGetChildNodes(objParent) {
return (objParent.childNodes ? objParent.childNodes : objParent.children)
}


You can always "tweak" it to suit your needs.
:D

[lynlimz]

Originally posted by V + E + R + T
Thanks for the info lynlimz.

glad to help.
i visited that site several months..maybe even a year ago..its astonishing how he actually achieved that/...all the moving elments and such. and it was designed very long time ago...

[Lor]

Yep - that is an awesome site indeed