WordPress.org

Ready to get started?Download WordPress

Forums

need help with GRID theme (1 post)

  1. nihil.core
    Member
    Posted 1 year ago #

    Hey there!

    I incorporated part of the GRID WordPress Theme by Straightline, which you can find here http://straightline.jp/36, into my custom theme to have a grid of posts in certain pages.

    Everything is fine, except that this grid-item order works in a strange way.
    > With 4 posts everything is fine
    http://img576.imageshack.us/img576/3175/75869585.png

    > With 5 posts the order changes from rows to columns
    http://img204.imageshack.us/img204/3306/49932836.png

    > I can still have 4 columns with 7 items
    http://img17.imageshack.us/img17/8575/62540435.png

    > And so on...
    http://img225.imageshack.us/img225/2214/82243827.png

    So now, I'd like to have items ordered in rows as with the first 4 posts.
    I think the problem is in the Js file, but I'm not that good to understand and properly modify what happens in it.
    Here is the grid.js code:

    /*
    Copyright (c) 2010, STRAIGHTLINE All rights reserved.
    http://www.straightline.jp/
    
    Code licensed under the BSD License
    http://www.opensource.org/licenses/bsd-license.php
    */
    
    var GridLayout = new Class({
        isResizing: false,
        initialize: function(options) {
    
            if ($$('.single').length == 0 && $$('.page').length == 0) {
                $$('.grid').each(function(grid) {
                    var firstGridItem = grid.getElement('.grid-item');
                    var firstGridContent = grid.getElement('.grid-content');
                    var gridContentWidth = firstGridItem.getStyle('width').toInt() -
                                            firstGridContent.getStyle('margin-left').toInt() -
                                            firstGridContent.getStyle('margin-right').toInt() -
                                            firstGridContent.getStyle('padding-left').toInt() -
                                            firstGridContent.getStyle('padding-right').toInt();
                    ['img', 'object', 'embed'].each(function(tag) {
                        grid.getElements(tag).each(function(element) {
    
                            if (Browser.Engine.trident) {
                                element.width = gridContentWidth;
                            } else {
                                element.setStyle('width', gridContentWidth);
                            }
                        });
                    });
                });
            }
    
            $$('.grid-item').each(function(gridItem, index) {
                gridItem.setStyle('position', 'absolute');
            });
    
            window.addEvent('resize', function() {
                if (this.isResizing == false) {
                    this.isResizing = true;
                    (function() {
                        this.control();
                        (function() { this.isResizing = false; }.bind(this)).delay(1);
                    }.bind(this)).delay(1);
                }
            }.bind(this));
        },
    
        control: function() {
    
            var wrapper = $('wrapper');
            wrapper.setStyles({
                width: 'auto',
                opacity: 0
            });
            var wrapperMaxWidth = 0;
    
            $$('.grid').each(function(grid) {
    
                grid.setStyles({
                    width: 'auto',
                    height: 'auto'
                });
    
                var gridMaxWidth = 0;
                var gridMaxHeight = 0;
                var firstGridItem = grid.getElement('.grid-item');
                var gridItemWidth = firstGridItem.getSize().x +
                                firstGridItem.getStyle('border-width').toInt() +
                                firstGridItem.getStyle('margin-left').toInt() +
                                firstGridItem.getStyle('margin-right').toInt() +
                                firstGridItem.getStyle('padding-left').toInt() +
                                firstGridItem.getStyle('padding-right').toInt();
                var gridItems = grid.getElements('.grid-item');
                var colCount = Math.max(Math.floor(grid.getSize().x / gridItemWidth), 1);
                var rowCount =  Math.max(Math.ceil(gridItems.length / colCount), 1);
                wrapperMaxWidth = Math.max(wrapperMaxWidth, Math.ceil(gridItems.length / rowCount) * gridItemWidth);
    
                for (var col = 0; col < colCount; col++) {
    
                    var colMaxHeight = 0;
                    for (var row = 0; row < rowCount; row++) {
    
                        var curGridItemIndex = col * rowCount + row;
                        var gridItem = gridItems[curGridItemIndex];
    
                        if ($defined(gridItem)) {
                            gridItem.removeClass('grid-item-start');
                            gridItem.removeClass('grid-item-end');
                            if (row == 0) {
                                gridItem.addClass('grid-item-start');
                            }
                            if (row + 1 == rowCount || curGridItemIndex + 1 == gridItems.length) {
                                gridItem.addClass('grid-item-end');
                            }
                            gridItem.setStyles({
                                opacity: 0,
                                top: row > 0 ? gridItems[curGridItemIndex - 1].getCoordinates(grid).bottom : 0,
                                left: col > 0 ? gridItems[(col - 1) * rowCount + row].getCoordinates(grid).right : 0
                            });
                            colMaxHeight += gridItem.getSize().y;
                            gridMaxHeight = Math.max(gridMaxHeight, colMaxHeight);
                        }
                    }
    
                }
    
                grid.setStyles({
                    width: gridMaxWidth,
                    height: gridMaxHeight
                });
    
            }.bind(this));
    
            wrapper.setStyles({
                width: wrapperMaxWidth,
                opacity: 1
            });
    
            $$('.grid-item').each(function(gridItem, index) {
                (function() { gridItem.tween('opacity', 1); }).delay(1 * index);
            });
        }
    });

    Any suggestion?
    Thank You!

Topic Closed

This topic has been closed to new replies.

About this Topic