login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Divs dezelfde hoogte geven

Offline urqbz - 28/04/2009 17:47 (laatste wijziging 28/04/2009 17:48)
Avatar van urqbzPHP interesse Beste mensen,

Dit keer een geheel layout gerelateerde vraag van mij, die vrij moeilijk uit te leggen is, vandaar dat ik er even een plaatje bij heb gedaan http://img82.im...hemdui.jpg

Het is dus de bedoeling dat de divs met die rondjes eromheen even hoog worden als de main div met de content, maar dan als ik daar een enter doe dat het evn lang blijft.

Weet iemand dit?

Oh de codes:
Plaatscode: 136256

En de css
Plaatscode: 136257

Edit: codes

1 antwoord

Gesponsorde links
Offline dfoxx - 28/04/2009 19:06 (laatste wijziging 28/04/2009 19:07)
Avatar van dfoxx Nieuw lid Dit is een script dat ik enige tijd geleden heb gevonden, werkt goed voor mij, probeer maar eens.
Plak onderstaand code in een .js bestand en roep deze aan in de head:
<script type="text/javascript" src="column.js"></script>
  1. /*
  2. by Paul@YellowPencil.com and Scott@YellowPencil.com
  3. includes TextResizeDetector by Lawrence Carvalho <carvalho@uk.yahoo-inc.com>
  4. feel free to delete all comments except for the above credit
  5. */
  6.  
  7. // Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
  8. // The last one is there to show how you can add more columns. Just delete the ones you're not using.
  9. var divs = new Array('center', 'right', 'left');
  10.  
  11. // Initialize Scripts - is this a browser that understands DOM?
  12. function scriptInit() { if (!document.getElementById) { return; } }
  13.  
  14. // Set up Event Listener
  15. function addEvent(elm, evType, fn, useCapture) {
  16. if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; }
  17. else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
  18. else { elm['on' + evType] = fn; }
  19. }
  20.  
  21. // Start Column Script
  22. function setTall() {
  23. if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
  24. if (document.getElementById(divs[i]) != null)
  25. { var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
  26. }
  27. for (var i = 0; i < divs.length; i++) {
  28. if (document.getElementById(divs[i]) != null)
  29. { var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
  30. }
  31. }
  32. }
  33.  
  34. // Assign one of the columns to the TextResizeDetector.
  35. function initTall() {
  36. if (document.getElementById) { for (var i = 0; i < divs.length; i++)
  37. { if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
  38. setTall(); }
  39. }
  40.  
  41. // Fire Events
  42. addEvent(window, 'load', initTall, false);
  43. addEvent(window, 'resize', setTall, false);
  44.  
  45. /* Detects changes to font sizes when user changes browser settings
  46. Fires a custom event with the following data:
  47. iBase : base font size
  48. iDelta : difference in pixels from previous setting
  49. iSize : size in pixel of text
  50. author Lawrence Carvalho carvalho@uk.yahoo-inc.com */
  51.  
  52. // @constructor
  53. TextResizeDetector = function() {
  54. var el = null;
  55. var iIntervalDelay = 200;
  56. var iInterval = null;
  57. var iCurrSize = -1;
  58. var iBase = -1;
  59. var aListeners = [];
  60. var createControlElement = function() {
  61. el = document.createElement('span');
  62. el.id='textResizeControl';
  63. el.innerHTML='&nbsp;';
  64. el.style.position="absolute";
  65. el.style.left="-9999px";
  66. var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
  67. // insert before firstChild
  68. if (elC)
  69. elC.insertBefore(el,elC.firstChild);
  70. iBase = iCurrSize = TextResizeDetector.getSize();
  71. };
  72.  
  73. function _stopDetector() {
  74. window.clearInterval(iInterval);
  75. iInterval=null;
  76. };
  77. function _startDetector() {
  78. if (!iInterval) {
  79. iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
  80. }
  81. };
  82.  
  83. function _detect() {
  84. var iNewSize = TextResizeDetector.getSize();
  85.  
  86. if(iNewSize!== iCurrSize) {
  87. for (var i=0;i <aListeners.length;i++) {
  88. aListnr = aListeners[i];
  89. var oArgs = { iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
  90. if (!aListnr.obj) {
  91. aListnr.fn('textSizeChanged',[oArgs]);
  92. }
  93. else {
  94. aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
  95. }
  96. }
  97.  
  98. }
  99. return iCurrSize;
  100. };
  101. var onAvailable = function() {
  102. if (!TextResizeDetector.onAvailableCount_i ) {
  103. TextResizeDetector.onAvailableCount_i =0;
  104. }
  105.  
  106. if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
  107. TextResizeDetector.init();
  108. if (TextResizeDetector.USER_INIT_FUNC){
  109. TextResizeDetector.USER_INIT_FUNC();
  110. }
  111. TextResizeDetector.onAvailableCount_i = null;
  112. }
  113. else {
  114. if (TextResizeDetector.onAvailableCount_i<600) {
  115. TextResizeDetector.onAvailableCount_i++;
  116. setTimeout(onAvailable,200)
  117. }
  118. }
  119. };
  120. setTimeout(onAvailable,500);
  121.  
  122. return {
  123. /*
  124. * Initializes the detector
  125. *
  126. * @param {String} sId The id of the element in which to create the control element
  127. */
  128. init: function() {
  129.  
  130. createControlElement();
  131. _startDetector();
  132. },
  133. /**
  134. * Adds listeners to the ontextsizechange event.
  135. * Returns the base font size
  136. *
  137. */
  138. addEventListener:function(fn,obj,bScope) {
  139. aListeners[aListeners.length] = {
  140. fn: fn,
  141. obj: obj
  142. }
  143. return iBase;
  144. },
  145. /**
  146. * performs the detection and fires textSizeChanged event
  147. * @return the current font size
  148. * @type {integer}
  149. */
  150. detect:function() {
  151. return _detect();
  152. },
  153. /**
  154.   * Returns the height of the control element
  155.   *
  156. * @return the current height of control element
  157. * @type {integer}
  158.   */
  159. getSize:function() {
  160. var iSize;
  161. return el.offsetHeight;
  162.  
  163.  
  164. },
  165. /**
  166.   * Stops the detector
  167.   */
  168. stopDetector:function() {
  169. return _stopDetector();
  170. },
  171. /*
  172. * Starts the detector
  173. */
  174. startDetector:function() {
  175. return _startDetector();
  176. }
  177. }
  178. }();
  179.  
  180. /*** end TextResizeDetector */
  181.  
  182. TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
  183. TextResizeDetector.USER_INIT_FUNC = function() {
  184. var iBase = TextResizeDetector.addEventListener(setTall, null);
  185. };
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.167s