SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: Scrollbar + Image = How?
-
Apr 17, 2001, 15:18 #1
- Join Date
- Apr 2001
- Location
- USA
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.).Proud SPF member since 2001!
-
Apr 17, 2001, 15:39 #2
- Join Date
- Apr 2001
- Location
- USA
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
... 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.Proud SPF member since 2001!
-
Apr 17, 2001, 16:27 #3
- Join Date
- Mar 2000
- Location
- Muskegon, MI
- Posts
- 2,328
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Apr 17, 2001, 16:32 #4
- Join Date
- Apr 2001
- Location
- USA
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Heh, nah.. That's not what I'm looking for (colored scrollbars)
.
Proud SPF member since 2001!
-
Apr 18, 2001, 01:07 #5
- Join Date
- Jul 2000
- Location
- Singapore
- Posts
- 2,103
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein
-
Apr 18, 2001, 06:41 #6
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Apr 18, 2001, 07:09 #7
- Join Date
- Jul 2000
- Location
- Singapore
- Posts
- 2,103
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!"Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein
-
Apr 18, 2001, 12:54 #8
- Join Date
- Apr 2001
- Location
- USA
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Proud SPF member since 2001!
-
Apr 18, 2001, 13:22 #9
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Apr 18, 2001, 19:34 #10
heres the threeoh one...
// 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
-
Apr 18, 2001, 19:57 #11
- Join Date
- Jul 2000
- Location
- Singapore
- Posts
- 2,103
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by V + E + R + T
Thanks for the info lynlimz.
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..."Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
-- Albert Einstein
-
Apr 19, 2001, 14:33 #12
- Join Date
- Mar 2001
- Location
- cambridge, MA
- Posts
- 122
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yep - that is an awesome site indeed
Bookmarks