[J33d3X]

hallöchen ... kann mich mal jmd. zurechtstutzen
Problem:
Kunde möchte unter allen Umständen keine vom jeweiligen Browser erstellte Scrollbalken ... ( sondern per JS selbst definierte )
Im Moment schaffe ich es nicht den "Nullpunkt" Startpunkt des Sliders zubekommen meist steht der InnerContent 4-5 Pixel zu tief als wo er startete.

zum js code im Moment hab ich es so gelöst

var swScroll = {
  fnInit: function() {
    lyrSlide = getById("jsSlide");
    lyrSlide.pos = this.fnGetOffsets(lyrSlide);
    lyrSlide.offH = lyrSlide.offsetHeight;
    lyrOuter = getById("jsOuter");
    lyrOuter.pos = this.fnGetOffsets(lyrOuter);
    lyrOuter.offH = lyrOuter.offsetHeight;
    lyrInner = getById("jsInner");
    lyrInner.pos = this.fnGetOffsets(lyrInner);
    lyrInner.offH = lyrInner.offsetHeight;
    lyrDrag = getById("jsDrag");
    lyrDrag.pos = this.fnGetOffsets(lyrDrag);
    lyrDrag.offH = lyrDrag.offsetHeight;
    scrollLength = (lyrSlide.offH-lyrDrag.offH)/lyrInner.offH;
    lyrDrag.style.position="absolute";
    Q = lyrInner.offH/lyrSlide.offH;
  },
  
  fnStartDrag: function() {
    this.fnInit();
    
    if (lyrInner.offH > lyrSlide.offH) {
      if(document.addEventListener) {
        document.addEventListener("mousemove", swScroll.fnDoDrag, true);
        document.addEventListener("mouseup", swScroll.fnEndDrag, true);
        document.addEventListener("mouseout", swScroll.fnEndDrag, true);
      } else {
        document.attachEvent("on" + "mousemove", swScroll.fnDoDrag);
        document.attachEvent("on" + "mouseup", swScroll.fnEndDrag);
        document.attachEvent("on" + "mouseout", swScroll.fnEndDrag);
      }
    }
  },
  
  fnDoDrag: function() {
    lyrDrag.currY = parseInt(lyrDrag.style.top.replace("px",''));
    lyrInner.currY = parseInt(lyrInner.style.top.replace("px",''));
    
    if (mouseY>=lyrOuter.pos.y) {
    lyrInner.style.top = -((mouseY/scrollLength)-(lyrOuter.pos.y+lyrDrag.offH*2)) + "px";
    
    lyrDrag.style.top  = (mouseY+(lyrDrag.offH/2))<(lyrSlide.offH+lyrSlide.pos.y-(lyrDrag.offH/2))
                       ? (mouseY-(lyrSlide.pos.y))+"px"
                       : lyrDrag.currY;
    }
  },
  
  fnEndDrag: function() {
    if(document.removeEventListener) {
      document.removeEventListener("mousemove", swScroll.fnDoDrag, true);
      document.removeEventListener("mouseup", swScroll.fnEndDrag, true);
      document.removeEventListener("mouseout", swScroll.fnEndDrag, true);
    } else {
      document.detachEvent("on" + "mousemove", swScroll.fnDoDrag);
      document.detachEvent("on" + "mouseup", swScroll.fnEndDrag);
      document.detachEvent("on" + "mouseout", swScroll.fnEndDrag);
    }
  },
  
  fnGetOffsets: function(el) {
    var left=el.offsetLeft;
    var top=el.offsetTop;
    if(el.offsetParent&&el.offsetParent.clientLeft||el.offsetParent.clientTop){
      left+=el.offsetParent.clientLeft;
      top+=el.offsetParent.clientTop;
    }
    while(el=el.offsetParent){
      left+=el.offsetLeft;
      top+=el.offsetTop;
    }
    return{x:left,y:top};
  }
}

wäre für jede idee dankbar

grüsse

[VolkerK]

Der Schreibweise nach ist das eine Komponente für Mozilla?
Darf ich neugierig sein und fragen, warum es nicht die Standardbalken sein dürfen?

Du machst doch in DoDrag einen Bereichstest. Wenn die aktuelle Mausposition darüber oder darunter liegt, setze den Sichtbereich doch einfach auf Minimum oder Maximum. Also ohne großartige Berechnung, sondern einfach Wert auslesen, setzen, Maus "vergessen".

[J33d3X]

