Multi-column page structure

    Very often there are situations when the site has several columns, and the task is that they “stretch” one after another, i.e. have the same height. By simple CSS tools it is not always possible to solve this problem, therefore, I propose a script that solves this problem.

    To begin, I will explain how it works:

    Installation is very simple (we connect the script and register the body.onload event handler):



    Далее указываем class="maxheight" для тех элементов, которые должны растягиваться по вертикали, т.е. принимать размер родительского элемента, например:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet



    По сути тут 2 колонки, каждая из которых имеет одинаковую высоту благодаря, нашему решению.

    Спасибо разработчику этого скрипта: Sokol

    Текущий код (maxheight.js):
    var ElementMaxHeight = function() {
    this.initialize.apply(this, arguments);
    }

    ElementMaxHeight.prototype = {
    initialize: function(className) {
    this.elements = document.getElementsByClassName(className || 'maxheight');

    this.textElement = document.createElement('span');
    this.textElement.appendChild(document.createTextNode('A'));
    this.textElement.style.display = 'none';
    this.textElement.style.position = 'absolute';
    this.textElement.style.fontSize = '1em';
    document.body.appendChild(this.textElement);
    this.textElementHeight = document.getDimensions(this.textElement).height;
    var __object = this;
    var __method = this.checkFontSize;
    this.checkFontSizeInterval = window.setInterval(function() {return __method.apply(__object)}, 500);

    this.expand();
    // Refresh elements height onResize event
    var __method = this.expand;
    if (window.addEventListener) {
    window.addEventListener('resize', function(event) {return __method.apply(__object, [( event || window.event)])}, false);
    } else if (window.attachEvent) {
    window.attachEvent('onresize', function(event) {return __method.apply(__object, [( event || window.event)])});
    }
    },

    expand: function() {
    this.reset();
    for (var i = 0; i < this.elements.length; i++) {
    this.elements[i].style.height = document.getDimensions(this.elements[i].parentNode).height + 'px';
    }
    },

    reset: function() {
    for (var i = 0; i < this.elements.length; i++) {
    this.elements[i].style.height = 'auto';
    }
    },

    checkFontSize: function() {
    var height = document.getDimensions(this.textElement);
    if(this.textElementHeight != height) {
    this.textElementHeight = height;
    this.expand();
    }
    }
    }

    if (!!document.evaluate) {
    document._getElementsByXPath = function(expression, parentElement) {
    var results = [];
    var query = document.evaluate(expression, parentElement || document,
    null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (var i = 0, length = query.snapshotLength; i < length; i++)
    results.push(query.snapshotItem(i));
    return results;
    }
    }

    document.getElementsByClassName = function(className, parentElement) {
    if (!!document.evaluate) {
    var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
    return document._getElementsByXPath(q, parentElement);
    } else {
    var children = (parentElement || document.body).getElementsByTagName('*');
    var elements = [], child;
    for (var i = 0, length = children.length; i < length; i++) {
    child = children[i];
    if (child.className.length != 0 &&
    (child.className == className ||
    child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))) {
    elements.push(child);
    }
    }
    return elements;
    }
    }

    document.getDimensions = function (element) {
    var display = element.style.display;
    if (display != 'none' && display != null) { // Safari bug
    return {width: element.offsetWidth, height: element.offsetHeight};
    } else {
    return {width: element.clientWidth, height: element.clientHeight};
    }
    }

    Also popular now: