Div not showing up good in Mozilla firefox - php

Question

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>
Rent
Add to Wishlist
</p>
</article>
<?php
}
}
?>
</section>
<hr>
<div id="divId">
</div>
</div>

Answer 1

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><?php echo "$row->book_title"; ?></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>
Rent
Add to Wishlist
</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>

Answer 2

Have you tried adding some console.log()'s to all the JS handlers to ensure they are firing as expected in all browsers.
As your code is dependant on your data set it is difficult to test. Have you considered using just bootstrap. this will result in a more grid like layout. note bootstrap col class on the article
<?php
if (empty($query4)) {
echo '<p style="color:red;">No Books To Display!</p>';
} else {
var counter =0;
foreach ($query4 as $row) {
if (counter % 6 == 0) {
echo "<div class='clearfix'></div>";
}
counter ++;
?>
<article class="white-panel col-xs-2"><!-- note bootstrap col class 2 -->
<?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>
Rent
Add to Wishlist
</p>
</article>
<?php
}
}
?>
also consider using external css instead of <br/>, inline css and 's