jQuery Resizable -> automatically find all elements for resizing and resize all elements properly

jQuery Resizable -> automatically find all elements for resizing and resize all elements properly

Hi guys,

I have a few issues. Im currently trying to make a resizable page.
I think this code is almost done, but there are just a few things I'd like to have in this page and I've had some trouble realizing them.

* edited * resizing works fine now

Secondly. I'm still not happy about the detection of all elements. 2 much is still hardcoded. Getting elements by the ID. I'd like to make it more dynamic. So if you guys have anything to automatically detect the elements around the element that you are currently resizing, that would be great =P.

Below is the code.

I hope you guys can help me out.


(Code variables are dutch!!!!)

CSS
  2. body {
  3. width:960px;
  4. height:768px;
  5. margin:0px auto;
  6. }
  7. h3,
  8. h4 {
  9. margin: 0px;
  10. font-weight: normal;
  11. }
  12. h3 {
  13. padding:5px 0px;
  14. text-align:center;
  15. font-size:1.0em;
  16. margin:0.5em;
  17. }
  18. #left {
  19. float:left;
  20. width:348px;
  21. }
  22. #right {
  23. float:right;
  24. width:608px;
  25. }
  26. #klaarzetten, #reserveren, #onderweg {
  27. width:100%;
  28. height:252px;
  29. margin:2px;
  30. position:relative;
  31. overflow:hidden;
  32. }
  33. #klaarzetten div, #reserveren div, #onderweg div, #openstaande_orderregels div, #in_behandeling div {
  34. margin: 8px 8px 8px 8px;
  35. overflow:auto;
  36. }
  37. #openstaande_orderregels, #in_behandeling {
  38. height:380px;
  39. width:100%;
  40. margin:2px;
  41. position:relative;
  42. overflow:hidden;
  43. }
JS
  2. /**
  3. Als er elementen worden toegevoegd op de pagina.
  4. Dan heel eenvoudig een extra .next() of .prev() controle toevoegen waar nodig.
  5. Plus eventueel de controle van de marges.
  6. **/

  8. function maakResizable() { //in functie gezet om t plaatsen in de document ready eenvoudig/overzichtelijk te maken
  9. var minimaleHoogte = 70; //minimale hoogte van divs
  10. var maximaleHoogte = 760; //maximale hoogte van divs
  11. var minimaleBreedte = 100; //minimale breedte van divs
  12. var maximaleBreedte = 960; //maximale breedte van divs
  13. //alert($("div.resizable").size()); //detecteerd aantal .resizable divs
  15. $("div.resizable").each(function() { //voor elk element met resizable class
  16. var aantal = $("#" + $(this).attr('id') + " > .resizable").size(); //vanwege handles het aantal child elementen tellen
  17. var handle = ''; //var handle aanmaken voor het slepen (waarmee je sleept, dat heet een "handle")
  18. if(aantal > 1) { //als het aantal groter is dan 1 dan hebben we te maken met het element aan de linker kant vanwege de 3 divs aan die kant
  19. handle = 'e'; //handle aan de east (rechterkant)
  20. } else {
  21. handle = 's'; //handle aan de south (onderkant)
  22. }
  24. $(this).resizable({ //maak de div resizable
  25. handles : handle, //plaats handle
  26. maxWidth: maximaleBreedte, //geef max breedte aan
  27. minWidth: minimaleBreedte, //geef min breedte aan
  28. minHeight: minimaleHoogte, //geef min hoogte aan
  29. resize: function(event, ui) { //als je de div resized voer deze functie uit
  30. var vertical = ui.size.height - ui.originalSize.height; //momentele hoogte min hoogte voorheen bepaald of de div hoger of lager is geworden
  31. var horizontal = ui.size.width - ui.originalSize.width; //momentele breedte min breedte voorheen bepaald of de div breder of smaller is geworden
  33. var id = $(this).parent().attr('id'); //het id van de parent ophalen voor de marges
  34. if(id == 'left' || id == 'right') { //het id controleren om fouten te voorkomen
  35. var aantal = $("#" + id + " > .resizable").size(); //haal het aantal div's met de class resizable op
  36. var marges = 0; //maak variabele marges aan
  37. if(aantal > 1) { //als het aantal groter is dan 1 hebben we te maken met de linkerkant van de pagina
  38. marges = aantal * 2; //marges is het aantal keer 2 vanwege margin:2px;
  39. } else {
  40. marges = 0; //marges is nul
  41. }
  42. }
  44. var maximaleHoogte = 760 - marges; //maximaleHoogte bestaat niet dus opnieuw aanmaken en meteen min marges
  45. var nieuweHoogte = 0; //maak var nieuweHoogte aan
  46. var nieuweBreedte = 0; //maak var nieuweBreedte aan
  47. var maximaleBreedte = 956; //maximaleBreedte opnieuw aangeven - 4 vanwege marges van divs
  48. var minimaleBreedte = 100; //minimale breedte opnieuw aangeven
  50. if(horizontal > 0 || horizontal < 0) { //als de breedte groter of kleiner is geworden
  51. if($(this).next().width() != null) { //hiermee ga ik ervan uit dat er 2 div's zijn en ik wil controleren of de volgende div bestaat - left en right div
  52. nieuweBreedte = maximaleBreedte - $(this).width(); //bereken breedte van volgende div
  54. if(nieuweBreedte > minimaleBreedte) { //controleer of de nieuwe breedte niet kleiner is dan de minimale breedte
  55. $(this).next().css("width", nieuweBreedte); //de breedte van de volgende div is nieuwe breedte
  56. $(this).css("width", maximaleBreedte - nieuweBreedte - 2); //pas breedte nogmaals toe voor het geval de breedte weer eens vreemd doet
  57. $(this).children().each(function() { //loop door child elementen heen van huidige div zodat we deze kunnen meeresizen
  58. if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of het child element geen handle is
  59. $(this).css("width", maximaleBreedte - nieuweBreedte); //pas breedte toe op huidige div 
  60. } //elk element is een child van bijv. #left. De child elementen resizen dus mee
  61. });
  62. $(this).next().children().each(function() { //loop door child elementen van volgende div
  63. if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of de child geen handle is
  64. $(this).css("width", nieuweBreedte); //pas breedte toe op het volgende element
  65. }
  66. });
  67. } else {
  68. $(this).next().css("width", minimaleBreedte); //breedte is minimale breedte
  69. $(this).css("width", maximaleBreedte - minimaleBreedte); //pas breedte nogmaals toe voor het geval de breedte weer eens vreemd doet
  70. $(this).next().children().each(function() { //loop door child elementen van volgende div
  71. if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') { //als de class niet die van handle is
  72. $(this).css("width", minimaleBreedte); //pas breedte op volgende element toe
  73. }
  74. });
  75. $(this).children().each(function() {
  76. if($(this).attr('class') != 'ui-resizable-handle ui-resizable-e') {
  77. $(this).css("width", maximaleBreedte - minimaleBreedte);
  78. }
  79. });
  80. }
  81. }
  82. } else if(vertical > 0 || vertical < 0) { //Element word geresized in de hoogte
  83. if($(this).next().next().height() != null && 
  84. $(this).next().next().attr('class') != 'ui-resizable-handle ui-resizable-e') { //controleer of er een 3e $(this) in de reeks staat voor als er 3 elementen bestaan
  85. nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).next().next().height()); //nieuwe hoogte is de maximale hoogte - huidig element en omdat die bestaat ook een 3e element en berekent dus hoogte van de volgende div
  87. if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
  88. $(this).next().css("height", nieuweHoogte); //hoogte is nieuwe hoogte
  89. $(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).next().next().height())); //bereken hoogte huidig element
  90. } else {
  91. $(this).next().css("height", minimaleHoogte); //hoogte is minimale hoogte omdat de nieuwe hoogte anders kleiner is dan minimale hoogte
  92. $(this).css("height",maximaleHoogte - (minimaleHoogte + $(this).next().next().height())); //huidig element is max hoogte - minimale hoogte + 3e element hoogte
  93. }
  94. } else if($(this).next().height() != null) { //controleer of de volgende $(this) bestaat
  95. if($(this).prev().height() != null) { //controleer of er een vorige div bestaat
  96. nieuweHoogte = maximaleHoogte - ($(this).height() + $(this).prev().height()); //bereken hoogte van de volgende $(this)
  97. } else {
  98. nieuweHoogte = maximaleHoogte - $(this).height(); //volgende div hoogte is omdat er maar 2 divs zijn max hoogte min deze hoogte
  99. }
  101. if(nieuweHoogte > minimaleHoogte) { //controleer of de nieuwe hoogte niet kleiner is dan de minimale hoogte
  102. $(this).next().css("height", nieuweHoogte); //volgende element hoogte is nieuwe hoogte
  103. if($(this).prev().height() != null) { //controleer of .prev() element bestaat
  104. $(this).css("height", maximaleHoogte - (nieuweHoogte + $(this).prev().height())); //deze div hoogte is max hoogte - volgende div + vorige div
  105. } else {
  106. $(this).css("height", maximaleHoogte - nieuweHoogte); //als er geen vorige div is, is de hoogte maxhoogte - hoogte 
  107. }
  108. } else {
  109. $(this).next().css("height", minimaleHoogte); //volgende element hoogte is minimale hoogte
  110. if($(this).prev().height() != null) { //controleer of vorige div bestaat
  111. $(this).css("height", maximaleHoogte - (minimaleHoogte + $(this).prev().height())); //deze div hoogte is max - minimale hoogte(volgende div) - vorige div hoogte
  112. } else {
  113. $(this).css("height", maximaleHoogte - minimaleHoogte); //hoogte is als vorige div niet bestaat maxhoogte - minhoogte
  114. }
  115. }
  116. }
  117. }
  118. }
  119. });
  120. });
  121. }

