max-height 0 because image not loaded?

[cmwelsh]

I was having a weird issue where all of my images were being set to a max-height of 0. When I added the following plugin, my issues disappeared:

// add image rhythm
$(document).waitForImages($.noop, function () {
    $(this).baseline(24);
});

What this plugin does (https://github.com/alexanderdickson/waitForImages) is wait for images to be fully loaded in place before calling the function passed as the 2nd argument for each individual image.

Am I doing something wrong? No one else seems to have this problem. Resizing the browser after the page loads makes all the images pop back up, and there are no complaints now that I fixed my problem. I love this plugin.

[Itrulia]

Heres a Fix for the Jquery version

/*global jQuery */
/*!
* Baseline.js 1.0
*
* Copyright 2012, Daniel Eden http://daneden.me
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Wed June 20 11:39:00 2012 GMT
*/
(function( $ ) {
    $.fn.baseline = function(target) {
        // Set up our variables, like a good little developer
        var tall;
        var newHeight;
        var $this = $(this); // Set the images as objects
        return this.each(function(){
            var setbase = function(target) { // The fun starts here
                $this.removeAttr('style'); // Remove old max-height so that we can resize up as well as down
                tall = $this.height(); // Grab the height
                newHeight = Math.floor(tall / target) * target; // Make up a new height based on the baseline
                $this.css('maxHeight', newHeight); // Set it!
            }
            $this.load(function(){
                setbase(target); // Call on load
            });
            $(window).resize(function(){ // And call again on resize.
                setbase(target);
            });
        });
    }
}) ( jQuery );

[cmwelsh]

That won't work which is why I'm using the wait until loaded plug in. Because you can't rely on the image load event.

---

Chris Welsh Sent from my phone

On Dec 15, 2012, at 4:17 AM, Itrulia notifications@github.com wrote:

Heres a Fix for the Jquery version

/global jQuery */ /!

• Baseline.js 1.0 *
• Copyright 2012, Daniel Eden http://daneden.me
• Released under the WTFPL license
• http://sam.zoy.org/wtfpl/ *
• Date: Wed June 20 11:39:00 2012 GMT / (function( $ ) { $.fn.baseline = function(target) { // Set up our variables, like a good little developer var tall; var newHeight; var $this = $(this); // Set the images as objects return this.each(function(){ var setbase = function(target) { // The fun starts here $this.removeAttr('style'); // Remove old max-height so that we can resize up as well as down tall = $this.height(); // Grab the height newHeight = Math.floor(tall / target) \ target; // Make up a new height based on the baseline $this.css('maxHeight', newHeight); // Set it! } $this.load(function(){ setbase(target); // Call on load }); $(window).resize(function(){ // And call again on resize. setbase(target); }); }); } }) ( jQuery ); — Reply to this email directly or view it on GitHub.