Hilfe bei dynamischer Plazierung (nur für Profis)

  • Hallo,

    ich habe ein Problem mit einem Script und komme wirklich nicht weiter.
    Ich habe ein Script für ein "Floating Menu" gefunden und man kann es so einstellen das es sich xx pixel vom linken rand entfernt bewegt oder zentriert ist.

    Um es deutlicher zu machen habe ich eine Beispieldatei gemacht:

    http://chromax.gmxhome.de/problem.htm


    Die gestrichelte Linie (also die I´s) sollte links den Rand des Textes berühren. Der Text ist zentriert und demnach dynamisch bei jeder Fenstergröße oder Auflösung des Nutzers unterschiedlich weit entfernt vom Rand. Die "linie" aber soll immer den Text links streifen.


    Hier das Script:


    Im HEAD


    <SCRIPT LANGUAGE="JavaScript">
    <!--
    floatX=100;
    floatY=100;
    layerwidth=204;
    layerheight=151;
    halign="center";
    valign="center";
    delayspeed=3;


    // This script is copyright (c) Henrik Petersen, NetKontoret
    // Feel free to use this script on your own pages as long as you do not change it.
    // It is illegal to distribute the script as part of a tutorial / script archive.
    // Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
    // This comment and the 4 lines above may not be removed from the code.

    NS6=false;
    IE4=(document.all);
    if (!IE4) {NS6=(document.getElementById);}
    NS4=(document.layers);

    function adjust() {
    if ((NS4) || (NS6)) {
    if (lastX==-1 || delayspeed==0)
    {
    lastX=window.pageXOffset + floatX;
    lastY=window.pageYOffset + floatY;
    }
    else
    {
    var dx=Math.abs(window.pageXOffset+floatX-lastX);
    var dy=Math.abs(window.pageYOffset+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    if (NS4){
    document.layers['floatlayer'].pageX = lastX;
    document.layers['floatlayer'].pageY = lastY;
    }
    if (NS6){
    document.getElementById('floatlayer').style.left=lastX;
    document.getElementById('floatlayer').style.top=lastY;
    }
    }
    else if (IE4){
    if (lastX==-1 || delayspeed==0)
    {
    lastX=document.body.scrollLeft + floatX;
    lastY=document.body.scrollTop + floatY;
    }
    else
    {
    var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
    var dy=Math.abs(document.body.scrollTop+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    document.all['floatlayer'].style.posLeft = lastX;
    document.all['floatlayer'].style.posTop = lastY;
    }
    setTimeout('adjust()',50);
    }

    function define()
    {
    if ((NS4) || (NS6))
    {
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
    if (halign=="center") {floatX=Math.round((window.innerWidth)/2)-Math.round(layerwidth/2)};
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
    if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
    }
    if (IE4)
    {
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
    if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
    if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
    }
    }
    //-->
    </script>


    BODY (am Ende)


    <script>
    if (NS4) {document.write('<LAYER NAME="floatlayer" left="'+floatX+'" TOP="'+floatY+'">');}
    if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
    </script>

    <span class="Stil1">I

    I

    I

    I</span>


    <script>
    if (NS4)
    {
    document.write('</LAYER>');
    }
    if ((IE4) || (NS6))
    {
    document.write('</DIV>');
    }
    ifloatX=floatX;
    ifloatY=floatY;
    define();
    window.onresize=define;
    lastX=-1;
    lastY=-1;
    adjust();
    </script>


    Danke im Vorraus

  • warum machst du es nicht mit css?

    sollte etwa so gehen.. oder willst du etwas ganz anderes erreichen?

  • phore hast du nicht gemerkt das sich der Stich bewegt wenn du die Fenstergrösse änderst?

    Ich glaube so nicht mit CSS realisierbar.

    Ich verstehe aber nicht 100% was du damit bezwecken willst.
    mach doch einfach ein padding oder margin zum Text hin.
    Es bewebt sich zwar nicht so «sanft» aber viel besser.

    Gruss ::RMB::

  • Dieses Ding ist nur ein Beispiel. Die echte Datei sieht ganz anders aus, aber ich muss ja nicht das ganze Ding mit alle den anderen Codes hier zeigen.

    Es geht darum das ein Fenster sich vertikal mit dem Scrollen mitbewegen soll. Die Seite dahinter ist aber dynamisch geschrieben, also ein wiederholender hintergrund, eine feste Tabelle in der Mitte des Bildschirms.

    Das bewegende Objekt wird aber so in die Hintergrundgrafik eingebaut das es sich immer auf der selben Stelle bewegen soll, egal welche Auflösung und Browserbreite.

    Eine Idee von mir war zu sagen: Geh in die Mitte und XX Pixel links.
    Aber das hat irgendwie auch nicht funktioniert. Da gibts dann auch kleinere Verschiebungen.

    Kann man ein Bild oder eine Marke setzen an eine Stelle und sagen "Nimm als Horizontalen Wert die Mitte dieses Bildes/Position der Marke" ???

    Kenne mich gar nicht mit aus, nur normales HTML.

  • Genau das dachte ich mir und würde es gerne wenn ich wüßte wie man das macht!?

    Wie gesagt, keine Ahnung.....hab mich durch SelfHTML gewühlt und rumprobiert aber nichts gefunden. Wie gibt man denn die ID des TD´s an?

    Die Zeile im Script die die Mittigkeit herstellt ist folgende:

    if (halign=="center") {floatX=Math.round((window.innerWidth)/2)-Math.round(layerwidth/2)};


    <td ID="Marke1">

    und dann:

    if (halign=="center") {floatX=Marke1)};

    funktioniert schonmal nicht! ;)