Using jQuery to modify CSS: Not Affecting CSS Consistently

Question

I am building a custom child theme built on the Genesis Framework and I am enqueueing a jQuery script that calculates image bottom margin based on the height of the image (only in the “diary” category). The calculation seems to be working properly, but the CSS is being modified inconsistently. Sometimes when I navigate to the page it works properly, other times it doesn’t. If I refresh the page, it usually doesn’t work. This is happening in Safari, Chrome, Firefox (all on a Mac).

This is how I am enqueuing the script in functions.php:

add_action( 'wp_enqueue_scripts', 'lpt_enqueue_script' );
function lpt_enqueue_script() {
    wp_enqueue_script( 'variable-margins', get_stylesheet_directory_uri() . '/js/variable-margins.js', array( 'jquery' ), '', false );
}

The script looks like this:

jQuery(document).ready(
function() {
    if (jQuery('.category-diary img').length > 0){
        var lineHeight = 21;
        jQuery('.category-diary img').each(
        function() {
            var remainder = jQuery(this).height() % lineHeight;
            jQuery(this).css({'margin-bottom': (remainder - 5 + (lineHeight)) + 'px'});
        });     
    };
});

The url for one of the single pages where the images should be affected is: http://lovelandprovincetown.com/this-is-a-test-post/.

Any ideas why this isn't working properly?

I should mention that the desired outcome of this script is variable image bottom margins in order to preserve the line-height so that the text in the left and right columns are aligned with each other. Perhaps there is another method to achieve this?

The height of an image can only be properly calculated once the image is loaded. — adeneo, May 09 '13 at 19:31
So if I enqueue the script in the footer instead of the header? Although I've tried that, too. — Jared Aiden Wolf, May 09 '13 at 19:38
Does'nt matter, document ready fires when the document is ready, not when the images are loaded. window.load is one way to do it, personally I prefer the load event on each image. — adeneo, May 09 '13 at 19:39
See also [this question](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) — Blazemonger, May 09 '13 at 19:43

David Barker · Answer 1 · 2013-05-09T20:06:23.720

1

Your function would be better placed within a jQuery(window).load() wrapper, rather than doc ready. This allows the images to load and their heights be properly calculated by your script.

(function($, window) {

    $(window).load(function() 
    {
        var images = $('.category-diary img');

        if (images.length > 0)
        {
            var lineheight = 21;

            images.each(function(index)
            {
                var self = $(this),
                    remainder = self.height() % lineheight;

                self.css({
                    'margin-bottom': ((remainder - 5) + lineHeight) + 'px'
                });
            });
        }
    });
})(jQuery, window);

edited May 09 '13 at 20:06

answered May 09 '13 at 19:37

David Barker

14,484
3
48
77

David, I replaced my script with your and it doesn't seem to affect the CSS at all. However, when I replaced `jQuery(document).ready` with `jQuery(window).load` it seemed to make a difference. – Jared Aiden Wolf May 09 '13 at 20:02
Slightly confused... the script above is your script in a `jQuery(window).load` wrapper (with some modifications, but none that would affect the outcome). However just added window to the closure. – David Barker May 09 '13 at 20:06
I should mention that the desired outcome of this script is variable image bottom margins in order to preserver the line-height so that the text in the left and right columns are aligned with each other. Perhaps there is another method to achieve this? – Jared Aiden Wolf May 09 '13 at 20:22
David, your modified code gives me different results as my modified code. Making progress, perhaps? I appreciate your assistance. – Jared Aiden Wolf May 09 '13 at 20:24
No problem, I could see what you were attempting to achieve in the code, glad I could be of some assistance. – David Barker May 09 '13 at 20:28

Using jQuery to modify CSS: Not Affecting CSS Consistently

1 Answers1