es geht um eine Inet Präsentz eines bekannten Tonstudios in FFM, wobei
ein Hauptaugenmerk a) darauf liegt das nur bestimmte Schriftarten genommen werden ( somit die bsp.: News dyn. Bilder erzeugt werden vom Text um Schrift gleich zu halten ) b) alles in Grafik ( Layer "z-index" ) eingebunden ist damit der Text in diesem Fall die generierten Textbilder zwischen verschiedenen Layern scrollt und demnach alle Scrollbalken, welche auftreten können ein eigenes Design bekommen sollen ( eine vereinfachungduch einsetzen von Flash war/ist nicht erwünscht )
König <-> Kunde
also blieb nach meinem dafürhalten nur die Möglichkeit der realisation in js auch meine "Bedenken" ( deaktiviertes js usw. ) waren anscheinend nicht überzeugend genug daher versuch ich zumindest durch DOM ein a) kompakten Code und b) halbwegs Crossbrowser fähigen Code zu erzeugen
( was anscheinend den Eindruck erweckt wie du sagtest das es eine moz komponente sein könnte )

ok zurück zum prob:
der aufbau ist recht simpel
- slider ( max. strecke des Scrollbakens und ausrichtung innerhalb des documents )
- Drag ( "button" des scrollbalkens beinhaltet die eventhandler over,down, move, out )
- inner/outer div container welcher mittels overflow:hidden den textcontent ( inner ) positionieren

durch angaben von position:absolute könnte man fast sagen erhalte ich die "fähigeit" des bewegens des textes

beginnt der Drag ( angenommener Nullpunkt/Ausgangspunkt ) bei position:absolute top 125, left 450
ist der ( angenommene Nullpunkt/Ausgangspunkt ) des inner div Containers
position:absolute top 130, left left 60

habe ich nun eine scrollstrecke hoch...runter wieder hoch... zwischdurch mouseout zurückgelegt und bewege nun den Drag auf seinen Angenommen Nullpunk top 125, left 450 so befindet sich der innerContent dann nicht an seinem absoluten Nullpunk top 130, left left 60 sondern top 124, left left 60
da aber Drag schon am Nullpunkt ist ist der scroll "abgeschlossen" und es sieht etwas verschoben aus da ich nicht einfach annehmen kann das der User auf null gescrollt hat muss ich ja die abfrage machen ( y-position der Maus ist sie === mit y-position des Nullpunkt Drag ....

wow ... bei erklären der fw. lösung gefunden
if( y-position der Maus ist sie === mit y-position des Nullpunkt Drag)
style top inner Nullpunk wobei durch die verschiebung von ca. 4-6 pixel dann ein "zucken" des textes sicher zu sehen ist ...
hmmm werd es mal schnell testen

sollte ich einfach zu blöd gewesen sein deine Aussage

Also ohne großartige Berechnung, sondern einfach Wert auslesen, setzen, Maus "vergessen".

richtig zu interpretieren hoffe ich um nachsicht und wenn ich vermessen sein darf hoffe ich weiter auf

Zitat von selbst

"Hää wie meinst das

viele grüsse J

[VolkerK]

if( y-position der Maus ist sie === mit y-position des Nullpunkt Drag)
style top inner Nullpunk wobei durch die verschiebung von ca. 4-6 pixel dann ein "zucken" des textes sicher zu sehen ist ...

Genau das war gemeint.
Keine Berechnung Maus-Position<->Viewport-Position, sondern einfach Mausposition kleiner-gleich Schwellwert -> Viewport auf 0 setzen.

edit:
Alternativer Pfusch : Scrollbereichs des Balkens kleiner annehmen als er wirklich ist., also z.B. Höhe:154px, zur Berechnung herangezogen: 150px. Das bedeutet, dass der Scrollbalken zwischen 2 und 152px 100% des Viewports abdeckt. Alles was darüber hinausgeht (in beide Richtungen) wird ignoriert.
Manchmal habe ich das Gefühl, dass der IE unter bestimmten Umständen so funktioniert.

[J33d3X]

ich danke dir ...

ich muss gesetehen das es für einen n00b Klasse ist mit kompetenten Menschen kommunizieren zu können

thx

[edit]
die berechnung enstand aus der Überlegung heraus, daß beim erreichen des Nullpunktes durch den Drag die hälfte des offsets des Drags abgezogen werden muss da die mouse position sich innerhalb des Drag befindet und nicht am oberen rand ( ich dachte daher kommt die verschiebung von den genannten pixeln )

[VolkerK]

Zitat von J33d3X

ich muss gesetehen das es für einen n00b Klasse ist mit kompetenten Menschen kommunizieren zu können

Also bei Frontends bin und bleibe ich ehrlich gesagt Dauern00b
Aber wenn Du Deine Probleme selbst gelöst bekommst, wenn Du zum Laut-Denken angeregt/genötigt wirst, bin ich begeistert

[J33d3X]

Zitat von VolkerK

Also bei Frontends bin und bleibe ich ehrlich gesagt Dauern00b

na,na,naaa
wer jmd. mit einem leichten Tritt zur Lösung bringt ohne den Code "vorzukauen" kann/darf nicht das n00b wort verwenden

d.h. ? wenn ich fragen darf was dein "spezial" Gebiet ist
Backendlösungen in der Art Frontend - FLEX <-> SOAP <-> Backend ?

hab nebenbei noch ein tomcat laufen ( zum lernen, schreiben JSP ) war schon
in der Überlegung solch ein system mal aufzubauen FLEX <-> SOAP <-> Backend ( auf JSP basierend ) oder aber Backend PHP basierend

a) um des Lernenswillen
b) um das Repertoire aufzustocken


