Jquery UI en resizable plugin -> resize meerdere elementen tegelijk

blackeagle67 · 7 mrt 2011

Hallo helpmij's,

Raar maar waar, ik heb een vraag aan jullie.
Voor een project op school moet ik de Jquery UI gebruiken.

Nou heb ik deze al redelijk werkend alleen moet nu als ik 1 van de links staande elementen (zie afb.) naar onder resize, de andere elementen mee laten resizen.
alsoResize werkt niet perfect ook al zou het ideaal zijn hiervoor. alsoResize resized een element naar gelijke grote. Ik wil juist dat als ik het bovenste element resize het middelste element kleiner word. Een reverse resize om zo maar te zeggen.

Ik heb al de volgende code al geprobeert: http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse
Maar dit werkt niet naar behoren en weet niet of jullie misschien al eens zoiets hebben gemaakt. Kunnen jullie dit met mij delen?

Bijgevoegd een voorbeeld van hoe de pagina eruit komt te zien.

Thx

blackeagle67 · 7 mrt 2011

Ik ben verder gekomen.

Plak dit in een php document en t werkt =P:

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function resizable()
		{
			var leftWidth = $( "#left" ).width() - 4;
			var minHeight = 75;
			var maxHeight = 760;
		
			$( "#klaarzetten #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					//Bereken de toe-/afgenomen hoogte (negatief kleiner / positief groter)
					var vertical = ui.size.height - ui.originalSize.height;
					
					//als vertical is positief
						if (vertical > 0) {
							var klaarzetten = $( "#klaarzetten" );
							var onderweg = klaarzetten.next().next();
							var newheight = 0;
							if(klaarzetten != null) {
								newheight = maxHeight - (onderweg.height() + klaarzetten.height());
								if(newheight < 75) {
									$( "#reserveren #resizable" ).css("height", 75);
								} else {
									$( "#reserveren #resizable" ).css("height", newheight);
								}
							}
						} else if (vertical < 0) { //als vertical is negatief
							var reserveren = $( "#klaarzetten" ).next();
							var onderweg = reserveren.next();
							var newheight = 0;
							if(reserveren != null) {
								newheight = maxHeight - onderweg.height() - $( "#klaarzetten" ).height();
								if(newheight < 75) {
									$( "#reserveren #resizable" ).css("height", 75);
								} else {
									$( "#reserveren #resizable" ).css("height", newheight);
								}
							}
						}

					/*if (delta_x > 0) {
						dir += 'e';
					} else if (delta_x < 0) {
						dir += 'w';
					}*/

					// do something with this string
					//alert(next.height());
				}
			});
			$( "#reserveren #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var reserveren = $( "#reserveren" );
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - ($( "#klaarzetten" ).height() + reserveren.height());
								if(newheight < 75) {
									$( "#onderweg #resizable" ).css("height", 75);
								} else {
									$( "#onderweg #resizable" ).css("height", newheight);
								}
						}
					} else if (vertical < 0) {
						var reserveren = $( "#klaarzetten" ).next();
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - $( "#klaarzetten" ).height() - reserveren.height();
							if(newheight < 75) {
								$( "#onderweg #resizable" ).css("height", 75);
							} else {
								$( "#onderweg #resizable" ).css("height", newheight);
							}
						}
					}
				}
			});
			$( "#openstaande_orderregels #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - openstaande_orderregels.height() + 2;
								if(newheight < 75) {
									$( "#in_behandeling #resizable" ).css("height", 75);
								} else {
									$( "#in_behandeling #resizable" ).css("height", newheight);
								}
						}
					} else if (vertical < 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - openstaande_orderregels.height() + 2;
							if(newheight < 75) {
								$( "#in_behandeling #resizable" ).css("height", 75);
							} else {
								$( "#in_behandeling #resizable" ).css("height", newheight);
							}
						}
					}
				}
			});
			$( "#left" ).resizable({
				handles : "e",
				minWidth: 100,
				minHeight: minHeight,
				alsoResize: '#klaarzetten #resizable,#reserveren #resizable,#onderweg #resizable',
				resize: function(event, ui) {
					var horizontal = ui.size.width - ui.originalSize.width;

					if (horizontal > 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 110) {
								$( "#right" ).css("width", 110);
							} else {
								$( "#right" ).css("width", newwidth);
							}
						}
					} else if (horizontal < 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 110) {
								$( "#right" ).css("width", 110);
							} else {
								$( "#right" ).css("width", newwidth);
							}
						}
					}
				}
			});
		}
		
		$(document).ready(function() {
			resizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0 auto;
		}
		h3,
		h4 {
			margin: 0px 0px 0px 0px;
			font-weight: normal;
		}
		h3 {
			padding: 5px 0px;
			text-align: center;
			font-size:1.0em;
			margin: 0.5em;
		}
		#klaarzetten #resizable, #reserveren #resizable, #onderweg #resizable {
			width:100%;
			height:252px;
			margin:2px;
			overflow:hidden;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#openstaande_orderregels #resizable, #in_behandeling #resizable {
			height:380px;
			width:100%;
			margin:2px;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 1024*768 -->
		<div id="left" style="float:left;">
			<div id="klaarzetten">
				<div id="resizable" class="ui-widget-content ui-resizable ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
				</div>
			</div>
			<div id="reserveren">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
			<div id="onderweg">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
			<div id="in_behandeling">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
		</div>

	</body>
</html>

Ik zou het heel erg waarderen als jullie er ook eens naar keken en misschien nog wat suggesties hebben om ervoor te zorgen dat:

Als je een element resized ze niet over de hoogte van de body heen gaan.
Zelfde voor de breedte.
Verbeteringen in CSS. (ik ben er niet tevreden over en t lukt maar niet om t te verbetern.
Verbeteringen in code. Ik gebruik een dubbele identifier #... #... ik zou dit graag met een enkele doen.
*optioneel* wat flexibeler maken. denk aan 1 functie waaraan je alleen het id hoeft mee te geven.

Ondertussen pruts ik weer verder.

blackeagle67 · 8 mrt 2011

Weer wat verder.
Op zich doet hij t nou aardig maar nu wil ik de content in de div's aan de linkerkant laten scrollen als de div kleiner word dan de grootte van de content en de code is echt 1 stuk bagger. Kunnen jullie al iets vinden?

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function resizable()
		{
			var leftWidth = $( "#left" ).width() - 4;
			var minHeight = 70;
			var maxHeight = 760;
		
			$( "#klaarzetten #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					//Bereken de toe-/afgenomen hoogte (negatief kleiner / positief groter)
					var vertical = ui.size.height - ui.originalSize.height;
					
					//als vertical is positief
						if (vertical > 0) {
							var klaarzetten = $( "#klaarzetten" );
							var onderweg = klaarzetten.next().next();
							var newheight = 0;
							if(klaarzetten != null) {
								newheight = maxHeight - (onderweg.height() + klaarzetten.height());
								if(newheight < minHeight) {
									$( "#reserveren #resizable" ).css("height", minHeight);
								} else {
									$( "#reserveren #resizable" ).css("height", newheight);
								}
								
								var curheight = $( "#klaarzetten  #resizable" ).height() + $( "#reserveren  #resizable" ).height() + $( "#onderweg  #resizable" ).height();
								if(curheight >= maxHeight) { //controleer hoogtes deze mogen niet m zijn dan totale hoogte
									//alert(curheight);
									if($( "#onderweg #resizable" ).height() < minHeight) {
										$( "#onderweg #resizable" ).css("height", minHeight);
									} else {
										$( "#onderweg #resizable" ).css("height", maxHeight - $( "#klaarzetten #resizable" ).height() - $( "#reserveren #resizable" ).height() - 4);
									}
									
									if($( "#reserveren #resizable" ).height() < minHeight) {
										$( "#reserveren #resizable" ).css("height", minHeight);
										if($( "#onderweg #resizable" ).height() < minHeight) {
											$( "#onderweg #resizable" ).css("height", minHeight);
										} else {
											$( "#onderweg #resizable" ).css("height", maxHeight - $( "#klaarzetten #resizable" ).height() - $( "#reserveren #resizable" ).height() - 4);
										}
									} else {
										$( "#reserveren #resizable" ).css("height", maxHeight - $( "#klaarzetten #resizable" ).height() - $( "#onderweg #resizable" ).height() - 4);
										if($( "#onderweg #resizable" ).height() < minHeight) {
											$( "#onderweg #resizable" ).css("height", minHeight);
										} else {
											$( "#onderweg #resizable" ).css("height", maxHeight - $( "#klaarzetten #resizable" ).height() - $( "#reserveren #resizable" ).height() - 4);
										}
									}
									$( "#klaarzetten #resizable" ).css("height", maxHeight - $( "#reserveren #resizable" ).height() - $( "#onderweg #resizable" ).height() - 4);
								}
								
							}
						} else if (vertical < 0) { //als vertical is negatief
							var reserveren = $( "#klaarzetten" ).next();
							var onderweg = reserveren.next();
							var newheight = 0;
							if(reserveren != null) {
								newheight = maxHeight - onderweg.height() - $( "#klaarzetten" ).height();
								if(newheight < minHeight) {
									$( "#reserveren #resizable" ).css("height", minHeight);
								} else {
									$( "#reserveren #resizable" ).css("height", newheight);
								}
							}
						}

					/*if (delta_x > 0) {
						dir += 'e';
					} else if (delta_x < 0) {
						dir += 'w';
					}*/

					// do something with this string
					//alert(next.height());
				}
			});
			$( "#reserveren #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var reserveren = $( "#reserveren" );
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - ($( "#klaarzetten" ).height() + reserveren.height());
							if(newheight < minHeight) {
								$( "#onderweg #resizable" ).css("height", minHeight);
								
								var curheight = $( "#klaarzetten  #resizable" ).height() + $( "#reserveren  #resizable" ).height() + $( "#onderweg  #resizable" ).height();
								
								if(curheight > maxHeight) { //controleer hoogtes deze mogen niet minder zijn dan totale hoogte
									//alert();
									$( "#onderweg #resizable" ).css("height", minHeight);
									
									$( "#reserveren #resizable" ).css("height", maxHeight - $( "#klaarzetten #resizable" ).height() - $( "#onderweg #resizable" ).height() - 4);
									$( "#klaarzetten #resizable" ).css("height", maxHeight - $( "#reserveren #resizable" ).height() - $( "#onderweg #resizable" ).height() - 4);
								}
								
							} else {
								$( "#onderweg #resizable" ).css("height", newheight);
							}
						}
					} else if (vertical < 0) {
						var reserveren = $( "#klaarzetten" ).next();
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - $( "#klaarzetten" ).height() - reserveren.height();
							if(newheight < minHeight) {
								$( "#onderweg #resizable" ).css("height", minHeight);
							} else {
								$( "#onderweg #resizable" ).css("height", newheight);
							}
						}
					}
				}
			});
			$( "#openstaande_orderregels #resizable" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(openstaande_orderregels != null) {
							newheight = maxHeight - openstaande_orderregels.height();
								if(newheight < minHeight) {
									$( "#in_behandeling #resizable" ).css("height", minHeight);
									$( "#openstaande_orderregels #resizable" ).css("height", maxHeight-minHeight);
								} else {
									$( "#in_behandeling #resizable" ).css("height", newheight+2);
								}
						}
					} else if (vertical < 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(openstaande_orderregels != null) {
							newheight = maxHeight - openstaande_orderregels.height() + 2;
							if(newheight < minHeight) {
								$( "#in_behandeling #resizable" ).css("height", minHeight);
							} else {
								$( "#in_behandeling #resizable" ).css("height", newheight);
							}
						}
					}
					$( "#openstaande_orderregels #resizable" ).css("width", "100%");
				}
			});
			$( "#left" ).resizable({
				handles : "e",
				minWidth: 100,
				minHeight: minHeight,
				alsoResize: '#klaarzetten #resizable,#reserveren #resizable,#onderweg #resizable',
				resize: function(event, ui) {
					var horizontal = ui.size.width - ui.originalSize.width;

					if (horizontal > 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 100) {
								$( "#right" ).css("width", 100);
								$( "#left" ).css("width", 860);
								$( "#klaarzetten #resizable" ).css("width", 856);
								$( "#reserveren #resizable" ).css("width", 856);
								$( "#onderweg #resizable" ).css("width", 856);
							} else {
								$( "#right" ).css("width", newwidth);
								$( "#left" ).css("width", 960-newwidth-4);
								$( "#klaarzetten #resizable" ).css("width", 956-newwidth);
								$( "#reserveren #resizable" ).css("width", 956-newwidth);
								$( "#onderweg #resizable" ).css("width", 956-newwidth);
							}
						}
					} else if (horizontal < 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 100) {
								$( "#right" ).css("width", 100);
							} else {
								$( "#right" ).css("width", newwidth);
							}
							//alert(links.width());
							//alert(rechts.width());
						}
					}
				}
			});
		}
		
		$(document).ready(function() {
			resizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0px auto;
		}
		h3,
		h4 {
			margin: 0px;
			font-weight: normal;
		}
		h3 {
			padding:5px 0px;
			text-align:center;
			font-size:1.0em;
			margin:0.5em;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#klaarzetten #resizable, #reserveren #resizable, #onderweg #resizable {
			width:100%;
			height:252px;
			margin:2px;
			position:relative;
			overflow:hidden;
		}
		#openstaande_orderregels #resizable, #in_behandeling #resizable {
			height:380px;
			width:100%;
			margin:2px;
			position:relative;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
		<div id="left" style="float:left;">
			<div id="klaarzetten">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
					<div style="margin: 0.5em;">
					<div style="overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
					</div>
					</div>
				</div>
			</div>
			<div id="reserveren">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
			<div id="onderweg">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
			<div id="in_behandeling">
				<div id="resizable" class="ui-widget-content ui-corner-all">
					<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
					<div style="margin: 0.5em;">test</div>
				</div>
			</div>
		</div>

	</body>
</html>

blackeagle67 · 8 mrt 2011

niemand weet wat?
Ik zou heel graag een mooie javascript functie hebben die alle elementen detecteerd met bijvoorbeeld een bepaalde class en automatisch dan alle elementen de resize toewijst.

Heeft niemand al eens eerder de resizable + jquery UI gebruikt om de pagina te resizen?
Het is voor mijn project en de klant wil graag een resizable pagina hebben. Ik doe daarom wat onderzoek maar als ik dit voor mekaar heb hoef ik me geen zorgen meer te maken om de UI.

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function resizable()
		{
			var leftWidth = $( "#left" ).width() - 4;
			var minHeight = 70;
			var maxHeight = 756;
		
			$( "#klaarzetten" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					//Bereken de toe-/afgenomen hoogte (negatief kleiner / positief groter)
					var vertical = ui.size.height - ui.originalSize.height;
					
					//als vertical is positief
						if (vertical > 0) {
							var klaarzetten = $( "#klaarzetten" );
							var onderweg = klaarzetten.next().next();
							var newheight = 0;
							if(klaarzetten != null) {
								newheight = maxHeight - (onderweg.height() + klaarzetten.height());
								if(newheight < minHeight) {
									$( "#reserveren" ).css("height", minHeight);
								} else {
									$( "#reserveren" ).css("height", newheight);
								}
								
								var curheight = $( "#klaarzetten" ).height() + $( "#reserveren" ).height() + $( "#onderweg" ).height();
								if(curheight >= maxHeight) { //controleer hoogtes deze mogen niet m zijn dan totale hoogte
									//alert(curheight);
									if($( "#onderweg" ).height() < minHeight) {
										$( "#onderweg" ).css("height", minHeight);
									} else {
										$( "#onderweg" ).css("height", maxHeight - $( "#klaarzetten" ).height() - $( "#reserveren" ).height());
									}
									
									if($( "#reserveren" ).height() < minHeight) {
										$( "#reserveren" ).css("height", minHeight);
										if($( "#onderweg" ).height() < minHeight) {
											$( "#onderweg" ).css("height", minHeight);
										} else {
											$( "#onderweg" ).css("height", maxHeight - $( "#klaarzetten" ).height() - $( "#reserveren" ).height());
										}
									} else {
										$( "#reserveren" ).css("height", maxHeight - $( "#klaarzetten" ).height() - $( "#onderweg" ).height());
										if($( "#onderweg" ).height() < minHeight) {
											$( "#onderweg" ).css("height", minHeight);
										} else {
											$( "#onderweg" ).css("height", maxHeight - $( "#klaarzetten" ).height() - $( "#reserveren" ).height());
										}
									}
									$( "#klaarzetten" ).css("height", maxHeight - $( "#reserveren" ).height() - $( "#onderweg" ).height());
								}
								
							}
						} else if (vertical < 0) { //als vertical is negatief
							var reserveren = $( "#klaarzetten" ).next();
							var onderweg = reserveren.next();
							var newheight = 0;
							if(reserveren != null) {
								newheight = maxHeight - onderweg.height() - $( "#klaarzetten" ).height();
								if(newheight < minHeight) {
									$( "#reserveren" ).css("height", minHeight);
								} else {
									$( "#reserveren" ).css("height", newheight);
								}
							}
						}

					/*if (delta_x > 0) {
						dir += 'e';
					} else if (delta_x < 0) {
						dir += 'w';
					}*/

					// do something with this string
					//alert(next.height());
				}
			});
			$( "#reserveren" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var reserveren = $( "#reserveren" );
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - ($( "#klaarzetten" ).height() + reserveren.height());
							if(newheight < minHeight) {
								$( "#onderweg" ).css("height", minHeight);
								
								var curheight = $( "#klaarzetten " ).height() + $( "#reserveren " ).height() + $( "#onderweg " ).height();
								
								if(curheight > maxHeight) { //controleer hoogtes deze mogen niet minder zijn dan totale hoogte
									//alert();
									$( "#onderweg" ).css("height", minHeight);
									
									$( "#reserveren" ).css("height", maxHeight - $( "#klaarzetten" ).height() - $( "#onderweg" ).height());
									$( "#klaarzetten" ).css("height", maxHeight - $( "#reserveren" ).height() - $( "#onderweg" ).height());
								}
								
							} else {
								$( "#onderweg" ).css("height", newheight);
							}
						}
					} else if (vertical < 0) {
						var reserveren = $( "#klaarzetten" ).next();
						var onderweg = reserveren.next();
						var newheight = 0;
						if(reserveren != null) {
							newheight = maxHeight - $( "#klaarzetten" ).height() - reserveren.height();
							if(newheight < minHeight) {
								$( "#onderweg" ).css("height", minHeight);
							} else {
								$( "#onderweg" ).css("height", newheight);
							}
						}
					}
				}
			});
			$( "#openstaande_orderregels" ).resizable({
				handles : "s",
				maxWidth: leftWidth,
				minWidth: 100,
				minHeight: minHeight,
				resize: function(event, ui) {
					var vertical = ui.size.height - ui.originalSize.height;

					if (vertical > 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(openstaande_orderregels != null) {
							newheight = maxHeight - openstaande_orderregels.height();
								if(newheight < minHeight) {
									$( "#in_behandeling" ).css("height", minHeight);
									$( "#openstaande_orderregels" ).css("height", maxHeight-minHeight+4);
								} else {
									$( "#in_behandeling" ).css("height", newheight+4);
								}
						}
					} else if (vertical < 0) {
						var openstaande_orderregels = $( "#openstaande_orderregels" );
						var newheight = 0;
						if(openstaande_orderregels != null) {
							newheight = maxHeight - openstaande_orderregels.height()+4;
							if(newheight < minHeight) {
								$( "#in_behandeling" ).css("height", minHeight);
							} else {
								$( "#in_behandeling" ).css("height", newheight);
							}
						}
					}
					$( "#openstaande_orderregels" ).css("width", "100%");
				}
			});
			$( "#left" ).resizable({
				handles : "e",
				minWidth: 100,
				minHeight: minHeight,
				alsoResize: '#klaarzetten,#reserveren,#onderweg',
				resize: function(event, ui) {
					var horizontal = ui.size.width - ui.originalSize.width;

					if (horizontal > 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 100) {
								$( "#right" ).css("width", 100);
								$( "#left" ).css("width", 860);
								$( "#klaarzetten" ).css("width", 856);
								$( "#reserveren" ).css("width", 856);
								$( "#onderweg" ).css("width", 856);
							} else {
								$( "#right" ).css("width", newwidth);
								$( "#left" ).css("width", 960-newwidth-4);
								$( "#klaarzetten" ).css("width", 956-newwidth);
								$( "#reserveren" ).css("width", 956-newwidth);
								$( "#onderweg" ).css("width", 956-newwidth);
							}
						}
					} else if (horizontal < 0) {
						var links = $( "#left" );
						var rechts = links.next();
						var newwidth = 0;
						if(rechts != null) {
							newwidth = 960 - links.width() - 4;
							if(newwidth < 100) {
								$( "#right" ).css("width", 100);
							} else {
								$( "#right" ).css("width", newwidth);
							}
							//alert(links.width());
							//alert(rechts.width());
						}
					}
				}
			});
		}
		
		$(document).ready(function() {
			resizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0px auto;
		}
		h3,
		h4 {
			margin: 0px;
			font-weight: normal;
		}
		h3 {
			padding:5px 0px;
			text-align:center;
			font-size:1.0em;
			margin:0.5em;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#klaarzetten, #reserveren, #onderweg {
			width:100%;
			height:252px;
			margin:2px;
			position:relative;
			overflow:hidden;
		}
		#openstaande_orderregels, #in_behandeling {
			height:380px;
			width:100%;
			margin:2px;
			position:relative;
			overflow:hidden;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
		<div id="left" style="float:left;">
			<div id="klaarzetten" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
				<div style="margin: 0.5em;height:100%;overflow:auto;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
				</div>
			</div>
			<div id="reserveren" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
				<div style="margin: 0.5em;height:100%;">test</div>
			</div>
			<div id="onderweg" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
				<div style="margin: 0.5em;height:100%;">test</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="in_behandeling" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>

	</body>
</html>
[CODE]

blackeagle67 · 9 mrt 2011

Stukje dynamiek toegevoegd. Nu alleen nog de hoogtes kunnen bepalen en we zijn klaar =P. Heb alleen nog moeite met het bepalen van het aantal elementen in de div waarmee ik rekening moet houden.

Code:

function maakResizable() {
			var minimaleHoogte = 70;
			var maximaleHoogte = 760;
			var minimaleBreedte = 100;
			var maximaleBreedte = $('#left').width() - 4; //- 4 vanwege de margins
		
			$("div.resizable").each(function() {
				$("div.resizable").resizable({
					handles : "s",
					maxWidth: maximaleBreedte,
					minWidth: minimaleBreedte,
					minHeight: minimaleHoogte,
					resize: function(event, ui) {
						var vertical = ui.size.height - ui.originalSize.height;
						//var horizontal = ui.size.width - ui.originalSize.width;
						
						//als vertical is positief
						if (vertical > 0) { //de div word groter in de hoogte dan voorheen
							
						} else if(vertical < 0) { //de div word kleiner in de hoogte dan voorheen
							
						}
						
						/*if( $("div.resizable").parent() != $("#left") ||  $("div.resizable").parent() != $("#right")) { //we willen niet dat de elementen in de linker of rechter div naar rechts kunnen resizen
							if(horizontal > 0) { //de div word breder dan voorheen
								
							} else if(horizontal > 0) { 
								
							}
						}*/
					}
				});
			});
		}

blackeagle67 · 9 mrt 2011

Zo dat scheelt een heel stuk.
Kunnen jullie mij nog helpen om de code zo te herschrijven dat hij vanzelf het aantal aangelegen elementen vind en hiermee een hoogte berekend?
Dus je hebt 5 divs
je resized de middelste.
Nu moet berekend worden welke hoogte de div nu moet hebben.
Nu pakt hij alleen nog maar de volgende en vorige div. Hij moet ze in principe allemaal kunnen vinden.
Kunnen jullie mij helpen hoe javascript dit automatisch zou kunnen doen? Dat ik alleen maar een resize class op de elementen hoef te zetten.

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function maakResizable() { //OO = omhoog omlaag
			var minimaleHoogte = 70;
			var maximaleHoogte = 760;
			var minimaleBreedte = 100;
			var maximaleBreedte = $('#left').width(); //- 4 vanwege de margins
		
			$("div.resizable").each(function() {
				function berekenHoogtes(div) 
				{
					if(div.next() != null) { //controleer of er een volgende div bestaat in de reeks div's
						
						if(div.prev().height() != null) {
							var nieuweHoogte = maximaleHoogte - (div.height() + div.prev().height()); //bereken hoogte volgende div
						} else {
							var nieuweHoogte = maximaleHoogte - div.height(); //bereken hoogte volgende div
						}
						if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
							div.next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
							if(div.prev().height() != null) {
								div.css("height", maximaleHoogte - (nieuweHoogte + div.prev().height()));
							} else {
								div.css("height", maximaleHoogte - nieuweHoogte);
							}
						} else {
							div.next().css("height", minimaleHoogte); //hoogte is minimale hoogte
							if(div.prev().height() != null) {
								div.css("height", maximaleHoogte - (minimaleHoogte + div.prev().height()));
							} else {
								div.css("height", maximaleHoogte - minimaleHoogte);
							}
						}
					}
						
					if(div.next().next().height() != null) { //controleer of er een 3e div in de reeks staat
							var nieuweHoogte = maximaleHoogte - (div.height() + div.next().next().height()); //bereken hoogte volgende div
							if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
								div.next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
								div.css("height", maximaleHoogte - (nieuweHoogte + div.next().next().height()));
							} else {
								div.next().css("height", minimaleHoogte); //hoogte is minimale hoogte
								div.css("height",maximaleHoogte - (minimaleHoogte + div.next().next().height()));
							}
					}
				}
					$(this).resizable({
						handles : "s",
						maxWidth: maximaleBreedte,
						minWidth: minimaleBreedte,
						minHeight: minimaleHoogte,
						resize: function(event, ui) {
							var vertical = ui.size.height - ui.originalSize.height;
							//var horizontal = ui.size.width - ui.originalSize.width;
							
							//als vertical is positief
							if (vertical > 0) { //de div word hoger
								berekenHoogtes($(this));
							} else if(vertical < 0) { //de div word kleiner
								berekenHoogtes($(this));
							}
							
							/*if( $("div.resizable").parent() != $("#left") ||  $("div.resizable").parent() != $("#right")) { //we willen niet dat de elementen in de linker of rechter div naar rechts kunnen resizen
								if(horizontal > 0) { //de div word breder dan voorheen
									
								} else if(horizontal > 0) { 
									
								}
							}*/
						}
					});
			});
		}
		
		$(document).ready(function() {
			maakResizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0px auto;
		}
		h3,
		h4 {
			margin: 0px;
			font-weight: normal;
		}
		h3 {
			padding:5px 0px;
			text-align:center;
			font-size:1.0em;
			margin:0.5em;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#klaarzetten, #reserveren, #onderweg {
			width:100%;
			height:252px;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		#openstaande_orderregels, #in_behandeling {
			height:380px;
			width:100%;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
		<div id="left" style="float:left;">
			<div id="klaarzetten" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
				<div style="margin: 0.5em;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
				</div>
			</div>
			<div id="reserveren" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="onderweg" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="in_behandeling" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>

	</body>
</html>

blackeagle67 · 14 mrt 2011

Kan iemand mij dan helpen?
Ik krijg de div links onder niet goed.
Weet niemand hier iets van?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function maakResizable() {
			var minimaleHoogte = 70;
			var maximaleHoogte = 760;
			var minimaleBreedte = 100;
			var maximaleBreedte = 960;
			
			//alert($("div.resizable").size()); //detecteerd 4 .resizable divs
			
			$("div.resizable").each(function() {
				var id = $(this).attr('id');
				var text = "#" + id;
				var aantal = $(text + " > .resizable").size();
				var handle = '';
				if(aantal > 1) {
					handle = 'e';
				} else {
					handle = 's';
				}
			
				$(this).resizable({
					handles : handle,
					maxWidth: maximaleBreedte,
					minWidth: minimaleBreedte,
					minHeight: minimaleHoogte,
					resize: function(event, ui) {
						var vertical = ui.size.height - ui.originalSize.height;
						var horizontal = ui.size.width - ui.originalSize.width;
						
						var id = $(this).parent().attr('id');
						var text = "#" + id;
						var aantal = $(text + " > .resizable").size();
						var marges = 0;
						if(aantal > 1) {
							marges = aantal * 2;
						} else {
							marges = 0;
						}
					
						var minimaleHoogte = 70;
						var maximaleHoogte = 760 - marges;
						
						if(vertical > 0 || vertical < 0) {
							if($(this).next().next().height() != null) { //controleer of er een 3e $(this) in de reeks staat
								if($(this).next().next().attr('class:contains(ui-resizable-handle)') == undefined) {
									var hoogte = $(this).next().next();
									var nieuweHoogte = 0;
									if(hoogte.attr('class') == 'ui-resizable-handle') {
										nieuweHoogte = maximaleHoogte - $(this).height();
									} else {
										nieuweHoogte = maximaleHoogte - ($(this).height() + hoogte.height());
									}
									
									var nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).next().next().height()); //bereken hoogte volgende $(this)
									if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
										$(this).next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
										$(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).next().next().height()));
									} else {
										$(this).next().css("height", minimaleHoogte); //hoogte is minimale hoogte
										$(this).css("height",maximaleHoogte - (minimaleHoogte + $(this).next().next().height()));
									}
									//alert($(this).next().next().attr('class'));
								}
								//alert($(this).next().next().attr('class'));// <- pakt de resize div binnen de parent div
							} else if($(this).next().height() != null) { //controleer of er een volgende $(this) bestaat in de reeks $(this)'s
								hoogte = $(this).next();
								if(hoogte.attr("class:contains(ui-resizable-handle)") == null) {
									if($(this).prev().height() != null) {
										var nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).prev().height()); //bereken hoogte volgende $(this)
									} else {
										var nieuweHoogte = maximaleHoogte - $(this).height(); //bereken hoogte volgende $(this)
									}
									
									if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
										$(this).next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
										if($(this).prev().height() != null) {
											$(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).prev().height()));
										} else {
											$(this).css("height", maximaleHoogte - nieuweHoogte);
										}
									} else {
										$(this).next().css("height", minimaleHoogte); //hoogte is minimale hoogte
										if($(this).prev().height() != null) {
											$(this).css("height", maximaleHoogte - (minimaleHoogte + $(this).prev().height()));
										} else {
											$(this).css("height", maximaleHoogte - minimaleHoogte);
										}
									}
								}
							}
						}
					}
				});
			});
		}
		
		$(document).ready(function() {
			maakResizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0px auto;
		}
		h3,
		h4 {
			margin: 0px;
			font-weight: normal;
		}
		h3 {
			padding:5px 0px;
			text-align:center;
			font-size:1.0em;
			margin:0.5em;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#klaarzetten, #reserveren, #onderweg {
			width:100%;
			height:252px;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		#openstaande_orderregels, #in_behandeling {
			height:380px;
			width:100%;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
		<div id="left" class="resizable" style="float:left;">
			<div id="klaarzetten" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
				<div style="margin: 0.5em;z-index:-1;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
				</div>
			</div>
			<div id="reserveren" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="onderweg" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="in_behandeling" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>

	</body>
</html>

blackeagle67 · 15 mrt 2011

Update:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery UI Resize Elementen</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
		<script>
		;(function($) {
		
		function maakResizable() {
			var minimaleHoogte = 70;
			var maximaleHoogte = 760;
			var minimaleBreedte = 100;
			var maximaleBreedte = 960;
			
			//alert($("div.resizable").size()); //detecteerd 4 .resizable divs
			
			$("div.resizable").each(function() {
				var id = $(this).attr('id');
				var text = "#" + id;
				var aantal = $(text + " > .resizable").size();
				var handle = '';
				if(aantal > 1) {
					handle = 'e';
				} else {
					handle = 's';
				}
			
				$(this).resizable({
					handles : handle,
					maxWidth: maximaleBreedte,
					minWidth: minimaleBreedte,
					minHeight: minimaleHoogte,
					resize: function(event, ui) {
						var vertical = ui.size.height - ui.originalSize.height;
						var horizontal = ui.size.width - ui.originalSize.width;
						
						var id = $(this).parent().attr('id');
						if(id == 'left' || id == 'right') {
							var aantal = $("#" + id + " > .resizable").size();
							var marges = 0;
							if(aantal > 1) {
								marges = aantal * 2;
							} else {
								marges = 0;
							}
						}
					
						var minimaleHoogte = 70;
						var maximaleHoogte = 760 - marges;
						var nieuweHoogte = 0;
						var nieuweBreedte = 0;
						var maximaleBreedte = 956;
						var minimaleBreedte = 100;
						
						if(horizontal > 0 || horizontal < 0) {
							if($(this).next().width() != null) { //hiermee ga ik ervan uit dat er 2 div's zijn en ik wil controleren of de volgende div ipv links wel bestaat
								nieuweBreedte = maximaleBreedte - $(this).width(); //bereken breedte van volgende div
								
								if(nieuweBreedte > minimaleBreedte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
									$(this).next().css("width", nieuweBreedte); //hoogte is nieuwe hoogte
									$(this).css("width", maximaleBreedte - nieuweBreedte); //pas breedte nogmaals toe voor het geval de breedte weer eens vreemd doet
									$(this).children().each(function() { //loop door child elementen heen van huidige div
										if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of de child geen handle is
											$(this).css("width", maximaleBreedte - nieuweBreedte); //pas breedte toe
										}
									});
									$(this).next().children().each(function() { //loop door child elementen van volgende div
										if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of de child geen handle is
											$(this).css("width", nieuweBreedte); //pas breedte toe
										}
									});
								} else {
									$(this).next().css("width", minimaleBreedte); //hoogte is minimale hoogte
									$(this).css("width", maximaleBreedte - minimaleBreedte); //pas breedte nogmaals toe voor het geval de breedte weer eens vreemd doet
									$(this).next().children().each(function() {
										if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') {
											$(this).css("width", minimaleBreedte);
										}
									});
									$(this).children().each(function() {
										if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') {
											$(this).css("width", maximaleBreedte - minimaleBreedte);
										}
									});
								}
							}
						} else if(vertical > 0 || vertical < 0) {
							if($(this).next().next().height() != null && $(this).next().next().attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of er een 3e $(this) in de reeks staat
								nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).next().next().height());
								
								if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
									$(this).next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
									$(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).next().next().height()));
								} else {
									$(this).next().css("height", minimaleHoogte); //hoogte is minimale hoogte
									$(this).css("height",maximaleHoogte - (minimaleHoogte + $(this).next().next().height()));
								}
							} else if($(this).next().height() != null) { //controleer of er een volgende $(this) bestaat in de reeks $(this)'s
								if($(this).prev().height() != null) {
									nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).prev().height()); //bereken hoogte volgende $(this)
								} else {
									nieuweHoogte = maximaleHoogte - $(this).height(); //bereken hoogte volgende $(this)
								}
								
								if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
									$(this).next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
									if($(this).prev().height() != null) {
										$(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).prev().height()));
									} else {
										$(this).css("height", maximaleHoogte - nieuweHoogte);
									}
								} else {
									$(this).next().css("height", minimaleHoogte); //hoogte is minimale hoogte
									if($(this).prev().height() != null) {
										$(this).css("height", maximaleHoogte - (minimaleHoogte + $(this).prev().height()));
									} else {
										$(this).css("height", maximaleHoogte - minimaleHoogte);
									}
								}
							}
						}
					}
				});
			});
		}
		
		$(document).ready(function() {
			maakResizable();
		});
		
		})(jQuery);
		</script>
		<style type="text/css">
		body {
			width:960px;
			height:768px;
			margin:0px auto;
		}
		h3,
		h4 {
			margin: 0px;
			font-weight: normal;
		}
		h3 {
			padding:5px 0px;
			text-align:center;
			font-size:1.0em;
			margin:0.5em;
		}
		#left {
			width:348px;
		}
		#right {
			width:608px;
		}
		#klaarzetten, #reserveren, #onderweg {
			width:100%;
			height:252px;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		#openstaande_orderregels, #in_behandeling {
			height:380px;
			width:100%;
			margin:2px 0px 0px 0px;
			position:relative;
			overflow:hidden;
		}
		</style>
	</head>
	<body>
	
	<!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
		<div id="left" class="resizable" style="float:left;">
			<div id="klaarzetten" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
				<div style="margin: 0.5em;z-index:-1;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris dui, dapibus non volutpat vitae, imperdiet ut lacus. Proin tincidunt massa eu turpis accumsan vehicula. Sed fermentum ipsum vitae dolor elementum ultricies. Pellentesque id viverra nulla. Suspendisse potenti. Cras non ante justo. Curabitur rutrum, ante id gravida eleifend, quam eros elementum nibh, eget condimentum erat nunc eget est. Nunc quis pulvinar libero. Vestibulum non urna eu diam ultricies feugiat. Pellentesque ullamcorper pulvinar arcu posuere tincidunt. Sed viverra euismod urna, at ultricies erat dictum eget.
				</div>
			</div>
			<div id="reserveren" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="onderweg" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>
		<div id="right" style="float:right;">
			<div id="openstaande_orderregels" class="ui-widget-content ui-corner-all resizable">
				<h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
			<div id="in_behandeling" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
				<div style="margin: 0.5em;">test</div>
			</div>
		</div>

	</body>
</html>

Weet iemand iets om subelementen van mijn left en right div te vinden en mee te nemen in de berekening van de hoogte van een div.

Jquery UI en resizable plugin -> resize meerdere elementen tegelijk

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy