jquery.syncheight.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /**
  2. * syncHeight - jQuery plugin to automagically Snyc the heights of columns
  3. * Made to seemlessly work with the CCS-Framework YAML (yaml.de)
  4. * @requires jQuery v1.0.3
  5. *
  6. * http://blog.ginader.de/dev/syncheight/
  7. *
  8. * Copyright (c) 2007-2009
  9. * Dirk Ginader (ginader.de)
  10. * Dirk Jesse (yaml.de)
  11. * Dual licensed under the MIT and GPL licenses:
  12. * http://www.opensource.org/licenses/mit-license.php
  13. * http://www.gnu.org/licenses/gpl.html
  14. *
  15. * Version: 1.2
  16. *
  17. * Usage:
  18. $(window).load(function(){
  19. $('p').syncHeight();
  20. });
  21. */
  22. (function($) {
  23. var getHeightProperty = function() {
  24. var browser_id = 0;
  25. var property = [
  26. // To avoid content overflow in synchronised boxes on font scaling, we
  27. // use 'min-height' property for modern browsers ...
  28. ['min-height','0px'],
  29. // and 'height' property for Internet Explorer.
  30. ['height','1%']
  31. ];
  32. // check for IE6 ...
  33. if($.browser.msie && $.browser.version < 7){
  34. browser_id = 1;
  35. }
  36. return { 'name': property[browser_id][0],
  37. 'autoheightVal': property[browser_id][1] };
  38. };
  39. $.getSyncedHeight = function(selector) {
  40. var max = 0;
  41. var heightProperty = getHeightProperty();
  42. // get maximum element height ...
  43. $(selector).each(function() {
  44. // fallback to auto height before height check ...
  45. $(this).css(heightProperty.name, heightProperty.autoheightVal);
  46. var val = $(this).height();
  47. if(val > max){
  48. max = val;
  49. }
  50. });
  51. return max;
  52. };
  53. $.fn.syncHeight = function(config) {
  54. var defaults = {
  55. updateOnResize: false, // re-sync element heights after a browser resize event (useful in flexible layouts)
  56. height: false
  57. };
  58. var options = $.extend(defaults, config);
  59. var e = this;
  60. var max = 0;
  61. var heightPropertyName = getHeightProperty().name;
  62. if(typeof(options.height) === "number") {
  63. max = options.height;
  64. } else {
  65. max = $.getSyncedHeight(this);
  66. }
  67. // set synchronized element height ...
  68. $(this).each(function() {
  69. $(this).css(heightPropertyName, max+'px');
  70. });
  71. // optional sync refresh on resize event ...
  72. if (options.updateOnResize === true) {
  73. $(window).resize(function(){
  74. $(e).syncHeight();
  75. });
  76. }
  77. return this;
  78. };
  79. })(jQuery);