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.
Related
I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.
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/
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 am using the jQuery cycle plugin for a slideshow of images. With rounded bullets as pagers (because it's all the rage now so it seems). This worked perfectly in the 'modern' browsers except for IE. It is messing up the activePagerClass on the pagers.
Because IE can't do border-radius, I use the CSS3PIE behavior.
Changing
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
in the jQuery source code to
$.fn.cycle.updateActivePagerLink = function(pager,currSlide,clsName){
$(pager).each(function(){
$('a',this).removeClass(clsName).eq(currSlide).addClass(clsName);
});
);
fixed it.
So it seems there is an issue with the children() function and the use of CSS3PIE. I'm not a fan of the behavior property and I would rather not use it, but the client wants rounded bullets in IE...
So I hope it helps somebody.
I like to think I'm not a dummy, but I can't get my jQuery horizontal slideshow to animate smoothly especially in FireFox (on a Mac). Anyone have advice?
Animation is being done like so:
$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});
Example link:
http://mayfourteenth.com/w/lookbook?preview=1
I've tested in Firefox, Chrome(dev) and Safari on windows and the animation stutters in all browsers(but more in FF though).
To increase JavaScript performance you could get rid of all the getElementById or $("div#mydividentyfier") calls.
If you store them in variables instead they will be cached.
Example:
It could increase performance quite a bit to do this:
var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {
lookbook.width(lookbook).width()*$('#lookbook img').length)
if (look_caption) {
look_caption.html(lookcaps[0]);
look_caption.fadeIn();
}
Instead of:
if ($('#lookbook').length) {
$('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
if ($('#look_caption')) {
$('#look_caption').html(lookcaps[0]);
$('#look_caption').fadeIn();
}
I would also recommend using data URIs for the images as it reduces the amount of httpRequests you have to make to get the page loaded.
The animation looks smooth for me in Chrome. However, I believe there are several things you can do to improve smoothness:
First, it's fine to preload all of the images in advance as you do here (at the top). However, displaying them all at once, as in the "Example link", hurts performance, as they are all animating at once:
<div id="lookbook">
<div><img src="/q_images/lib/lookbook/1.jpg"></div>
<div><img src="/q_images/lib/lookbook/2.jpg"></div>
...
<div><img src="/q_images/lib/lookbook/15.jpg"></div>
</div>
Instead of doing this, you can simply cue up the next and previous image on either side of the current image, but then don't have the rest of the images in the page until they're needed. (Preloading them is still fine though.)
Other things which can improve performance slightly are things like the following:
Use smaller (by pixels and/or file size) images.
Make minor code optimizations by computing things in advance.
Use a stand-alone animation library instead of jQuery.
You may also want to use this
.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous
Instead of
.animate({left: -((lookbook-1)*825)+'px'});