[JavaScript] Alle Divs = Z-index um 1 reduzieren

[dani_o]

moment - ich mein ja nich ich komm nich drumrum mit javascript zu arbeiten nene das mach ich schon länger - und ne weiche zwischen den browsern stellt ja kein problem dar. das mit ich komm nicht drumrum war auf das appendChild und removeChild bezogen, da ich eine Anwendung mit dynamischen Fenstern realisieren will. klar, es gibt genug frameworks dafür und auch genug vorlagen, allerdings wollt ich die auch begreifen, daher mach ich mir da halt selber ein javascript, womit ich dynamische, verschiebbare und mit Größenveränderung meine Fenster erstelle.

Dabei hätte ich noch ne frage:

drag & drop ist ja an für sich kein problem, nun brauch ich allerdings ein iframe in einem dieser fenster. dies zerschiesst mir aber sozusagen das drag & drop, da ich beim verschieben in das iframe komme und damit den layer verlasse. kann ich sowas irgendwie umgehen?

[Kropff]

wenn du unbedingt mit einem iframe arbeiten musst, imho nicht.

war auf das appendChild und removeChild

OffTopic:

---

hab auch ein wenig gebraucht, bis ich das begriffen hatte

---

peter

[dani_o]

Original geschrieben von Kropff
wenn du unbedingt mit einem iframe arbeiten musst, imho nicht.
peter

Verdammte axt - da muss ich wohl oder übel für diese abfrage dann ajax einsetzen, dann könnte ich auf das iframe verzichten. schade eigentlich das die maus schneller ist wie der div-layer

[dani_o]

KK nu funzt soweit alles hab aba imo nur noch 2 (kleine?) porbs ...
Den titel wollte ich in der taskleiste kürzen - imo mach ich das so:

var title2 = "";
    for(i=0;i<=12;i++){
        title2 += title[i];
    }
    title2 += " ..."; 

funzt in allen browsern auch 1a - nur in diesem bescheidenen IE nich ... welche funktion müsste ich da nehmen?

2. prob
Ich will das man die div-fenster wie in windoof dynamisch vergrößern und verkleinern kann - iss dieser denkansatz richtig? :

- position des div-fensters ermitteln
- untere rechte ecke ermitteln
- maus verfolgen
- mit mausposition berechnen wie die neue fenstergröße wäre

oder gibt es da schon einfertiges skript oder tut, woran man s lernen könnte ?

[dani_o]

1. iss nu klar - mit substr zu realisieren
2. besteht noch

[PHP-Desaster]

Hast du mal versucht während des Drags ein DIV über den iFrame zu legen, so dass die Maus den iFrame nicht mehr direkt berühren kann?

[dani_o]

ne habs anders gelöst, dadurch das ich noch buttons im div-fenster brauche und diese 42 pixel hoch sind ist das frame darunter nimmer im weg. ergo mein drag und drop geht nun - nur noch das resize stellt n prob dar ...

[Kropff]

- position des div-fensters ermitteln
- untere rechte ecke ermitteln
- maus verfolgen
- mit mausposition berechnen wie die neue fenstergröße wäre

- linke obere ecke des divs ermitteln
- auf rechte untere ecke event-handler mit flag für onmousedown und onmouseup legen
- mit bodyonmousemove mausposition ermitteln
- fenstergröße berechnen

habe das so selber mal vor zwei jahren gemacht, war aber eine ziemliche frickelarbeit.

peter

[dani_o]

Original geschrieben von Kropff
- linke obere ecke des divs ermitteln
- auf rechte untere ecke event-handler mit flag für onmousedown und onmouseup legen
- mit bodyonmousemove mausposition ermitteln
- fenstergröße berechnen

habe das so selber mal vor zwei jahren gemacht, war aber eine ziemliche frickelarbeit.

peter

na dann war ich ja nah drann auweia mich schüttelts schon bei dem gedanken das umzusetzen aba was muss das muss Es soll die admin für nen webshop werden und der Kunde will eine arbeitsoberfläche ähnlich windoof - achja immer diese sonderwünsche xD

