CODEWITHSUNDEEP
javascriptjquerywordpress
user3350511
user3350511

Reputation: 61

Displaying posts in three columns?

These few lines display my WordPress posts in two columns. Is it possible to change it to three columns?

if ($(window).width() > 600) {
  var i = 0,
    colOne = new Array(),
    colTwo = new Array();
  jQuery('#cff .cff-item').each(function() {
    i++;
    var $self = jQuery(this);

    function isEven(value) {
      if (value % 2 == 0)
        return true;
      else
        return false;
    }
    if (isEven(i)) {
      colTwo.push($self);
    } else {
      colOne.push($self);
    }
    $self.remove();
  });
  $('#cff').prepend('<div class="col-one" style="width: 45%; float: left; margin: 0 2.5%;"></div><div class="col-two" style="width: 45%; float: left; margin: 0 2.5%;"></div>');
  for (var i = 0; i < colOne.length; i++) {
    jQuery('#cff .col-one').append(colOne[i]);
  };
  for (var i = 0; i < colOne.length; i++) {
    jQuery('#cff .col-two').append(colTwo[i]);
  };
}

How would I do it?

Upvotes: 0

Views: 67

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34199

Answering your question directly, yes, you can easily edit this code such that it now works with three columns:

if ($(window).width() > 600) {
    var columnsCount = 3;
    var $columns = new Array(columnsCount);

    // Create columns
    for (var i = 0; i < columnsCount; i++) {
      $columns[i] = $("<div class='col' style='float: left; margin: 0;'/>")
        .css({
          "width": Math.floor(45 / columnsCount).toFixed(2) + "%",
          "margin-left": Math.floor(5.0 / columnsCount).toFixed(2) + "%",
          "margin-right": Math.floor(5.0 / columnsCount).toFixed(2) + "%"
        });
    }  

    // Relocate items
    $("#cff .cff-item").each(function (i) {
        $(this).appendTo($columns[i]);
    });

    // Replace grid
    $("#cff").empty();
    $columns.forEach(function($c) { $("#cff").append($c); });
}

However, as I said before, it is much a better idea to achieve this using CSS.
Something like would solve all your problems:

  .cff-item {
    display: inline-block;
    width: 90%;
    margin: 0 5%;
  }

@media (min-width: 600px) {
  .cff-item {
    width: 45%;
    margin: 0 2.5%;
  }
}

Upvotes: 1

dippas
dippas

Reputation: 60563

This could be done with CSS only, by using columns property

Something like this

div {
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3
}
<div>Etiam posuere tristique ligula, quis euismod sem facilisis et. Mauris rhoncus lacus vitae dui dictum, sed iaculis ante pellentesque. Sed ut laoreet sem, ac accumsan arcu. Etiam orci ante, molestie semper leo vitae, varius mattis enim. Aliquam quis laoreet
  mi. Aenean aliquam dolor ac accumsan faucibus. Sed ut risus sit amet quam accumsan blandit. Donec sit amet condimentum sapien. Fusce tincidunt sem eget justo ultricies vehicula. Nunc gravida, mi ut ultricies elementum, magna ante vestibulum augue, a
  pretium lacus velit nec lectus. Vestibulum vitae purus vel erat commodo luctus nec a augue. Cras nec scelerisque enim. Etiam hendrerit vel diam et vehicula. Pellentesque finibus feugiat magna finibus pellentesque. Integer quis elementum ante, nec pellentesque
  justo. Pellentesque eleifend facilisis elit ac posuere. Donec ac molestie massa. Phasellus finibus, eros nec auctor tempus, nisi diam tincidunt tortor, eu condimentum enim dolor eget elit. Etiam maximus dui bibendum tristique tincidunt. Vivamus euismod,
  nisl nec faucibus cursus, metus justo accumsan lacus, nec hendrerit nisi risus nec purus. Duis auctor vel mi et ullamcorper. Nam quis felis id leo bibendum varius. In eu bibendum mi. Phasellus feugiat ligula elit, consectetur tempus lorem malesuada
  ac. In vitae volutpat tellus. Aenean tempus pellentesque libero, ut pretium sem hendrerit sed. Phasellus nec imperdiet nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt ac justo et tempor. Ut elementum turpis a neque tristique
  interdum. Morbi eleifend risus risus. Nulla ullamcorper arcu laoreet, malesuada sem eget, molestie libero. Donec volutpat turpis non finibus elementum. Sed sed mauris id dolor consectetur vulputate.</div>

Upvotes: 1

Related Questions