Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Masonry FIX

require display http://bit.ly/JvtHFi on any device not responsive only resize to display correct in tablet or computer is using masonry

accept any proposal to works correct the app change masonry or add a new library or whatever need

and define a considerable price for the work

User Gravatar

ucoder

Posted Jan 7 2014 17:35 UTC

$50


  • isotope
    masonry
    resize
  • 957 Views

2 Replies


Hi ucoder,

Here is the needed code to display properly:

CSS:

body { padding: 0; }
.wrapper { margin: 0 auto; }
.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

JS:

var a=$(".container");
window.optima="50";
var b=20,
    c=270;

a.imagesLoaded(function(){
  a.masonry({
    itemSelector:".box",
    gutterWidth:b,
    isAnimated:!0,
    columnWidth:function(a){
      var d=0|(a-2*b)/3;
      return c>d&&(d=0|(a-b)/2),c>d&&(d=a),$(".box").width(d),d}
  })
});

If you need the desktop design on mobile devices, you can just force them to scale the content:

Add this line in your head tag:

<meta name="viewport" content="width=1024">

Example:

<head>
    <meta charset="utf-8" />
    <meta name="author" content="" />
    <title>Obama</title>
    <meta name="viewport" content="width=1024">
    ...

You can change the 1024 to whatever you need, this is the width that the mobile devices will scale the page to.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 7 2014 22:08 UTC

Here is the working code:

JS:

function App(props){
    this.container = props.container;
    this.itemSelector = props.itemSelector;
    this.gutter = props.gutter;

    this.loadInterval = props.loadInterval

    this.init();
};

App.prototype.init = function(){
    this.masonry();

    this.loader();
};

App.prototype.masonry = function(){
    var that = this;
    var $container = $(that.container)

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: that.itemSelector,
            gutterWidth: that.gutter,
            isAnimated: true,
            columnWidth: 1
        });
    });

};

App.prototype.loader = function(){
    var that = this;

    setInterval(function(){
        that.getTiles();

    }, that.loadInterval);
};

App.prototype.getTiles = function(){
    var that = this;

    $.ajax({
        type        : 'POST',
        data        : 'ajax=1',
        url         : window.location,
        success     : function(data){
            if(data){
                var temp = document.createElement('div');
                var $temp = $(temp);

                temp.innerHTML = data;

                $temp.imagesLoaded(function(){
                    that.prependTiles($temp.find(that.itemSelector));
                });
            };
        }

    });
};

App.prototype.prependTiles = function($tiles){
    $(this.container).prepend($tiles).masonry('prepended', $tiles)
};


$(document).ready(function(){

    // create the app
    new App({
        container       : document.querySelector('.container'),
        itemSelector    : '.box',
        gutter          : 20,
        loadInterval    : 30000

    });

});

CSS:

body { padding: 0;
    -webkit-background-size: cover;
            background-size: cover;
}
.wrapper { margin: 0 auto; }
.box { float: left; padding: 10px; margin: 0; width: 33.3%; background: transparent; box-shadow: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.article { padding: 15px; background: #fff; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); margin: 0; }

@media (max-height: 1000px){
    .article p,
    .article p a { font-size: 16px; line-height: 1.25; }
}

@media (max-height: 900px){
    .box { width: 24.95% }
}

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 29 2014 9:20 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions