CODEWITHSUNDEEP
javascriptjqueryhtmlcss
beek
beek

Reputation: 3750

Trying to make a simple grid with jQuery

I've tried to make a JSfiddle for this but it's a pain cos everything is dynamic. Hopefully I can get some pointers without it.

I'm trying to put some divs in a simple gridenter image description here

Using this code:

    var buttonHeight = 200;
    var buttonWidth = 220;
    var buttonGap = 10;
    var titleHeight = 100;

    //set the secetion width
    var sectionChildren = section.childSections > 0 
        ? section.childSections.length  + section.guideScenes.length
        : section.guideScenes.length;

    var rows = Math.ceil( ($( "#guide" ).height() - titleHeight) / buttonHeight);
    var columns = Math.ceil(sectionChildren/rows);

    console.log(rows);
    console.log(columns);

    $( "#" + section.id ).width( columns * (buttonWidth + buttonGap) );

    //set the guide width
    $( "#guide" ).width( $( "#" + section.id ).width() + $( "#guide" ).width() );

It's attempting to organise the grid and set the width of the container (#guide), which has a fixed height.

Even tho the maths seems right, and there are 2 rows and 4 columns, the last div is always going into a new row rather than the final column.

Here is the CSS for the parent div (section)

.section
{
    height:             80%;
    cursor:             pointer;
    float:              left;
    position:           relative;
    padding-right:      50px;
    z-index:            3; 
}

and the blocks (guideScene)

.guideScene
{
    height :            200px;
    width :             220px;
    background-size:    cover; 
    background-repeat:  no-repeat;
    background-position: center;
    position:           relative;
    overflow:           hidden;
    display:            inline-block;
    margin:             10px 10px 10px 10px;

}

Any ideas how I can get the last cell into the left most column.

Upvotes: 0

Views: 177

Answers (3)

CptFishPants
CptFishPants

Reputation: 145

The problem is the padding, but I prefer to use box-sizing:border-box; as this will include borders and padding so you dont have to manually add width or height for padding and borders as it is then included in the box model.

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Upvotes: 1

Gavin
Gavin

Reputation: 321

If you want to make div's in grid its simple to only use CSS for required result. You just need to use this code

<div class="container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>

In CSS

.grid-item { display:inline-block; background:#ccc; margin:10px; padding:10px; }

It will push blocks to form grids and good thing is last cell will be at left and this code dont require JavaScript so faster page loading.

Upvotes: 1

beek
beek

Reputation: 3750

Wasn't wide enough. Needed to add some extra width for padding.

Upvotes: 0

Related Questions