problem mit diesem script.

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • problem mit diesem script.

    hallo,
    ich habe dieses script und so wie es ist funktioniert es auch toll.
    aber wenn ich nun zwei scroll menues auf einer seite haben möchte weiß ich leider nicht wie ich das machen muß.
    kann mir da jemand bitte helfen?
    PHP-Code:

    <script type="text/javascript">
    // ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    // 
    // Coded by Travis Beckham
    // [url]http://www.squidfingers.com[/url] | [url]http://www.podlob.com[/url]
    // If want to use this code, feel free to do so, but please leave this message intact.
    //
    // ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    // --- version date: 01/24/03 ---------------------------------------------------------

    // ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    // Cross-Browser Functions

    var dom document.getElementById;
    var 
    iex document.all;
    var 
    ns4 document.layers;

    function 
    addEvent(event,method){
        
    this[event] = method;
        if(
    ns4this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
    }
    function 
    removeEvent(event){
        
    this[event] = null;
        if(
    ns4this.releaseEvents(Event[event.substr(2,event.length).toUpperCase()]);
    }
    function 
    getElement(name,nest){
        
    nest nest "document."+nest+"." "";
        var 
    el dom document.getElementById(name) : iex document.all[name] : ns4 ? eval(nest+"document."+name) : false;
        
    el.css ns4 el el.style;
        
    el.getTop = function(){return parseInt(el.css.top) || 0};
        
    el.setTop = function(y){el.css.top ns4 yy+"px"};
        
    el.getHeight = function(){return ns4 el.document.height el.offsetHeight};
        
    el.getClipHeight = function(){return ns4 el.clip.height el.offsetHeight};
        
    el.hideVis = function(){el.css.visibility="hidden"};
        
    el.addEvent addEvent;
        
    el.removeEvent removeEvent;
        return 
    el;
    }
    function 
    getYMouse(e){
        return 
    iex event.clientY e.pageY;
    }

    document.addEvent addEvent;
    document.removeEvent removeEvent;

    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    // Scroller Class

    ScrollObj = function(speeddragHeighttrackHeighttrackObjupObjdownObjdragObjcontentMaskObjcontentObj){
        
    this.speed speed;
        
    this.dragHeight dragHeight;
        
    this.trackHeight trackHeight;
        
    this.trackObj getElement(trackObj);
        
    this.upObj getElement(upObj);
        
    this.downObj getElement(downObj);
        
    this.dragObj getElement(dragObj);
        
    this.contentMaskObj getElement(contentMaskObj);
        
    this.contentObj getElement(contentObj,contentMaskObj);
        
    this.obj contentObj+"Object";
        eval(
    this.obj+"=this");
        
        
    this.trackTop this.dragObj.getTop();
        
    this.trackLength this.trackHeight-this.dragHeight;
        
    this.trackBottom this.trackTop+this.trackLength;
        
    this.contentMaskHeight this.contentMaskObj.getClipHeight();
        
    this.contentHeight this.contentObj.getHeight();
        
    this.contentLength this.contentHeight-this.contentMaskHeight;
        
    this.scrollLength this.trackLength/this.contentLength;
        
    this.scrollTimer null;
        
        if(
    this.contentHeight <= this.contentMaskHeight){
            
    this.dragObj.hideVis();
        }else{
            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(
    iexthis.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(){
        
    document.removeEvent("onmousemove");
        
    document.removeEvent("onmouseup");
    }
    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;
        
    this.dragObj.setTop(dragMovement);
        var 
    contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
        
    this.contentObj.setTop(contentMovement);
    }
    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.contentObj.setTop(contentMovement);
        
    this.dragObj.setTop(dragMovement);
        
    this.scrollTimer window.setTimeout(this.obj+".scroll("+speed+")",25);
    }
    ScrollObj.prototype.stopScroll = function(){
        if(
    this.scrollTimer){
            
    window.clearTimeout(this.scrollTimer);
            
    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;
        
    this.dragObj.setTop(dragMovement);
        var 
    contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
        
    this.contentObj.setTop(contentMovement);
    }

    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    // Misc Functions

    function fixNetscape4(){
        if(
    ns4origWidth != window.innerWidth || ns4origHeight != window.innerHeight){
            
    window.location.reload();
        }    
    }
    if(
    document.layers){
        
    ns4origWidth window.innerWidth;
        
    ns4origHeight window.innerHeight;
        
    window.onresize fixNetscape4;
    }

    // ||||||||||||||||||||||||||||||||||||||||||||||||||
    window.onload =function(){
         
    //speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
        
    myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
        };
        
    </
    script>

    </
    head>
    <
    body>
    <
    div id="box" style="position:absolute; left:365px; top:75px; z-index:1;">
        <
    img src="scroll_box.gif" alt="" width="251" height="150" border="0">
    </
    div>

    <
    div id="up" style="position:absolute; left:595px; top:75px; z-index:2; cursor:pointer;">
        <
    img src="scroll_up.gif" alt="" width="21" height="20" border="0">
    </
    div>
    <
    div id="track" style="position:absolute; left:595px; top:95px; z-index:3;">
        <
    img src="scroll_track.gif" alt="" width="21" height="110" border="0">
    </
    div>
    <
    div id="drag" style="position:absolute; left:595px; top:95px; z-index:4; cursor:pointer;">
        <
    img src="scroll_drag.gif" alt="" width="21" height="19" border="0">
    </
    div>
    <
    div id="down" style="position:absolute; left:595px; top:205px; z-index:5; cursor:pointer;">
        <
    img src="scroll_down.gif" alt="" width="21" height="20" border="0">
    </
    div>
    <
    div id="contentMask" style="position:absolute; left:365px; top:85px; width:230px; height:130px; clip:rect(0,230px,130px,0); overflow:hidden; z-index:6;">

        <
    div id="content" style="position:absolute; left:0; top:0; width:230px;">
            <
    p
            
    Hier muß ein langer Text rein.
            </
    p>
        </
    div>
    </
    body>
    </
    html

    EDIT:
    anzeigen von smilies abegschaltet, um so einen unfug
    cursor<img src="images/smilies/tongue.gif" border="0" alt="">ointer;">
    in der anzeige zu vermeiden.
    nächstes mal bitte nochmal selber drüber schauen, ob die anzeige stimmt!
    wahsaga

    Zuletzt geändert von wahsaga; 29.09.2004, 09:49.

  • #2
    ich habe dieses script und so wie es ist funktioniert es auch toll.
    Das ist schön - aber aus dem Wust kann man nicht wirklich interpretieren, was das Teil macht... Ein Live-Beispiel wäre sehr angenehm.

    Aber irgendwas mit Menüs auf jeden Fall, und deshalb könnte das hier schon reichen:

    Code:
    window.onload =function(){
         //speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
        myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
    
    // Zweites Menü
    
        myScroll2 = new ScrollObj(12,34,567,"track","up","down","drag","contentMask","content");
    
        };
    Das Skript sieht insgesamt so aus, als wäre es für den Betrieb mehrerer Objekte auf der gleichen Seite angelegt - also probieren!

    Kommentar


    • #3
      hallo,
      habe mal den link wo das scrollmenue läuft hinterlegt.
      http://www.squidfingers.com/code/dhtml/divscroller/

      aber mit

      PHP-Code:
      window.onload =function(){
           
      //speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
          
      myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");

      // Zweites Menü

          
      myScroll2 = new ScrollObj(12,34,567,"track","up","down","drag","contentMask","content");

          }; 
      klappt es nicht.

      Kommentar


      • #4
        Original geschrieben von pekka
        deshalb könnte das hier schon reichen:
        Code:
        window.onload =function(){
             //speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
            myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
        
        // Zweites Menü
        
            myScroll2 = new ScrollObj(12,34,567,"track","up","down","drag","contentMask","content");
        
            };
        na ja, da das script wohl offenbar dynamisch die event-behandlung an die für die steuerung benutzten grafiken anhängt, müssten beim zweiten objekt natürlich auch noch die IDs "up", "down", "drag" gegen die der zweiten scrollbox ausgetauscht werden.
        und ob das schon ausreicht, ist auch noch nicht sicher - wozu sind die anderen übergebenen variablen da?
        das müsste man erst genauer analysieren, um zu wissen, welche elemente man wirklich "doppeln" muss.
        aber das mach mal selber, wenn du dieses script einsetzen willst.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          wozu denn das? mach 2 <textarea> und gut ist


          Nein, Spass beiseite.
          Habe nur kurz drüber geflogen, aber hast du denn auch HTML-seitig die <div> für das 2. Object (mit anderen ids) bereit gestellt?

          Kommentar


          • #6
            hallo,

            habe nun:
            PHP-Code:
            window.onload = function(){
                
            // speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
                
            myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
                
            myScroller = new ScrollObj(6,21,110,"track1","up1","down1","drag1","contentMask1","content1");
                
            myScroller1 = new ScrollObj(6,21,110,"track2","up2","down2","drag2","contentMask2","content2");

            }; 
            und die div id's angepasst und nun läuft es toll.

            danke für eure hilfe.

            Kommentar

            Lädt...
            X