gruss

[J33d3X]

ich hab nochmal etwas daran rum gebastelt ... ( bis darauf des der scroll sich ab und an mal "verschluck" ... unregelmäßig ) funtzt sonst alles

falls jmd. gravierende dinge auffallen bitte ich darum mich aufmerksam zu machen ( will nich dumm sterben )

Hier der JScode:

var obArray = new Array();
obArray = {
    "lyrSlide" : "jsSlide",
    "lyrOuter" : "jsOuter",
    "lyrInner" : "jsInner",
    "lyrDrag"  : "jsDrag"
}

var swScroll = {
    
    nullPoint:  null,
    
    fnInit: function() {
        for (var key in obArray) {
            eval(key + '=this.fnGetById(obArray[key])');
        }
        this.nullPoint = parseInt(lyrSlide.style.top.replace('px',''));
    },
  
    fnStartDrag: function() {
        this.fnInit();
        lyrDrag.offH  = lyrDrag.offsetHeight;
        lyrOuter.offH = lyrOuter.offsetHeight;
        lyrInner.offH = lyrInner.offsetHeight;
        lyrSlide.offH = lyrSlide.offsetHeight;
        lyrOuter.pos  = this.fnGetOffsets(lyrOuter);
        this.nullPoint = this.nullPoint+lyrDrag.offH;
        
        if(document.addEventListener) {
            document.addEventListener("mousemove", swScroll.fnDoDrag, true);
            document.addEventListener("mouseup", swScroll.fnEndDrag, true);
        } else {
            document.attachEvent("onmousemove", swScroll.fnDoDrag);
            document.attachEvent("onmouseup", swScroll.fnEndDrag);
        }
    },
  
    fnDoDrag: function() {
        lyrDrag.currY  = parseInt(lyrDrag.style.top.replace("px",''));
        lyrInner.currY = parseInt(lyrInner.style.top.replace("px",''));
        
        
        if (mouseY>lyrOuter.pos.y && mouseY<((lyrOuter.pos.y + lyrOuter.offH)-lyrDrag.offH)) {
            lyrInner.style.top = - lyrInner.offH/(lyrSlide.offH-lyrDrag.offH)*(mouseY-lyrOuter.pos.y); + "px";
            lyrDrag.style.top  = mouseY-lyrDrag.offH*2;
        }
        
        if (lyrDrag.currY < 0 || mouseY < this.nullPoint) {
            lyrInner.style.top = 0 + "px";
            lyrDrag.style.top  = 0 + "px";
        }
    },
  
    fnEndDrag: function(ev) {
        if(document.removeEventListener) {
            document.removeEventListener("mousemove", swScroll.fnDoDrag, true);
        } else {
            document.detachEvent("onmousemove", swScroll.fnDoDrag);
        }
    },
  
    fnGetOffsets: function(el) {
        var left=el.offsetLeft;
        var top=el.offsetTop;
        if(el.offsetParent&&el.offsetParent.clientLeft||el.offsetParent.clientTop){
            left+=el.offsetParent.clientLeft;
            top+=el.offsetParent.clientTop;
        }
        while(el=el.offsetParent){
            left+=el.offsetLeft;
            top+=el.offsetTop;
        }
        return{x:left,y:top};
    },
  
    fnGetById: function(idname) {
        var objects = new Object();
        if (typeof(objects[idname]) == "undefined") {
            if(document.getElementById) {
                objects[idname] = document.getElementById(idname);
            } else if (document.layers) {
                objects[idname] = document.layers[idname];
            } else if (document.all) {
                objects[idname] = document.all[idname];
            }
        }
        return objects[idname];
    }
}

Hier der HTMLcode:

<html>
<head>

<script src="jsscroll.js" type="text/javascript"></script>
</head>
<body onload="mouse()">

<p> </p>
<div id="jsSlide" style="position:absolute;left:270px;top:50px;width:20px;height:200px;float:left;">
<img id="jsDrag" style="left:0px;top:0px:position:absolute;" src="drag.gif" alt="" onmousedown="swScroll.fnStartDrag();" /></div>

<div id="jsOuter" style="left:300px;top:50px;width:400px;height:200px;border:1px solid #0f0f0f;overflow:hidden:position:absolute;">
<div id="jsInner" style="position:absolute;top:0px;left:0px;">
<b>Start:</b> Text,Text Text,Text,Text Text,Text,Text Text,
<!-- ohne ende weiter text um auch was zum scrollen zu haben -->
...
<b>ENde:</b>Text,Text Text,Text,Text Text,Text,Text Text,
</div>
</div>
</body>
</html>

ggf.: http://swbulletin.no-ip.org/jsscroll/index.html ( wenn mein router mitspielt )