HTML
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>jQuery UI Resize Elementen</title>
  7. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
  8. <link rel="stylesheet" href="test.css" type="text/css" media="all" />
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
  10. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
  11. <script src="test.js" type="text/javascript"></script>
  12. <script>
  13. ;(function($) { //beveiliging zodat zowel $ als jQuery nog beschikbaar is voor gebruik
  14. $(document).ready(function() {
  15. maakResizable(); //voer functie uit als document geladen is
  16. });
  17. })(jQuery); //beveiliging zodat zowel $ als jQuery nog beschikbaar is voor gebruik
  18. </script>
  19. </head>
  20. <body>
  22. <!-- verschillende elementen op de pagina / formaat aanhoudend van 960*768 -->
  23. <div id="left" class="resizable">
  24. <div id="klaarzetten" class="ui-widget-content ui-corner-all resizable">
  25. <h3 class="ui-widget-header ui-corner-all">Klaarzetten</h3>
  26. <div class="content">
  27. 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.
  28. </div>
  29. </div>
  30. <div id="reserveren" class="ui-widget-content ui-corner-all resizable">
  31. <h3 class="ui-widget-header ui-corner-all">Reserveren</h3>
  32. <div class="content">
  33. 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.
  34. </div>
  35. </div>
  36. <div id="onderweg" class="ui-widget-content ui-corner-all">
  37. <h3 class="ui-widget-header ui-corner-all">Onderweg</h3>
  38. <div class="content">
  39. 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.
  40. </div>
  41. </div>
  42. </div>
  43. <div id="right">
  44. <div id="openstaande_orderregels" class="ui-widget-content ui-corner-all resizable">
  45. <h3 class="ui-widget-header ui-corner-all">Openstaande Orderregels</h3>
  46. <div class="content">
  47. 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.
  48. </div>
  49. </div>
  50. <div id="in_behandeling" class="ui-widget-content ui-corner-all">
  51. <h3 class="ui-widget-header ui-corner-all">In Behandeling</h3>
  52. <div class="content">
  53. 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.
  54. </div>
  55. </div>
  56. </div>

  58. </body>
  59. </html>