SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    applying the spf lotion V + E + R + T's Avatar
    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!

  2. #2
    applying the spf lotion V + E + R + T's Avatar
    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!

  3. #3
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  4. #4
    applying the spf lotion V + E + R + T's Avatar
    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!

  5. #5
    The Hiding One lynlimz's Avatar
    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

  6. #6
    SitePoint Wizard creole's Avatar
    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

  7. #7
    The Hiding One lynlimz's Avatar
    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

  8. #8
    applying the spf lotion V + E + R + T's Avatar
    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!

  9. #9
    SitePoint Wizard creole's Avatar
    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

  10. #10
    Your daddy. WALoeIII's Avatar
    Join Date
    Apr 2001
    Location
    USA
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  11. #11
    The Hiding One lynlimz's Avatar
    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.
    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...
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  12. #12
    SitePoint Zealot Lor's Avatar
    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

Posting Permissions

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