Menu
I am using this plugin to display books, this result shows good in IE and Chrome browser but result does not show good in Mozilla Firefox! What could be the reason ?
Good image- Chrome browser
Not good image- Mozilla Firefox
*Live demo *
Code:
<script type="text/javascript">
$(document).ready(function () {
$('#pinBoot').pinterest_grid({
no_columns: 6,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
(function ($, window, document, undefined) {
var pluginName = 'pinterest_grid',
defaults = {
padding_x: 10,
padding_y: 10,
no_columns: 3,
margin_bottom: 50,
single_column_breakpoint: 700
},
columns,
$article,
article_width;
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
var self = this,
resize_finish;
$(window).resize(function () {
clearTimeout(resize_finish);
resize_finish = setTimeout(function () {
self.make_layout_change(self);
}, 11);
});
self.make_layout_change(self);
setTimeout(function () {
$(window).resize();
}, 500);
};
Plugin.prototype.calculate = function (single_column_mode) {
var self = this,
tallest = 0,
row = 0,
$container = $(this.element),
container_width = $container.width();
$article = $(this.element).children();
if (single_column_mode === true) {
article_width = $container.width() - self.options.padding_x;
} else {
article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
}
$article.each(function () {
$(this).css('width', article_width);
});
columns = self.options.no_columns;
$article.each(function (index) {
var current_column,
left_out = 0,
top = 0,
$this = $(this),
prevAll = $this.prevAll(),
tallest = 0;
if (single_column_mode === false) {
current_column = (index % columns);
} else {
current_column = 0;
}
for (var t = 0; t < columns; t++) {
$this.removeClass('c' + t);
}
if (index % columns === 0) {
row++;
}
$this.addClass('c' + current_column);
$this.addClass('r' + row);
prevAll.each(function (index) {
if ($(this).hasClass('c' + current_column)) {
top += $(this).outerHeight() + self.options.padding_y;
}
});
if (single_column_mode === true) {
left_out = 0;
} else {
left_out = (index % columns) * (article_width + self.options.padding_x);
}
$this.css({
'left': left_out,
'top': top
});
});
this.tallest($container);
$(window).resize();
};
Plugin.prototype.tallest = function (_container) {
var column_heights = [],
largest = 0;
for (var z = 0; z < columns; z++) {
var temp_height = 0;
_container.find('.c' + z).each(function () {
temp_height += $(this).outerHeight();
});
column_heights[z] = temp_height;
}
largest = Math.max.apply(Math, column_heights);
_container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
};
Plugin.prototype.make_layout_change = function (_self) {
if ($(window).width() < _self.options.single_column_breakpoint) {
_self.calculate(true);
} else {
_self.calculate(false);
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin(this, options));
}
});
}
})(jQuery, window, document);
</script>
html/php code
<div class="row">
<section id="pinBoot">
<?php
if (empty($query4)) {
echo '<p style="color:red;"> No Books To Display!</p>';
} else {
foreach ($query4 as $row) {
?>
<article class="white-panel">
<?php echo "<img src='" . base_url() . "uploads/books/$row->img1' alt='.$row->book_title.' title='$row->book_title By $row->auth_firstname $row->auth_lastname' />"; ?>
<h4>
<a class="title" href="#">
<?php echo "$row->book_title"; ?>
</a>
</h4>
<left> <img src="http://www.homequalitymark.com/filelibrary/interactive_scorecard/4_star.png" style="width:50%;height:12px;"/></left>
<p> By
<a class="link" href="" title="<?php echo $row->book_title ?>">
<?php
$afl = $row->auth_firstname . ' ' . $row->auth_lastname;
$tafln = strlen($afl);
if ($tafln >= 15) {
$afln = strip_tags($afl);
$safln = substr($afln, 0, 11);
echo "<span class='author'>$safln ...</span>";
} else {
echo "<span title='$row->auth_firstname $row->auth_lastname' class='author'> $row->auth_firstname $row->auth_lastname</span>";
}
?>
</a> <br/>
Number of Pages:<?php echo $row->pages; ?>
</p>
<a href="#" class="btn btn-default btn-xs rent-btn" data-id="<?php echo $row->book_id; ?>" role="button">Rent</a>
<a href="#" class="btn btn-default btn-xs rent-btn" role="button">Add to Wishlist</a>
</p>
</article>
<?php
}
}
?>
</section>
<hr>
<div id="divId">
</div>
</div>
858
Edit: I added the description.
The CSS "row" and "pinBoot" selector rules used in the example are not given.
<div class="row">
<section id="pinBoot">
I've used and tried the original CSS selectors. The problem may be with the "row" and "pinBoot" selectors.
<div class="container marketing">
<section id="blog-landing">
It will also work when you add "container" to the "row" class.
<div class = "container"> or <div class = "row container">
Sorry English is not good, I can't explain more. I hope I can tell.
Please test, example. Code create php file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Pinterest Grid Plugin Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body {
background: #E9E9E9;
}
#blog-landing {
margin-top: 81px;
position: relative;
max-width: 100%;
width: 100%;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<!-- NAVBAR
================================================== -->
<body>
<?php
$query4 = array(
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
),
array(
'img1' => 'http://www.mediademon.com/wp-content/uploads/2014/04/food-drink-expo.png',
'book_title' => 'Is your website converting visits into sales?',
'auth_firstname' => 'Roberto',
'auth_lastname' => 'Doleto',
'pages' => '23',
'book_id' => '2'
)
);
$query4 = json_decode(json_encode($query4));
?>
<h1 style="margin-top:150px" align="center">jQuery Pinterest Grid Plugin Example</h1>
<div class="container marketing">
<section id="blog-landing">
<?php foreach ($query4 as $row) { ?>
<article class="white-panel">
<?php echo "<img src='{$row->img1}' alt='.{$row->book_title}.' title='{$row->book_title} By {$row->auth_firstname} {$row->auth_lastname}' />"; ?>
<h4><a href="#"><?php echo "$row->book_title"; ?></a></h4>
<p>
<a class="link" href="" title="<?php echo $row->book_title ?>">
<?php
$afl = $row->auth_firstname . ' ' . $row->auth_lastname;
$tafln = strlen($afl);
if ($tafln >= 15) {
$afln = strip_tags($afl);
$safln = substr($afln, 0, 11);
echo "<span class='author'>$safln ...</span>";
} else {
echo "<span title='{$row->auth_firstname} {$row->auth_lastname}' class='author'> {$row->auth_firstname} {$row->auth_lastname}</span>";
}
?>
</a> <br/>
Number of Pages:<?php echo $row->pages; ?>
</p>
<p>
<a href="#" class="btn btn-default btn-xs rent-btn" data-id="<?php echo $row->book_id; ?>" role="button">Rent</a>
<a href="#" class="btn btn-default btn-xs rent-btn" role="button">Add to Wishlist</a>
</p>
</article>
<?php } ?>
</section>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid/pinterest_grid.js"></script>
<script>
$(document).ready(function() {
$('#blog-landing').pinterest_grid({
no_columns: 4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
