SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Winnipeg CANADA
    0 Post(s)
    0 Thread(s)

    show/hide script with scrollbar script

    The show/hide script is essentially working for me. You can view it at work at . But, it is not interacting well with a javascript scroller one I've used (see my previous post). What is supposed to happen is that there is no text to start with. When you click on "description", the text shows up.

    If the text goes beyond the alloted space, a scrollbar kicks in to move text up and down. If not needed, then scrollbar does not show up. This DOES WORK when the show/hide script is removed.

    But... in IE 5.2.3 and Mozilla Firebird, the scrollbar does not show up, so you can't read rest of text. In Safari 1.2, the text scroller is there and works (sort of), but the scroll bar is there even before you see the text. The scroll bar is ALWAYS there, even when there is no text to scroll.

    Here is the script:
    // Coded by Travis Beckham
    // |
    // If want to use this code, feel free to do so, but please leave this message intact.
    // --- version date: 01/24/03

    // Scroller Class
    ScrollObj = function(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
    this.speed = speed; // scrolling speed
    this.dragHeight = dragHeight; // Height of scrollbar drag
    this.trackHeight = trackHeight; // Height of scrollbar track
    this.trackObj = getElement(trackObj); // Refers to the scrollbar track div
    this.upObj = getElement(upObj); // Refers to the up arrow div
    this.downObj = getElement(downObj); // Refers to the down arrow div
    this.dragObj = getElement(dragObj); // Refers to the scrollbar drag div

    this.contentMaskObj = getElement(contentMaskObj); // Refers to the content mask div
    this.contentObj = getElement(contentObj,contentMaskObj);
    this.obj = contentObj+"Object";

    /* this is not yet working properly and is not properly constrained. Goes all the way to the top of window. */
    this.trackTop = this.dragObj.getTop(); // Scrollbar top contraint
    this.trackLength = this.trackHeight-this.dragHeight; // Adjusted track height
    this.trackBottom = this.trackTop+this.trackLength; // Scrollbar bottom contraint

    this.contentMaskHeight = this.contentMaskObj.getClipHeight(); // Height of the div that masks the content div
    this.contentHeight = this.contentObj.getHeight();
    this.contentLength = this.contentHeight-this.contentMaskHeight;
    this.scrollLength = this.trackLength/this.contentLength;
    this.scrollTimer = null;

    /* this is where I tell scrollbars to hide if the content is not tall enough to need them */
    if(this.contentHeight <= this.contentMaskHeight){
    var self = this;
    this.trackObj.addEvent("onmousedown", function(e){self.scrollJump(e);return false});
    this.upObj.addEvent("onmousedown", function(){self.scroll(self.speed);return false});
    this.upObj.addEvent("onmouseup", function(){self.stopScroll()});
    this.upObj.addEvent("onmouseout", function(){self.stopScroll()});
    this.downObj.addEvent("onmousedown", function(){self.scroll(-self.speed);return false});
    this.downObj.addEvent("onmouseup", function(){self.stopScroll()});
    this.downObj.addEvent("onmouseout", function(){self.stopScroll()});
    this.dragObj.addEvent("onmousedown", function(e){self.startDrag(e);return false});
    if(iex) this.dragObj.addEvent("ondragstart", function(){return false});
    ScrollObj.prototype.startDrag = function(e){
    this.dragStartMouse = getYMouse(e);
    this.dragStartOffset = this.dragObj.getTop();
    var self = this;
    document.addEvent("onmousemove", function(e){self.drag(e)});
    document.addEvent("onmouseup", function(){self.stopDrag()});
    ScrollObj.prototype.stopDrag = function(){
    ScrollObj.prototype.drag = function(e){
    var currentMouse = getYMouse(e);
    var mouseDifference = currentMouse-this.dragStartMouse;
    var dragDistance = this.dragStartOffset+mouseDifference;
    var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
    var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
    ScrollObj.prototype.scroll = function(speed){
    var contentMovement = this.contentObj.getTop()+speed;
    var dragMovement = this.trackTop-Math.round(this.contentObj.getTop()*(this.trackLength/this.contentLength));
    if(contentMovement > 0){
    contentMovement = 0;
    }else if(contentMovement < -this.contentLength){
    contentMovement = -this.contentLength;
    if(dragMovement < this.trackTop){
    dragMovement = this.trackTop;
    }else if(dragMovement > this.trackBottom){
    dragMovement = this.trackBottom;
    this.scrollTimer = window.setTimeout(this.obj+".scroll("+speed+")",25);
    ScrollObj.prototype.stopScroll = function(){
    this.scrollTimer = null;
    ScrollObj.prototype.scrollJump = function(e){
    var currentMouse = getYMouse(e);
    var dragDistance = currentMouse-(this.dragHeight/2);
    var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
    var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
    // End of Scroller Class

    // Load Scroller Functions.
    // Note: I discovered the order of scroll objects is very important. Won't work otherwise.
    window.onload = function(){
    /* speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj */
    myScroll = new ScrollObj(6,27,294,"scrolltrack","scrollup","scrolldown","scrolldrag","contentMask","content");
    // End of Load Scroller Functions

    // Hide and Show Function. -- problem: hides the top global nav! Solution: fixed this.
    /* Problem STILL OCCURS in IE only, but only when clicking on the "description" button AFTER clicking on the refresh button. No problem, as long as I don't click on the refresh button. Very strange behaviour!*/
    /* hiding and showing the content Function, and hiding the semi-transparent image over the main image by calling one or the other divs. */
    // Wondering if instead, I can change the z index on the fly?
    function appearDisappear() {
    if (!document.getElementById) return false;

    var secretObj = document.getElementById("content");
    var bkgr = document.getElementById("contentbox");

    if ( == "block") { = "none"; = "none";
    /* I am trying to code to have the scroll bars appear when needed, and disappear when not. Right now, they never show up in IE or Mozilla, and always show up in Safari (even when content is hidden). Not working yet!
    function getFunction(myScroll){
    } else { = "block"; = "block";
    function getFunction(myScroll){

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Alabama, USA
    0 Post(s)
    0 Thread(s)
    sorry for the late reply... did you get this solved?


Posting Permissions

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