[jmc]

Deine Beschreibung trifft in etwa zu. Ein onmousedown-Handler für das Element, testen ob die Maus an einem Rand des Objekts ist (oder an einer Ecke). Ein onmousemove-Handler für das Element, der erstellt wird sobald ein onclick am Rand erfolgt ist und wieder gelöscht wird mittels eines onmouseup-Eventhandler.
Pseudo-Code

Function.prototype.bind = function(o){
 var m = this;
 return function() {
  return m.apply(o);
 }
}
element.onmousedown = function(e){
 e = e ? e : event;
 var elementSize = Array(0,0) // [width, height], mit offsetWidth, pixelWidth, etc. das selbe mit Height 
 var elementPos = Array(0, 0); //[x, y], mittels offsetTop, offsetLeft (Scrolling nicht vergessen)
 var border = Array(0,0,0,0);  // oben, rechts, unten, links wird die Maus da irgendwo aktiviert?
 var mousePos = Array() // [x,y] mit pagex, pagey, clientx, clienty, etc. (scrolling nicht vergessen)
 if(mousePos[1] > elementPos[1] && mousePos[1] < elementPos[1] + 10){
  border[0] = true;
 }
 if(mousePos[0] > elementPos[0] + elementSize[0] && mousePos[0] < elementPos[0] + elementSize[0] + 10){
  border[1] = true;
 }
 if(mousePos[1] > elementPos[1] + elementSize[1] && mousePos[1] < elementPos[1] + elementSize[1] + 10){
  border[2] = true;
 }
 if(mousePos[0] > elementPos[0]  && mousePos[0] < elementPos[0] + 10){
  border[3] = true;
 }
 if(boarder != Array(0, 0, 0, 0)){
  this.border = border;
  element.onmousemove = moveFunc.bind(this);
 }
}
element.onmouseup = function(){
 element.onmousemove = null;
}
function moveFunc(){
 // mit this kannst du erfahren wo die Maustaste gedrückt wird und welche. dann das element verkleinern oder vergrössern.
}

[dani_o]

Änder ma deine zeilenumbrüche - imma dieses seitwärtsscrollen!

So das resize hab ich hinbekommen - aber !!! kommt nach dem script:

var rezobjekt = null;
var rezx = 0;
var rezy = 0;
var pos_x = 0;
var pos_y = 0;
var pos   = null;
var rezwidth = null;
var oops = null;

function resizeinit() {
 // Initialisierung der Überwachung der Events
  document.onmousemove = rez;
  document.onmouseup = rezstop;
}

function rezstart(element) {
   //Wird aufgerufen, wenn ein Objekt verändert werden soll.
  rezobjekt = document.getElementById(element);
  rezwidth  = rezobjekt.style.width;
  rezwidth  = rezwidth.replace(/px/g, "");
  rezheight  = rezobjekt.style.height;
  rezheight  = rezheight.replace(/px/g, "");
  rezx = pos_x - rezobjekt.offsetLeft;
  rezy = pos_y - rezobjekt.offsetTop;
  oops = element.replace(/window/g, "inhalt");
}
function rezstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr verändert werden soll.
  rezobjekt=null;
}

function rez(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
  pos_x = document.all ? window.event.clientX : ereignis.pageX;
  pos_y = document.all ? window.event.clientY : ereignis.pageY;
  if(rezobjekt != null) {

    var bx  = (pos_x - rezx);
    var by  = (pos_y - rezy);
    if(bx>=0){ var nbx = eval( Math.abs(rezwidth) + Math.abs(bx) );    }
    else{ var nbx = ( rezwidth - Math.abs(bx))    }

    if(by>=0){ var nby = eval( Math.abs(rezheight) + Math.abs(by) );    }
    else{ var nby = ( rezheight - Math.abs(by))    }
    
    var ih = nby - 27 - 21 - 21;

    document.getElementById(oops).style.height = ih;    
    rezobjekt.style.width = nbx+"px";
    rezobjekt.style.height = nby+"px";

    document.getElementById("time").innerHTML = nbx;
  }
} 

