SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Custom scroll

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom scroll

    Hello!

    I'm trying to re-create a neat feature i saw here

    I have copied the javascript over on my page, and placed the 3 layers, one for up arrow, down arrow and one containing the scrollbar image just like the chimaria one.

    Alas it doesnt work..

    On the Chimaria page, the layers are coded using the <span></span> where in dreamweaver the layrs are coded with <div></div>, does that make a huge amount of difference?

    Also it seems that the table containing the content is inside two layers


    Code:
    <!-- div containing content | change: top + left + width + height + clip -->
    <span id="contentClip" style="position: absolute; top: 15px; left: 5px; width: 282px; height: 530px; clip:rect(0px,300px,530px,0px); visibility: visible; z-index: 5; overflow: hidden;">
      <span id="content">
    
    	<table width=280 cellspacing=0 cellpadding=1 border=0>
    	
    
    <tr><td>
    But at the end of the code it doesnt contain any </span>?

    Can somebody clear this up for me and explain what i might be doing wrong please


    heres the javascript

    Code:
    <script language="javascript">
    // Made by geeeet@ghtml.com
    // Keep these two lines and you're free to use this code
    
    // Known bugs :
    // If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...
    
    // Corrected bugs :
    // 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move()
    // 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move()
    // 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse()
    
    // 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high:
    // Just put this in the style-tag right before the end head-tag:
    // body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}
    
    // Touch me here :-)
    var upH = 20; // Height of up-arrow
    var upW = 20; // Width of up-arrow
    var downH = 20; // Height of down-arrow
    var downW = 20; // Width of down-arrow
    var dragH = 30; // Height of scrollbar
    var dragW = 35; // Width of scrollbar
    var scrollH = 413; // Height of scrollbar
    var speed = 8; // Scroll speed
    
    // And now... go to the bottom of the page...
    
    // Browser detection
    var dom = document.getElementById ? true:false;
    var nn4 = document.layers ? true:false;
    var ie4 = document.all ? true:false;
    
    var mouseY; // Mouse Y position onclick
    var mouseX; // Mouse X position onclick
    
    var clickUp = false; // If click on up-arrow
    var clickDown = false; // If click on down-arrow
    var clickDrag = false; // If click on scrollbar
    var clickAbove = false; // If click above scrollbar
    var clickBelow = false; // If click below scrollbar
    
    var timer = setTimeout("",500); // Repeat variable
    var upL; // Up-arrow X
    var upT; // Up-arrow Y
    var downL; // Down-arrow X
    var downT; // Down-arrow Y
    var dragL; // Scrollbar X
    var dragT; // Scrollbar Y
    var rulerL; // Ruler X
    var rulerT; // Ruler Y
    var contentT; // Content layer Y;
    var contentH; // Content height
    var contentClipH; // Content clip height
    var scrollLength; // Number of pixels scrollbar should move
    var startY; // Keeps track of offset between mouse and span
    
    // Mousedown
    function down(e){
      if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
      getMouse(e);
      startY = (mouseY - dragT);
      
      // If click on up-arrow
      if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
        clickUp = true;
        return scrollUp();
      }  
      // Else if click on down-arrow
      else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
        clickDown = true;
        return scrollDown();
      }
      // Else if click on scrollbar
      else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
        clickDrag = true;
        return false;
      }
      else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
        // If click above drag
        if(mouseY < dragT){
          clickAbove = true;
          clickUp = true;
          return scrollUp();
        }
        // Else click below drag
        else{
          clickBelow = true;
          clickDown = true;
          return scrollDown();
        }
      }
      // If no scrolling is to take place
      else{
        return true;
      }
    }
    
    // Drag function
    function move(e){
      if(clickDrag && contentH > contentClipH){
        getMouse(e);
        dragT = (mouseY - startY);
        
        if(dragT < (rulerT))
          dragT = rulerT;    
        if(dragT > (rulerT + scrollH - dragH))
          dragT = (rulerT + scrollH - dragH);
        
        contentT = ((dragT - rulerT)*(1/scrollLength));
        contentT = eval('-' + contentT);
    
        moveTo();
        
        // So ie-pc doesn't select gifs
        if(ie4)
          return false;
      }
    }
    
    function up(){
      clearTimeout(timer);
      // Resetting variables
      clickUp = false;
      clickDown = false;
      clickDrag = false;
      clickAbove = false;
      clickBelow = false;
      return true;
    }
    
    // Reads content layer top
    function getT(){
      if(ie4)
        contentT = document.all.content.style.pixelTop;
      else if(nn4)
        contentT = document.contentClip.document.content.top;
      else if(dom)
        contentT = parseInt(document.getElementById("content").style.top);
    }
    
    // Reads mouse X and Y coordinates
    function getMouse(e){
      if(ie4){
        mouseY = event.clientY + document.body.scrollTop;
        mouseX = event.clientX + document.body.scrollLeft;
      }
      else if(nn4 || dom){
        mouseY = e.pageY;
        mouseX = e.pageX;
      }
    }
    
    // Moves the layer
    function moveTo(){
      if(ie4){
        document.all.content.style.top = contentT;
        document.all.ruler.style.top = dragT;
        document.all.drag.style.top = dragT;
      }
      else if(nn4){
        document.contentClip.document.content.top = contentT;
        document.ruler.top = dragT;
        document.drag.top = dragT;
      }
      else if(dom){
        document.getElementById("content").style.top = contentT + "px";
        document.getElementById("drag").style.top = dragT + "px";
        document.getElementById("ruler").style.top = dragT + "px";
      }
    }
    
    // Scrolls up
    function scrollUp(){
      getT();
      
      if(clickAbove){
        if(dragT <= (mouseY-(dragH/2)))
          return up();
      }
      
      if(clickUp){
        if(contentT < 0){    
          dragT = dragT - (speed*scrollLength);
          
          if(dragT < (rulerT))
            dragT = rulerT;
            
          contentT = contentT + speed;
          if(contentT > 0)
            contentT = 0;
          
          moveTo();
          timer = setTimeout("scrollUp()",25);
        }
      }
      return false;
    }
    
    // Scrolls down
    function scrollDown(){
      getT();
      
      if(clickBelow){
        if(dragT >= (mouseY-(dragH/2)))
          return up();
      }
    
      if(clickDown){
        if(contentT > -(contentH - contentClipH)){      
          dragT = dragT + (speed*scrollLength);
          if(dragT > (rulerT + scrollH - dragH))
            dragT = (rulerT + scrollH - dragH);
          
          contentT = contentT - speed;
          if(contentT < -(contentH - contentClipH))
            contentT = -(contentH - contentClipH);
          
          moveTo();
          timer = setTimeout("scrollDown()",25);
        }
      }
      return false;
    }
    
    // reloads page to position the layers again
    function reloadPage(){
      location.reload();
    }
    
    // Preload
    function eventLoader(){
      if(ie4){
        // Up-arrow X and Y variables
        upL = document.all.up.style.pixelLeft;
        upT = document.all.up.style.pixelTop;    
        // Down-arrow X and Y variables
        downL = document.all.down.style.pixelLeft;
        downT = document.all.down.style.pixelTop;
        // Scrollbar X and Y variables
        dragL = document.all.drag.style.pixelLeft;
        dragT = document.all.drag.style.pixelTop;    
        // Ruler Y variable
        rulerT = document.all.ruler.style.pixelTop;    
        // Height of content layer and clip layer
        contentH = parseInt(document.all.content.scrollHeight);
        contentClipH = parseInt(document.all.contentClip.style.height);
      }
      else if(nn4){
        // Up-arrow X and Y variables
        upL = document.up.left;
        upT = document.up.top;    
        // Down-arrow X and Y variables
        downL = document.down.left;
        downT = document.down.top;    
        // Scrollbar X and Y variables
        dragL = document.drag.left;
        dragT = document.drag.top;    
        // Ruler Y variable
        rulerT = document.ruler.top;
        // Height of content layer and clip layer
        contentH = document.contentClip.document.content.clip.bottom;
        contentClipH = document.contentClip.clip.bottom;
      }
      else if(dom){
        // Up-arrow X and Y variables
        upL = parseInt(document.getElementById("up").style.left);
        upT = parseInt(document.getElementById("up").style.top);
        // Down-arrow X and Y variables
        downL = parseInt(document.getElementById("down").style.left);
        downT = parseInt(document.getElementById("down").style.top);
        // Scrollbar X and Y variables
        dragL = parseInt(document.getElementById("drag").style.left);
        dragT = parseInt(document.getElementById("drag").style.top);
        // Ruler Y variable
        rulerT = parseInt(document.getElementById("ruler").style.top);
        // Height of content layer and clip layer
        contentH = parseInt(document.getElementById("content").offsetHeight);
        contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
        document.getElementById("content").style.top = 0 + "px";
        
      }
      // Number of pixels scrollbar should move
      scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
      // Initializes event capturing
      if(nn4){
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
        window.onresize = reloadPage;
      }
      document.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }
    // Pop Up
    function openNewWindow(URLtoOpen, windowName, windowFeatures) { newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
    // -->
    </script>

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML you show is invalid. Span can only contain other inline elements.

    Also, if the script fails, then check the JavaScript console to check what is wrong.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Scotland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    The HTML you show is invalid. Span can only contain other inline elements.
    but it works ok on the page i linked, i dont think the problem is with the script, just my layers,

    What does <div> have over <span>?

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Div is a block element, and span is an inline element.


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
  •