Meddelande

Minska
No announcement yet.

beikerScroll

Minska
X
 
  • Filter
  • Klockan
  • Show
Clear All
new posts

  • beikerScroll

    Okej, ännu än scroll... men... denna är stabil... spec enl. följande:

    - crossbrowser
    - Stödjer flera scrollers på samma sida
    - Om inte upp/ner-knapparna behövs så visas dom inte dvs när all content får plats, bra att detta sker dynamisk om content hämtas från en databas
    - olika scrollers kan ha olika hastighet


    ...okej.. scriptet dårå... här är en färdig html-sida inkl. script... i detta exemplet finns det tre scrollers på sidan... bara att copy-pejsta:


    <html>
    <head>
    <title>:: beikerScroll </title>
    <script language="javascript">
    <!--
    /*
    :: copyright Beiker 2001
    :: beiker@beiker.net
    :: www.beiker.net
    :: feel free to send an e-mail
    :: Do NOT remove this comment
    */

    //browser check lite ------------------------------------->
    var ie = (document.all)? truealse
    var ns4 = (document.layers)? truealse
    var ns6 = (document.addEventListener)? truealse

    //init functions ----------------------------------------->
    function init(){
    initScroll();
    }

    function initScroll(){
    //divObj0 = new createScrollObj(id of scrolldiv,id of scrolldiv's container,speed);
    scroll0 = new createScrollObj('scrollText0','scrollCont0',10);
    scroll1 = new createScrollObj('scrollText1','scrollCont1',50);
    scroll2 = new createScrollObj('scrollText2','scrollCont2',100);
    }

    //creating the objects ----------------------------------->
    function createScrollObj(id,cont,speed){
    this.obj = id.replace( new RegExp ("Text",'ig'), "");//the name of the created object
    this.id = id
    this.idNum = this.obj.substring(6); //string that contains the scroll number
    ctrlId = 'scrollCtrl' + this.idNum;
    if(ie){
    this.css = document.all[id].style;
    this.x = this.css.pixelLeft;
    this.y = this.css.pixelTop;
    this.visible = "visible";
    this.hidden = "hidden";
    this.dHeight = document.all[id].clientHeight;
    this.dWidth = document.all[id].clientWidth;
    this.contHeight = document.all[cont].offsetHeight
    this.upLimit = - (this.dHeight - this.contHeight);
    this.ctrlCss = document.all[ctrlId].style;
    }
    if(ns4){
    this.css = document.layers[cont].document.layers[id]
    this.x = this.css.left;
    this.y = this.css.top;
    this.visible = "show";
    this.hidden = "hide";
    this.dHeight = this.css.clip.height;
    this.dWidth = this.css.clip.width;
    this.contHeight = document.layers[cont].clip.height;
    this.upLimit = - (this.dHeight - this.contHeight);
    this.ctrlCss = document.layers[ctrlId]
    }
    if(ns6){
    this.css = document.getElementById(id).style;
    this.x = this.css.left;
    this.y = this.css.top;
    this.visible = "visible";
    this.hidden = "hidden";
    this.dHeight = document.getElementById(id).offsetHeight;
    this.dWidth = document.getElementById(id).offsetWidth;//this doesn't work in nestled layers
    this.contHeight = document.getElementById(cont).offsetHeight
    this.upLimit = - (this.dHeight - this.contHeight);
    this.ctrlCss = document.getElementById(ctrlId).style;
    }

    this.show = function(){ this.css.visibility = this.visible; }
    this.hide = function(){ this.css.visibility = this.hidden; }
    this.timer = eval('"' + id + 'Timer"');
    this.speed = speed //update frequency in milliseconds
    this.step = 5 //pixels to move each time
    this.isMoving = 'no'
    this.up = scrollUp;
    this.down = scrollDown;
    this.stop = stopIt;
    //init values
    this.css.top = 0;

    //show or hides the scroll controls
    if(this.dHeight > this.contHeight) this.ctrlCss.visibility = this.visible;
    else this.ctrlCss.visibility = this.hidden;
    }

    //scroll functions ----------------------------------------->
    function scrollDown(){
    this.y = eval(parseInt(this.css.top) - this.step)
    if(this.y + 10 >= this.upLimit){
    this.css.top = this.y
    this.timer = setTimeout(eval('"' + this.obj + '.down()" '),this.speed)
    }
    else clearTimeout(this.timer);
    }

    function scrollUp(){
    this.y = eval(parseInt(this.y) + this.step)
    if(this.y <= 0){
    this.css.top = this.y
    this.timer = setTimeout(eval('"' + this.obj + '.up()" '),this.speed)
    }
    else clearTimeout(this.timer);
    }

    function stopIt(){
    clearTimeout(this.timer);
    }

    //-->
    </script>
    <style type="text/css">
    <!--
    div{font-family:verdana,arial,helvetica;font-size:10px;}

    .scrollCtrl{position:absolute;top:100px;left:0px;visibility: visible;}
    #scrollCont0{position:absolute;top:100px;left:100px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
    #scrollText0{position:absolute;z-index:99;top:0px;}
    #scrollCont1{position:absolute;top:100px;left:250px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
    #scrollText1{position:absolute;z-index:99;top:0px;background-color:#eeeeee;}
    #scrollCont2{position:absolute;top:100px;left:400px;height:1 00px;width:100px;z-index:10;clipect(0,100,100,0);background-color:#eeeeee;layer-background-color:#eeeeee;}
    #scrollText2{position:absolute;z-index:99;top:0px;}

    -->
    </style>
    </head>

    <body onload="init();">
    <div>Higher number on in the speed varialbe makes the scroll go slower.<br>
    If the control buttons aren't needed they will not show(when content fits in the visible area)
    </div>

    <div id="scrollCtrl0" class="scrollCtrl" style="left:205;">
    <a href="javascript://up" onmousedown="scroll0.up();return false" onmouseup="scroll0.stop()">0 up</a><br><br>
    <a href="javascript://down" onmousedown="scroll0.down();return false" onmouseup="scroll0.stop()">0 down</a><br>
    </div>
    <div id="scrollCont0">
    <div id="scrollText0">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    end
    </div>
    </div>

    <div id="scrollCtrl1" class="scrollCtrl" style="left:355;">
    <a href="javascript://up" onmousedown="scroll1.up();return false" onmouseup="scroll1.stop()">0 up</a><br><br>
    <a href="javascript://down" onmousedown="scroll1.down();return false" onmouseup="scroll1.stop()">0 down</a><br>
    </div>
    <div id="scrollCont1">
    <div id="scrollText1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    end
    </div>
    </div>

    <div id="scrollCtrl2" class="scrollCtrl" style="left:505;">
    <a href="javascript://up" onmousedown="scroll2.up();return false" onmouseup="scroll2.stop()">0 up</a><br><br>
    <a href="javascript://down" onmousedown="scroll2.down();return false" onmouseup="scroll2.stop()">0 down</a><br>
    </div>
    <div id="scrollCont2">
    <div id="scrollText2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    end
    </div>
    </div>
    </body>
    </html>

    [Redigerat av beiker den 26 jul 2001]

    [Redigerat av beiker den 05 aug 2001]
    FavoRead | Whenda
Working...
X