Nun das aber - diese funktion liegt auf dem image "resize" welches eine größe von 12x12 Pixel hat - wieder rutscht man dort von der grafik - das soll aber nur resizen, wenn man auf der grafik ist. ist sozusagen das skript zu langsam oder wie kann ichs anders machen?

[jmc]

rezwidth = rezobjekt.style.width; // damit bekommst du nicht die wirkliche Grösse

Das ganze musst du natürlich nicht global machen...
Du musst auch nicht dein rezObjekt = null setzen, sondern den onmousemove - Event - Handler.
Ausserdem solltest du pos_x, pos_y etc. nicht global anlegen, sondern der Funktion als Element übergeben.
Deine Berechnung von bx und by ist auch ziemlich komisch, denn du kannst es ohne Probleme auch ohne Math.abs machen.

Änder ma deine zeilenumbrüche - imma dieses seitwärtsscrollen!

Bei mir geht das nur ca in die Hälfte.

[dani_o]

Original geschrieben von jmc
Das ganze musst du natürlich nicht global machen...
Du musst auch nicht dein rezObjekt = null setzen, sondern den onmousemove - Event - Handler.
Ausserdem solltest du pos_x, pos_y etc. nicht global anlegen, sondern der Funktion als Element übergeben.
Deine Berechnung von bx und by ist auch ziemlich komisch, denn du kannst es ohne Probleme auch ohne Math.abs machen.

Bei minuswerten streikt dann aber das script - ka warum ...

Original geschrieben von jmc

Bei mir geht das nur ca in die Hälfte.

Nicht jeder hat ne auflösung über 1024 pixel!

[jmc]

Kein Wunder mit eval (!!?), keiner Offsetprüfung und deiner Berechnung oben. Bei dir wird immer, wenn du deine Maus auf dem Bildschirm bewegst diese Funktion aufgerufen. Da kommt der Browser und dein PC nicht nach. Deswegen nicht global und onmousemove muss wieder entfernt werden.
Bei dir sehe ich ausserdem nirgends einen Test an welcher Ecke vergrössert oder verkleinert wird.

oben: Die Position im Dokument muss oben verändert werden und die Höhe des Elements auch
links: Die Position links muss verändert werden und die Breite des Elements auch
rechts: nur die Breit
unten: nur die Höhe
oben links: höhe und breite, position links und oben
oben rechts: höhe und breite, position oben
unten links: höhe und breite, position links
unten rechts: höhe und breite

Bei onmousedown speicherst du einen Startwert der onmousedownposition, die Startgrösse des Elements, die Startgrösse des Elements und wo das Element angeklickt wurde(ob rechts, links, unten, oben (wenn oben und rechts z.B. dann ist es die Ecke)) (als this anbinden!!!). In der bei onmousedown erstellten Funktion prüfst du nachher welcher Unterschied zwischen den Anfangswerten und der aktuellen Mausposition bestehen und rechnest die je nach Ecke hinzu oder ab. Du solltest dabei prüfen ob die Werte nicht schon zu klein sind (z.B. Breite = 0, am besten hörst du schon bei 3 pc auf) und dann entweder die onmousemove Funktion löschen oder die Grösse, Position, etc. einfach aufs Minimum setzen, z.B. 3 px und die Position gar nicht mehr verändern sobald es auf <3px gesetzt werden müsste

[dani_o]

ganz ehrlich? war mir zu umständlich ich habs auf die art von linux realisiert - wird der button "resize" gedrückt verändert das fenster seine größe so, das nur noch der titel zu sehen ist. mit dem button maximize erhält mann dann die ursprüngliche Position und Größe zurück ;D ich hab noch mehr funktionen in dieser Anwendung, die auf javascript basieren. Die Rechenleistung wird also derart hoch, dass dann selbst das Verschieben nur mit rucken möglich ist. deshalb reduziere ich das lieber auf ein minimum.

Dein Ansatz werd ich aber trotzdem mal versuchen umzusetzen - einfach so aus neugier