[GELÖST] DIV dynamisch anordnen

[sascha83]

Hallo,

ich habe folgendes Problem:



Ich positioniere mehrere DIV-Container absolute, dynamisch, in meiner Anwendung. Die Position ergibt sich auch einem zuvor berechneten Wert (Position, wie im Bild zu sehen, vertikale Striche). Per JQuery verschiebe ich die Container per Offset.
Mein Problem besteht nun darin, dass sich die Container, an den Stellen, an denen die Positionen nah beieinander liegen, überlagern. Wie bekomme ich es nun hin, dass ein überlagernder Container nach oben verschoben wird? Ich denke nur auf CSS zu setzen reicht da nicht aus. Wahrscheinlich brauche ich noch eine Abfrage die prüft, ob an der Position und in einer definierten Umgebung breits ein DIV positioniert ist?! Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt =(

<style>
  .track {
    position: absolute;
  }
</style>

<script>
function position() {
    var start = 30;
    for(var i = 0; i < track.length; i++) {
        /* berechne größe und Position */
        $("#track"+i).css('bottom', start);
        $("#track"+i).offset({left: trackPos});
    }
}
</script>

Vielen Dank für die Hilfe im Voraus.

 

[kkapsner]

Wahrscheinlich brauche ich noch eine Abfrage die prüft, ob an der Position und in einer definierten Umgebung breits ein DIV positioniert ist?

Ja, und das musst du per Hand machen. Aber das ich gar nicht so schwer: du speicherst dir immer die Position der oberen rechten Ecke des vorherigen "track"s. Dann schaust du, ob sie sich horizontal überschneiden und gegebenen Falls setzt du den bottom-Wert auf den vertikalen Wert der gespeicherten Ecke.

 

[sascha83]

Ich habe jetzt eine Abfrage geschrieben. Bin mir allerdings nicht sicher, ob das so korrekt ist und es so überhaupt funktionieren kann!?
Dreir Container sind jetzt wahllos versetzt angeordnet, die anderen liegen allerdings noch 'schön' in Reihe übereinander =(

function trackPos() {
    var winkel = parseInt(localStorage.getItem('winkel'));    
    var screenPart = $(document).innerWidth()/winkel;
    var centerPos = $(document).innerWidth()/2;
    var linkeEcke = [];
    for(var i = 0; i < places.length; i++) {
        var unten = 20, kurs = kursWinkel[i], screenCourse = kurs * screenPart, 
            breite = $(".links").width() + $(".rechts").width(), hoehe = trackWidth/3,
            trackPos = screenCourse + centerPos - breite, rechteEcke = trackPos + breite;
        if(i == 0) {
            $("#track"+i).css('bottom', unten);
        }
        for(var j = 0; j < leftCorner.length; j++) {
            if((trackPos >= leftCorner[j]) || (trackPos<= rechteEcke[j] )){
                $("#track"+i).css('bottom', trackPos - leftCorner[j]);
            } else {                
                $("#track"+i).css('bottom', unten);
            }   
        }
        linkeEcke[i] = trackPos;
        $("#track"+i).offset({left: trackPos});
        $("#track"+i).width(breite);
    }
}

 

[kkapsner]

Dein Code kann so irgendwie nicht laufen, da leftCorner nicht definiert ist... auch scheint mir deine Logik falsch zu sein... so wie ich deinen Code verstehe, sind in trackPos und leftCorner horizontale Koordinaten gespeichert und keine vertikalen - wieso schreibst du also eine Berechnung aus diesen beiden in "bottom" rein?

 

[sascha83]

Ich muss auch selbst langsam aufpasssen, dass ich noch durchsteige. 'bottom' habe ich durch offset() ersetzt. Habe den Code jetzt noch einmal abgeändert, bin mir aber nicht sicher, ob die Abfragen so funktionieren können. Einige DIVs liegen noch immer übereinander, einge werden zu weit nach oben geschoben. Es geht mir wirklich nur darum, dass sich die Container nicht überlagern und so der gesamte Inhalt zu erkennen ist.

function track() {
    var kameraWinkel = parseInt(localStorage.getItem('winkel'));    
    var screenPart = $(document).innerWidth()/kameraWinkel;
    var center = $(document).innerWidth()/2;
    var pos = [];
    
    for(var i = 0; i < name.length; i++) {
        var start = 7*$(document).innerHeight()/8;
        var kurs = kursWinkel[i];
        var screenCourse = kurs * screenPart;
        var trackW = $(".leftTrack").width() + $(".rightTrack").width();
        var trackH = trackW/3; 
        var trackPos = screenCourse + center - trackW;
        var right = trackPos + trackW;
        var left = trackPos - trackW;
        
        pos[i] = [];
        pos[i][0] = trackPos;
        pos[i][1] = start;
        
        for(var j = 0; j < pos.length; j++) {
            if(pos[i][0] == pos[j][0] || (pos[j][0] >= left && pos[i][0] <= right)) {
                $("#track"+i).offset({left: pos[i][0], top: pos[i][1]-trackH});
                pos[i][1] = pos[i][1]-trackH;
            } else {
                $("#track"+i).offset({left: pos[i][0], top: pos[i][1]});
            }
        }
        
        $("#track"+i).width(trackW);
    }
}

Anhang anzeigen 4590

 

[kkapsner]

dass ich noch durchsteige

Das hab' ich, ehrlich gesagt, noch überhaupt gar nicht... Aber ich hab' dir mal ein Beispiel gemacht, die man nicht überlappende Nodes realisieren könnte:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#trackContainer {
	padding: 5px 52px;
	background-color: black;
}
#track {
	position: relative;
	height: 300px;
}
.position {
	display: block;
	position: absolute;
	height: 30px;
	width: 100px;
	margin: 0px -51px;
	border: 1px solid white;
	background-color: darkgray;
	border-radius: 10px;
	color: white;
	bottom: 0px;
	text-align: center;
	vertical-align: middle;
}
</style>
</head>
<body>
<div id="trackContainer"><div id="track"></div></div>
<script type="text/javascript">
(function(){
	var positions = [0, 1, 0.3, 0.6, 0.25, 0.1];
	var track = document.getElementById("track");
	var nodes = [];
	
	positions.sort().forEach(function(pos){
		var position = document.createElement("span");
		position.className = "position";
		position.innerHTML = pos;
		track.appendChild(position);
		position.style.left = (pos * 100) + "%";
		nodes.push(position);
	});
	function arrange(){
		var lastNode = null
		nodes.forEach(function(node){
			if (lastNode && lastNode.offsetLeft + lastNode.offsetWidth > node.offsetLeft){
				node.style.bottom = (track.clientHeight - lastNode.offsetTop + 1) + "px";
			}
			else {
				node.style.bottom = "";
			}
			lastNode = node;
		});
	}
	arrange();
	window.addEventListener("resize", arrange, false);
}());
</script>
</body>
</html>

 

[sascha83]

Danke für dein Beispiel. Es hat mir sehr geholfen. Hat eine Weile gedauert, aber jetzt habe ich es zum Laufen bekommen PROBLEM GELÖST - neues hat nicht lange auf sich warten lassen, mache dafür aber einen neuen Post auf.

 

[kkapsner]

Danke für dein Beispiel.

Bitte - gern geschehen.

jetzt habe ich es zum Laufen bekommen

Wenn sich deine Lösung von meinem Beispiel unterschiedet, wäre es noch super, wenn du sie hier zeigen könntest. Würde kommenden Suchenden helfen.