• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ein div bis zum Ende eines anderen Divs verlängern

T

Toad

Neues Mitglied
Hallo liebe Community,
ich habe eine Frage ich habe eine Testseite mit mehreren divs erstellt, dabei ist eines verlänger oder verkürzbar. Nun soll das wenn es verlängert wird automatisch bis an das Ende des divs verlängert werden in dem es sich befindet. Außerdem interessiert mich dabei wie ich bestimmte divs überspringen kann, an denen es nicht enden soll.

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
	<title>Testseite</title>
		<script type="text/javascript">
		
		var checkReso = false;
		var mouseLeft = false;
		var breite = 350;
		
		function change(now){
			checkReso = !checkReso;
			breite = parseFloat(now.parentNode.style.width);
				
				if(checkReso){
					mouseLeft = false;
					document.getElementsByTagName('body')[0].style.cursor = "se-resize";
				}
				else{
					document.getElementsByTagName('body')[0].style.cursor = "default";
				}
		}
		
		function move(event){
			if(!checkReso)
				return;
			if(!mouseLeft){
				mouseLeft = event.clientX;
			}
			
			var difX = mouseLeft - event.clientX;
			
			if((breite - difX) > 0)
			document.getElementById('task').style.width = breite - difX + "px";
		}
		
		document.onmousemove = move;
		</script>

	<style type="text/css">
		body, html{
		height:100%;
		width:100%;
		overflow:hidden;
}
	</style>
</head>
	<body>
	
<!--Build the columns for the week dates (Monday...., Sunday)-->
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:0px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul1"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:101px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul2"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:202px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul3"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:303px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul4"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:404px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul5"></div>
<div style="background-color:#D02090; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:505px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul6"></div>
<div style="background-color:#D02090; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:606px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul7"></div>
<div style="background-color:#0000FF; border:1px solid #00008B; height:600px; width:100px; position:absolute; left:707px; top:0px; opacity:0.3; filter: alpha(opacity=50)" id="cul8"></div>
<!--//Build for the task in our Grid-->
<div style="background-color:#228B22; height:50px; width:350px; position:relative; left:120px; top:110px;" id="task">
<div style="background-color:#228B22; position:absolute; bottom:0px; right:0px; width:10px; height:50px; cursor:se-resize;" onclick="change(this)"></div>
</div>
	</body>
</html>

Wenn der Code erzeugt wird, erzeugt er Blaue und Rote Spalten, dabei soll zB. bei Blauen bis ans ende des Blauen gezogen werden, und wenn in einer Roten geendet wird, bis zum Ende des nächsten Blauen.
Mir fehlt dazu momentan jede Idee, und ich hoffe ihr habt vieleicht nen Tipp, Trick oder nen Link wo ich Informationen dazu finde.

Ich hoffe ihr könnt mir bei meinem Problem helfen
 
Leider kann ich nicht nachvollziehen, was du machen willst, und dein Code funktioniert bei mir überhaupt nicht...

Bitte erklär nochmal genauer, was du machen willst und was nicht funktioniert...
 
Wie auf dem folgenden Bild sieht es aus:

task57o1.jpg


Das grüne Div ist bei mir verlängerbar, wenn es über einem blauen div abgelegt wird, soll es automatisch bis zum ende dieses divs erweitert werden, sodass man wenn man es verlängert es nicht in der mitte eines der blauen divs (spalten) abgelegt wird, sondern wenn das getan wird es automatisch verlängert wird.

Ich hoffe meine Idee ist jetzt etwas klarer
 
Das hab ich schon getestet muss aber mit width 100% sein will ja in der breite, aber das funktioniert leider so nicht
 
Toad schrieb:
Das grüne Div ist bei mir verlängerbar, wenn es über einem blauen div abgelegt wird, soll es automatisch bis zum ende dieses divs erweitert werden, sodass man wenn man es verlängert es nicht in der mitte eines der blauen divs (spalten) abgelegt wird, sondern wenn das getan wird es automatisch verlängert wird.
Zum Vergrößern anklicken....

Benutz mal Punkte, achte auf deine Grammatik, so werde ich aus deinem Gebrabbel nicht schlau... Am besten versuchs in Stichpunkten...

Ich versuchs mal zu interpretieren:
- Der grüne Div ist beweglich und kann mit der Maus verschoben werden (Drag-and-Drop)
- Wird der grüne Div verschoben, und eine der beiden Enden (rechts und links) des grünen Divs innerhalb eines blauen Divs sind, soll sich die betroffene Ecke nach außen hin bis zur blauen Linie bewegen, den grünen Div als breiter machen.

Mehr kann ich deiner Beschreibung nicht entnehmen...

Leider hast du immernoch nicht dein Problem erklärt. Was geht nicht? Wir sind hier keine kostenlosen Programmierer, die nichts besseres zu tun haben, als für andere Scripte zu schreiben ;D
 
Nicht falsch verstehen ich will nix geschrieben haben, sondern Tipps wären mir lieb:

Also:
Das grüne Div besitzt an seiner rechten Seite ein Kinddiv. Wenn man darauf klickt, ist es möglich das Div breiter zu ziehen, und wenn man wieder klickt dann wird es wieder fixiert.
Mein Problem ist nun wenn ich das grüne Div verlängere, und es zum Beispiel in der Mitte eines der blauen Divs ablege, so soll das grüne Div automatisch bis zum Ende des blauen divs auf dem sein Ende liegt verlängert werden.

Wegen der Satzzeichen, Entschuldigung es war gestern spät und ich momentan nicht ganz fit, aber ich hoffe es ist nun etwas klarer geworden was mir Sorgen bereitet
 
Gut, jetzt habe ichs verstanden ;D

Als allererstes würde ich die Funktionalität ausarbeiten, damit man den Container überhaupt breiter/schlanker ziehen kann.

Da die blauen Divs anscheinend die gleiche Breite haben, kannst du dann auch ohne Divs arbeiten. Du fragst nach dem verschieben die Position des 'Verschieben'-Divs ab, und berechnest, wieviel noch bis zum Ende des blauen Divs (wenn er da wäre) fehlt.

Code: 
var rest = breite - (position % breite);
Damit bekommst du die Anzahl der Pixel, die du noch auf die Position bzw. auf die Breite draufrechnen musst.
 
hmmm ich probier es mal aber die Funktionalität gibt es ja schon, also länger und kürzer kann ich das schon ziehen
 
hmmm habs auf Mac und im Safari und Firefox funktioniert es bei mir

is aber am rechten wo sich der cursor verändert einmal klicken dann ziehen, ist nicht mit gedrückt halten
 
Ah ok, dann funktionierts doch ^^ Aber wenn ich zu schnell nach links ziehe, hab ich einen abstand zwischen Cursor und Div, d.h. ich kann nicht mehr auf den Div klicken und den Div wieder fixieren :P
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben