When Dislpay div using grid view.

Demo :

http://ksylvest.github.io/jquery-gridly/

Source  :

https://github.com/ksylvest/jquery-gridly

How to Get Order of Div:

In jquery.gridly.js

Gridly.prototype.layout = function() {
var $element, $elements, index, j, position, ref, ref1, structure;
$elements = (((ref = this.settings.callbacks) != null ? ref.optimize : void 0) || this.optimize)(this.$sorted());
structure = this.structure($elements);
for (index = j = 0, ref1 = $elements.length; 0 <= ref1 ? j < ref1 : j > ref1; index = 0 <= ref1 ? ++j : –j) {
$element = $($elements[index]);
position = structure.positions[index];
//console.debug(index+’->’+$element.attr(‘data-type’));
var type = $element.attr(‘data-type’);
$element.find(‘.positions’).val(index);
$element.find(‘.input_text_area’).attr(‘id’,’input_text_’+index);
$element.attr(‘id’,index);
$element.find(‘.file_input’).attr(‘onchange’,’readURL(this,’+index+’);’);
$element.find(‘.w_img’).attr(‘id’,index);
if(type == “double_vertical_wigdget” || type == “double_horizontal_wigdget”)
{
var instance2 = CKEDITOR.instances[‘input_text_’+index];
if (!instance2) {
CKEDITOR.replace(‘input_text_’+index, {
toolbar: ‘cms_page_edit’,
toolbarGroups: [
{ name: ‘basicstyles’, groups: [ ‘basicstyles’, ‘cleanup’ ] }
],
toolbarCanCollapse: false,
});
}
}

if ($element.is(‘.dragging’)) {
continue;
}
$element.css({
position: ‘absolute’,
left: position.x,
top: position.y
});
}
return this.$el.css({
height: structure.height
});
};

 

 

 

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...