Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
Blog Web Dev Responsive Tiles

Responsive Tiles

By Forrest Smith - Drempd.com

For a couple of projects, I wanted to create tiles that automatically resized themselves based on the screen size, or space available within the page. If there is enough room, I wanted the system to automatically insert another tile to the row.

The javascript/jquery:

//Resizes tiles to completely fill the width of a container div (.tile-container).  

var tileMinWidth = new Array();

function resizeTiles() {

    $('.tile-container').each(function (i, obj) {

        if (!tileMinWidth[i]) {
            tileMinWidth[i] = $(obj).find('.tile').width();
        }

        var containerWidth = $(obj).width();
        var rowElements     = Math.floor(containerWidth / tileMinWidth[i]);
        var tileWidth       = 100 / rowElements;

        $(obj).find('.tile').css({ 'width': tileWidth + '%' });

        //If it's the end of the row, clear it:
        $(obj).find(\".tile:nth-child(" + (rowElements + 1) + ")").css("clear", "left");

    });

}

$(window).resize(resizeTiles);
$(document).ready(resizeTiles);

2/23/14 – Updated this so there can be different groupings of tiles on the same page, with different minimum widths per tile, and different widths that they are allowed to spill into. I also set it to \’clear\’ the divs if it’s the beginning of a new row, to get rid of weird div floating issues if the tiles aren\’t of all the same height.

Posted on January 31, 2014August 26, 2022 in Web Dev
  • Adventure

    • adventure
    • gravelgrinding
    • hiking
    • running
  • The Built Environment

    • architecture
    • urbanity
  • Locations

    • san diego
    • portland
  • Freelance Life

    • freelancing
    • productivity
  • Web Dev

    • css
    • entrepreneurship
    • git
    • handlebars
    • html
    • inkscape
    • photoshop
    • php
    • sass
    • web design
    • web development
    • saphire

drempd | san diego, ca


home contact

adventures san diego urbanity and architecture projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance