JQuery Resize

B

bRainLaG

Mitglied
Hallo ich setze mich zurzeit mit Resize von JQuery auseinander, und mein Resize funktioniert auch. Ich habe nun das Problem, ich will zu meinem div was ich resize noch divs mit einbinden, die zB. 100 px breit sind, und in spaltenform (also wie eine Tabelle angeordnet sind), wenn nun das div zum Beispiel verlängert wird, und das Ende (rechts) in einem der Divs liegt die in Spaltenform angeordnet sind, soll es automatisch bis zum Ende des divs verlängert werden.
Ich habe nun schon ein wenig gegoogelt, und auch die resize Funktion angesehen, finde jedoch keine Möglichkeit das so zu machen, hat da jemand vieleicht eine Idee.

Hier mein Code bis jetzt:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<style type="text/css">
		#resize {
			width:500px;
			height:400px;
			background-color:#228B22
		}
	</style>
	
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/humanity/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="resize"></div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$("#resize").resizable({
				maxHeight: 400
        });
		});
	/* ]]> */
	</script>
</body>

</html>
 
Wenn ich dich richtig verstehe, könntest du einfach zuerst mittels ".width()" die Breite des Inhaltes ermitteln und diesen dann als minWidth mitgeben.
 
ich glaube nicht ganz richtig, ich habe ja mehrere divs nebeneinander (spaltenförmig), und ich brauche quasi die position vom ende meines resize divs, damit ich sagen kann wo es liegt und das ich es zB noch um den rest verlängern möchte nur wie ich das mache ist mir nicht klar.
 
Ich verstehe es leider immer noch nicht ganz. Das liegt evtl. auch daran, dass du zwar Beispielcode gepostet hast (was immer gut ist!), dort aber überhaupt keine divs in "#resize" enthalten sind. Also lässt sich das gewünschte Verhalten damit gar nicht prüfen.

Willst du, dass das rechteste der inneren divs immer am rechten Rand des #resize divs hängt, oder willst du verhindern, dass man #resize so klein machen kann, dass die anderen nicht mehr rein passen? Bei ersten stellt sich die Frage was passiert, wenn es so klein wird, dass selbst die rechtesten zwei nicht mehr rein passen?
 
Ich veranschauliche das mal in meinem Beispiel existiert momentan nur 1 Div das resizable ist.

image.php


Der Balken soll nun wenn er verlängert wird, automatisch bis an das Ende des unterliegenden Divs (des blauen) verlängert werden. Ich hoffe es wird damit etwas anschaulich
 
Ich hoffe jetzt hab ich es verstanden :-D. Ich dachte die ganze Zeit die Spalten-divs sollen in dem resizable drin sein. Könnte man das ganze dann als "einrasten" (snap) an den Spalten bezeichnen? Wenn man das resizen aufhört, dann soll es zum nächst-gelegenen Rand eines blauen Spalten-divs einrasten?
 
Die "grid" Eigenschaft ist nicht flexibel genug, oder? Also so

Javascript: 
$("#resize").resizable({grid: [100, false]});
 
jap denke ich auch, bin mit der Grid - Eigenschaft nicht komplett vertraut, aber es wirkt recht statisch falls ich das richtig sehe
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück