problem mit diesem script.

[phowe]

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?

<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(ns4) this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function removeEvent(event){
    this[event] = null;
    if(ns4) this.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 ? y: y+"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(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
    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(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(){
    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

---

[pekka]

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:

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!

[phowe]

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

aber mit

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.

[wahsaga]

Original geschrieben von pekka
deshalb könnte das hier schon reichen:

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.

[asp2php]

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?

[phowe]

hallo,

habe nun:

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.