refcard/js/refcard.js

$(function () {
    function init() {
        var pageWidth = $(window).width();
        var numberOfColumns = 1;

        switch (true) {
            case pageWidth >= 978 && pageWidth < 1350:
                numberOfColumns = 2;
                break;
            case pageWidth >= 1350 && pageWidth < 1800:
                numberOfColumns = 3;
                break;
            case pageWidth >= 1800 && pageWidth < 2210:
                numberOfColumns = 4;
                break;
            case pageWidth >= 2210 && pageWidth < 2640:
                numberOfColumns = 5;
                break;
            case pageWidth >= 2640:
                numberOfColumns = 6;
                break;
        }
        if (numberOfColumns < 2) {
            return;
        }

        var page = $("#clearing-div");

        $('div.horizontal-block').each(function () {
            var container = $(this);
            var id = container.attr('id');

            var newContainer = $('<div class="columns-container" id="container-' + id + '" />');
            newContainer.insertBefore(page);
            newContainer.append($('<h2>' + id + '</h2>'));

            var columns = [];
            for (var i = 1; i <= numberOfColumns; i++) {
                column = $('<div class="columns" id="column-' + i + '-' + id + '"/>');
                newContainer.append(column);
                columns.push(column);
            }
            newContainer.append($('<div style="clear: both;" />'));
            newContainer.append($('<hr />'));

            $("#" + id + " > div.col").each(function () {
                var element = $(this);
                for (var i = 1; i <= numberOfColumns; i++) {
                    var moveTo = "c" + numberOfColumns + "-" + i;
                    if (element.hasClass(moveTo)) {
                        var clone = element.clone(true);
                        columns[i - 1].append(clone);
                        element.addClass("moved");
                    }
                }
            });
        });
    }

    init();
    $(window).resize(function () {
        $("div.columns").remove();
        $("div.columns-container").remove();
        $('div.horizontal-block').each(function () {
            var id = $(this).attr('id');
            $("#" + id + " > div.col").each(function () {
                $(this).removeClass("moved");
            })
        });
        init();
    });
});

hljs.initHighlightingOnLoad()