Div-größen veränderung

Dicker1

Hallo an alle
Ich wünsche euch ersteinmal ein schönes neues Jahr und viel erfolg.

Ich wende mich an euch miteinem Problem aus dem ich keinen Ausweg mehr sehe. Meine js-kenntnisse sind dafür noch nicht ausreichend.

Folgendes:
Ich habe einen Div-Container. Dieses Div möchte ich mittels onmousedown vergrößern. Durch ziehen. Ich habe en Script gefunden und dieses umgeschrieben. Aber es klappt nicht. Egal was ich mache, ich ziehe mit der Maus und wenn ich klicke dann vergrößert sich das Div. Aber nicht so wie ich es wollte und schon gar nicht durch ziehen.

Folgender Code:
Hier rufe ich die function auf:

HTML

<td onmousedown="fnc_anfassen()" class="mauszeiger" height="15" width="15"><img src="./images/resize.gif"></td>

Das ist das js-script:

Code

function init()
                {             
                if(IE)
                    ieBody = getBody(); 
                  hy = window.event.clientY;
                  wx = window.event.clientX;
                  parent.document.onmousemove = getMousePos;
                }


//Variablen für die Mausposition
var moX = 0; 
var moY = 0; 
var hy;
var wx;
var mhy;
var mwx;




function getBody()
{
  return (window.document.compatMode == "CSS1Compat") ?
          window.document.documentElement : window.document.body || null;
}


var ieBody = null;
/*
function fnc_groesse()
{
  document.onmousemove = getMousePos;
  if(IE)
    ieBody = getBody(); 
}
*/


// Funktion zum Ermitteln der Mausposition
function getMousePos(ereignis)
{
  // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
  moX = (IE) ? window.event.clientX : ereignis.pageX;
  //moY = (IE) ? (window.event.clientY + ieBody.scrollTop) : ereignis.pageY;
  moY = (IE) ? window.event.clientY : ereignis.pageY;
  //mhy = window.event.clientY;
  //mwx = window.event.clientX;
  window.status = "Mauskoordinaten (x, y): (" + moX + ", " + moY +")";

}


function fnc_anfassen()
    {
        getMousePos()
        if (hy != moY || wx != moX)
            {
                getMousePos() 
                parent.document.onmousemove = fnc_anpassen;
                parent.document.onmousedown = fnc_anpassen;
            }
        //alert ( hy + " , " + moY);
    }




function fnc_anpassen()
{
    var apy;
    var apx;
    var sy = 600;
    var sx = 980;
    apy = sy + (moY - hy) + "px";
    apx = sx + (moX - wx) + "px";
    //alert (apx + "," + apy);
    //alert (wx + "," + hy + " , " + moX + " , " + moY);
    parent.document.getElementById('divzwei').style.height = apy;
    parent.document.getElementById('divzwei').style.width = apx;
}

Alles anzeigen

Könnt ihr mir bei meinem Problem helfen?

Ich danke euch im vorraus

Dicker1

synaptic

du solltest dir angewöhnen, mal etwas mehr code zu posten.. es ist nicht grad einfah sich zB die styles, die hier fehlen dazu zu denken.
am besten du postest die komplette html-file und soltest du den style in ner externen datei haben pack den der einfachheit halber auch in den sourcecode.

Dicker1

Hallo synaptic
Wie war Dein kurzurlaub?

Dies ist der html-code um den es geht:

HTML

<div class="layerOptions_zwei" id="divzwei">
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr>
                <td class="layer_td_table" border="0" cellpadding="0" cellspacing="0" height="18" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                        <tr>
                            <td height="18" width="100%">
                                <table class="layer_tab" border="0" cellpadding="0" cellspacing="0" height="18" width="960"onmousedown="startDrag(document.getElementById('divzwei'));">
                                    <tr>
                                        <td height="18" width="25"><img src="./images/sem_icon_delete.gif"></td>
                                        <td id="td_id" height="18" width="935"></td>
                                    </tr>
                                </table>
                            </td>
                            <td onclick="fnc_schliessen_zwei();" cellpadding="0" cellspacing="0" height="18" width="20"><img src="./images/layer_schliessen.jpg" border="0"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td cellpadding="2" width="100%">
                    <iframe src="fnc_showlayer_zwei();" class="iframeAll" marginheight="0" marginwidth="0" id="ifr_zwei" name="iframe_zwei" frameborder="0" scrolling="yes"></iframe>
                </td>
            </tr>
                <tr>
                    <td height="15" width="100%">
                    <table border="0" cellpadding="0" cellspacing="0" height="15" width="100%">
                    <tr>
                        <td height="15" width="965"></td>
                        <td onmousedown="fnc_anfassen()" class="mauszeiger" height="15" width="15"><img src="./images/resize.gif"></td>
                    </tr>
                    </table>
                    </td>
                </tr>
        </table>
    </div>

Alles anzeigen

Der style ist folgender:

HTML

layerOptions_zwei            {
                            position         : absolute;
                            top              : 150px;
                            left             : 150px;
                            width            : 980px;
                            height           : 600px;
                            border           : 1px solid #000000;
                            background-color : #cccccc;
                            z-index          : 2;
                            visibility       : hidden;
                            cursor           : default;
                        }


.iframeAll                {
                            position         : relative;  
                            bottom           : 0px;
                            left             : 0px;
                            width            : 100%;
                            height           : 100%;
                            border           : 1px solid #000000;
                            visibility       : hidden;
                        }

.layer_td_table            {
                           color             :#FFFFFF;
                           font-family       : Verdana;
                           font-size         : 10px;
                           font-weight       : bold;
                           text-decoration   : none;
                           background-image     :url(../images/layer_leiste.jpg);
                        }    

.layer_tab                {
                           color             :#FFFFFF;
                           font-family       : Tahoma;
                           font-size         : 11px;
                           font-weight       : bold;
                           text-decoration   : none;
                        }


.frame_ueberlauf
                        {
                            overflow          :hidden;
                        }


.mauszeiger                {
                             cursor               :nw-resize;
                        }

Alles anzeigen

Gruß
Dicker

Dicker1

Ich glaube das ich einen Fehler bei mir entdeckt habe.
Das mit der for - Anweisung ist falsch.

HTML

function fnc_anfassen()
    {
        getMousePos()
        while (hy != moY || wx != moX)
            {
                getMousePos() 
                parent.document.onmousemove = fnc_anpassen;
                parent.document.onmousedown = fnc_anpassen;

                if (parent.document.onmouseup = true)
                    {
                        break;
                    }
            }
        //alert ( hy + " , " + moY);
    }

Alles anzeigen

Ich habe es mit einer While - Schleife versucht, aber ich bekomme kein gültiges Abbruchkriterium zu stande

synaptic

in deinem script steht des öfteren "IE" jedoch frage ich mich woher die zuweisung davon kommt? haste da noch andere scripte laufen, die entsprechende variablen füllen?
und die grafiken wären auch nice..
haste des ding schon irgendwo online?
um deine scripte zu prüfen bzw deren wirkungsweise nachvollziehen zu können, fehlen mir immer irgendwelche informationen

Dicker1

Ich kann es leider nicht Online stellen. Mein chef reist mir die Ohren ab. Es ist ein großes Projekt mit sensiblen Daten für das Intranet einer großen Firma.

synaptic

ok, dann mal so aus der luft probiert....
schreib mal ne funktion die deine aktuelle bedingung in der while-schleife prüft
und solange

Code

hy != moY || wx != moX

wahr ist ist gibste den return-wert true aus.
dann schreibste noch ne funktion die parent.document.onmouseup prüft und true oder false zurückgibt.
dann kannste beide funktionen in der while-schleife als boolschen wert benutzen und hast so auch schon die abbruchbedingung vorgefertigt

Dicker1

Danke Dir für Deine Antwort

Die beiden funktionen habe ich

Code

var pruefen;
function fnc_pruefen()
{
    if (hy != moY || wx != moX)
        {
            pruefen=true;
        }
    return true;
}        

var abbruch;
function fnc_abbruch()
{
    if (parent.document.onMouseup = true)
        {
            abbruch=true;
        }
    return true;
}

Alles anzeigen

Aber ich habe keine Ahnung wie ich die nun einbauen soll.
Wie kann ich bei einer Schleife eine funktion als Kriterium eingeben?

Gruß
dicker

synaptic

du müsstest hier als returnwerte 'abbruch' und 'pruefen' nehmen...
und dann kannste die funktionen selber als "wert" einsetzen

Dicker1

Danke Synaptic

habe ich eingebaut und es scheint auch zu kalppen.
Aber wenn ich das Div angreife mit der Maus dann wird das Div nur in der Breite und nicht in der höhe vergrößert, und das auch nur spontan und nicht während dem ziehen.

Der Code sieht nun so aus:

Code

function fnc_anfassen()
    {
        var apy;
        var apx;
        var sy = 600;
        var sx = 980;
        //getMousePos()
        while (pruefen = true)
            {
                getMousePos() 
                apy = sy + (moY - hy) + "px";
                apx = sx + (moX - wx) + "px";
                parent.document.getElementById('divzwei').style.height = apy;
                parent.document.getElementById('divzwei').style.width = apx;

                if (abbruch = true)
                    {
                        break;
                    }
            }
    }

var pruefen;
function fnc_pruefen()
{
    if (hy != moY || wx != moX)
        {
            pruefen = true;
        }
    return pruefen;
}        


var abbruch;    
function fnc_abbruch()
{
    if (parent.document.onMouseup = true)
        {
            abbruch = true;
        }
    return abbruch;
}

Alles anzeigen

synaptic

while (pruefen = true) sollte entweder while (pruefen) oder while (pruefen == true)
und
if (abbruch = true) sollte entweder if(abbruch) oder if(abbruch == true)
sein, sonst dürfte die schleife als solches nicht wirklich ausgeführt werden...

zum resize.. ich kann dein script leider bei mir nicht zum laufen bekommen, wegen der oben genannten fehlenden informationen.

Dicker1

Das war ein flüchtigkeitsfehler. Den hatte ich nicht gesehen.
Nur wenn ich nun starte wird die Schleife nicht mehr ausgeführt.Kein Durchlauf mehr. Es erfolgt gleich ein Abbruch.

synaptic

ah ich hab da jetzt nochwas entdeckt du musst ja auch die funktionen aufrufen^^ also so ungefähr:
while (fnc_pruefen() = true) sollte entweder while (fnc_pruefen) oder while (fnc_pruefen() == true)
und
if (fnc_abbruch() = true) sollte entweder if(fnc_abbruch()) oder if(fnc_abbruch == true)

klar man könnte jetzt sagen du hast den returnwert ja in ner globalen variable gespeichert, aber du brauchst ja ne kontinuierliche überprüfung stets ändernder werte

Dicker1

Danke
Das leuchtet ein. Und in die Schleife komme ich auch wieder.
Beim Rest muß ich noch basteln.

Ich danke dir sehr

Dicker

Tags