As you can notice in the picture Chrome is sizing the height of the selected div to 55px. This is element.style which I think is calculated by a script and inserted into the html. 55px is not correct because it is cutting off the images so I want to make it 305px. The weird thing is, is that this ONLY happens in Chrome and works on IE and Firefox. Plus it doesn't happen when I am working on the html page locally in Chrome on my computer. I tried to override the 55px CSS rule by using !important but this doesn't do anything. I cleared my browser cache/cookies and re-uploaded the files but nothing. Chrome seems to correct itself and display is correctly when you make the browser window small then full screen again. Any help is appreciated.
In the /js/main.js file
Change this code:
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
masonry: {
columnWidth: $container.width() / $resize
}
});
To:
$container.imagesLoaded( function() {
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
masonry: {
columnWidth: $container.width() / $resize
}
});
});
This will hopefully make isotope wait for images to load.
EDIT: Imagesloaded is no longer included in the newest versions of isotope. You got an older version with Imagesloaded included, but if you were to upgrade to a newer version, you will have to use this one: http://imagesloaded.desandro.com/
Related
Here is the fiddle:
https://jsfiddle.net/qdhw0o3a/2/
I can't understand why all the items are being displayed on top of each other? Does it have something to do with the settings? I am just using the standard settings (as far as I can tell) which should produce behaviour similar to the website.
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
Try initiating the isotope after the window loads:
$(window).on('load', function() {
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
});
Note: Also, be on the lookout for Images Lazy-Loading in case your '.grid-item' contains images. This might interfere with isotope and make the elements come on top of each other.
you need to give the img and max-height and max-width.
see the updated Fiddle
I am trying to recreate the masonry blog view from Unify in Rails 4.
http://htmlstream.com/preview/unify-v1.8/blog_masonry_3col.html
I bought the theme and included the latest imagesLoaded and Masonry files within my application (using bower-rails).
Masonry PACKAGED v3.3.2
imagesLoaded PACKAGED v3.2.0
When using the with the theme supplied js file all images are stacked on top of each other.
screenshot 1
$(document).ready(function(){
var $container = $('.grid-boxes');
var gutter = 30;
var min_width = 300;
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.grid-boxes-in',
gutterWidth: gutter,
isAnimated: true,
columnWidth: function( containerWidth ) {
var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
if (box_width < min_width) {
box_width = (((containerWidth - gutter)/2) | 0);
}
if (box_width < min_width) {
box_width = containerWidth;
}
$('.grid-boxes-in').width(box_width);
return box_width;
}
});
});
});
See this js fiddle: http://jsfiddle.net/sdynfq83/
I noticed following things:
Resizing the window or refreshing does not correct the issue so I figured out it is not an images loaded error. This took me a long time to figure this out.
My html code seems alright since I have the same problems if I copy the HTML code from the theme itself and include the same JS and CSS files.
the ".grid-boxes-quote" boxes don't have the same width as the other grid boxes. Which is strange because they should all be the same since all boxes have the ".grid-boxes-in" class. https://jsfiddle.net/sdynfq83/embedded/result/
When removing the columnWidth code and replacing it by a fixed number (300) + adding width to the grid-boxes-in then it seems to work. This is not what I want since the images sizes are not correct anymore.
css
.blog_masonry_3col .grid-boxes-in {
padding: 0;
margin-bottom: 30px;
border: solid 1px #eee;
/* added width */
width: 300px;
}
js
$(document).ready(function(){
var $container = $('.grid-boxes');
var gutter = 30;
var min_width = 300;
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.grid-boxes-in',
gutterWidth: gutter,
isAnimated: true,
/*columnWidth: function( containerWidth ) {
var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
if (box_width < min_width) {
box_width = (((containerWidth - gutter)/2) | 0);
}
if (box_width < min_width) {
box_width = containerWidth;
}
$('.grid-boxes-in').width(box_width);
return box_width;
}*/
columnWidth: 300
});
});
});
js fiddle: http://jsfiddle.net/8c0r06a6/2/
The theme itself supplies an older version of masonry. In which the code seems to work. The images do keep overlapping (this can be fixed by resizing or refreshing the window).
Screenshot 2
screenshot 3
I however want to update to the latest version of masonry and images loaded so I can keep using bower to easily update those files. I am also hoping that using the latest version of everything fixes the overlapping images in screenshot 2. I have a working JS fiddle below with the old code.
/**
* jQuery Masonry v2.1.05
* A dynamic layout plugin for jQuery
* The flip-side of CSS Floats
* http://masonry.desandro.com
*
* Licensed under the MIT license.
http://jsfiddle.net/ytLf3bue/1/
Summarized I have following questions, please bear in mind that I am a beginning hobby coder and I do not have a lot of JS experience:
Is it a smart idea to always use the latest version of the Masonry and ImagesLoaded code or should I just stick with the supplied files?
If 1. is yes => how do I fix the code so the images are not stacked on eachother anymore?
If 1. is no => how do I fix the code so the overlapping images and background bleed in screenshot 2 and 3 are gone?
Anytime you are dealing with masonry, instead of using:
$(document).ready(function(){ ... go masonry ... }
use:
$(window).load(function(){ ... go masonry ... }
http://jsfiddle.net/sdynfq83/2/
$(document).ready triggers as soon as the DOM is completely loaded. That does not include loading of resources like images. Masonry calculates the absolute positioning of images based on their widths and heights. If it runs before the actual image is loaded it sees the image tag as an element with zero width and height. There for it only offsets for the gutter between and the images end up stacked.
$(window).load triggers once all page resources have finished loading. This allows Masonry to get the correct dimensions of all objects before it tries to place them.
David Desandro answered me himself.
$(document).ready( function() {
// init Masonry after all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
$grid.masonry({
itemSelector: '.grid-item',
percentPosition: true,
gutter: 20,
columnWidth: '.grid-sizer'
});
});
});
In Masonry v3, columnWidth no longer accepts a function. Instead, use
element sizing for responsive layouts.
Here's a demo
http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/
This fixes the issue.
I am using the jQuery SlimScroll Plugin.
They have a div element and this element content is dynamically loaded via ajax call. I am using slimScroll on that div and tried to start from bottom.
The slimscrollbar start at the bottom but the inside scrollcontent jump a little bit up.
Its work perfectly on Google Chrome, Safari, only problem in Firefox. Here is my jquery code.
$el = $('#myDiv');
$el.slimScroll({
height: '350px',
start: 'bottom',
alwaysVisible: true,
allowPageScroll: false
});
its very simple you just have to comment this line
this.addEventListener('MozMousePixelScroll', _onWheel, false ); on the file 'slimscroll.js' and it will work for all the browser hope this helps you !
http://staging.isaidicanshout.com/isics2014/
There are small 2-3 pixel gaps between all my tiles when masonry loads the first time, but they go away after resizing the window. Any help is appreciated!
Also, is there a way to get masonry to actively re-shuffle as the window is resized, rather than waiting for the user to complete the action?
Thanks!
I ended up discovering that the gaps were due to rounding. My tiles were set to 50% width of the page, so when the page was an odd number of pixels, gaps were revealed.
Guy didn't come back to answer this. Looks like he sorted it out though. For the lazy or if the link above dies.
You are going to need the imagesLoaded plugin. You should already have it if you use images as masonry + images doesn't work well with WebKit.
The magic which solves the border issue is to reload masonry once the images are loaded.
$(window).load(function(){
$('.container').masonry({
transitionDuration: 0,
itemSelector: '.photo-box'
}).imagesLoaded(function() {
$('.container').masonry('reloadItems').masonry();
});
});
Interestingly the code below doesn't work.
var container = $('.content');
container.imagesLoaded( function() {
container.masonry({
transitionDuration: 0,
itemSelector: '.photo-box'
});
});
Now we know. Well done OP for figuring this out.
What i figured out is that the window isn't re-sizing on its own for some reason hence the small gaps . This did the trick in my case .
document.addEventListener("click", function(){
$(window).trigger('resize');
});
I'm thinking of redoing my homepage again and thought to use Isotope to make it spiffier. I've experimented with Isotope in the past and was frustrated by not being able to make it work like I wanted. This time I'm trying to do something simpler. I made a super simple example to illustrate my latest issue. Images do not show in Safari and some other browsers unless you resize the browser window.
Below is a sample of my code, the divs are written to the screen with PHP. I might switch to UL and LI but since the HTML is there just not being displayed until the browser window is resized... Is there some JavaScript force redraw/reload I should be doing, there was nothing about that in the Isotope documentation that I've encountered and the demos work in Safari on my MacBook Pro.
I tried a few other browsers, it works as designed in IE8, but Firefox on my work machine seems to react the same as Safari.
<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
<div class="item"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></div>
</div>
<script>
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
Have you tried putting your function into Windows.load?
$(window).on('load', function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
I've moved on. I have everything working how I like on www.muschamp.ca now. I didn't really make any changes to Isotope or the JavaScript / CSS though I tried many. The big change I made which finally solved this problem was to use PHP to determine the image's height and width. The Isotope documentation says it will work without this, but in my experience it works far better if you give the JavaScript accurate image dimensions.
I'm not sure how much of a performance hit I take using getimagesize() http://php.net/manual/en/function.getimagesize.php but adding a call to that before writing out my image tag(s) results in perfect rendering every time. I fetch slightly fewer images / RSS feeds as a compromise.
Hopefully my trial and error and simple demo helps some people.