Having problems with the jQuery plugin and image

advertisements

I am working on a jquery plugin, to create columns in a grid, and I am having difficulty with images. I am not sure if it is some sort of css that needs to change or if the javascript is running too soon. Here is the html:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
    <script src="gridilizer.js"></script>
    <script>
            $(document).ready(function() {
                    $(this).gridilizer();
            });
    </script>
    <style>
    body, html {
        padding:0;
        margin:0;
    }
    header {
        background:#dcd;
        height:200px;
        font-size:100px;
        text-align:center;
        line-height:200px;
    }
    [data-rows] {
        background:#dcdcdc;
    }
    </style>
    </head>
    <body>
    <header>
            GRIDILIZER.JS
    </header>

    <div class="row">
        <div data-rows="7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="5">
            test8
        </div>
    </div>

    <div class="row">
        <div data-rows="12">
            <img width="50%" src="http://images.wikia.com/powerlisting/images/b/b9/Mountain_wallpaper_005_1024.jpg" />
            <p>Image</p>
        </div>
    </div>

    <div class="row">
        <div data-rows="3">
            <h1>Headline</h1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            test4
        </div>
        <div data-rows="3">
            test4
        </div>
    </div>
    </body>
    </html>

And my javascript:

(function($){
$.fn.extend({
    gridilizer:function(){
        // Style Row Here
        $(".row").css({
            'width':'95%',
            'margin':'2% 2.5%',
            'display':'block',
            'float':'left'
            //'min-height':'200px'
            //'height':'auto',
            //'overflow':'hidden'
        });
        //Get Elements with data-rows property
        elem=$("[data-rows]");
        // Set background color for border hack
        color=$('body').css("background-color");
        if(color='rgba(0,0,0,0)'){
            $('body').css('background-color','#fff')
        }
        // Style each grid element
        return elem.each(function(){
        $this=$(this);
        //Get number of rows
        rows=$this.attr('data-rows');
        //Math to find number of rows in a 12-grid area
        width=(rows/12*100);
        //Set border to background color
        background=$this.parents(":not(.row)").css("background-color");
        $this.css({
            'width':width+'%',
            'display':'block',
            'float':'left',
            'padding':'2% 5%',
            'border':'10px solid '+background,
            '-webkit-box-sizing':'border-box',
            '-moz-box-sizing':'border-box',
            'box-sizing':'border-box'
            });
        console.log($this.parent('.row').height());
        height = $this.parent().height();
        $this.height(height);
            });
        }
    });
})(jQuery);


It could be because you are calling your plugin before the DOM has fully loaded. The way the browser parses html code is from top to bottom. SO it hits your function call first then renders the DOM. Depending on how long it takes to execute your plugins function, the DOM may not be fully loaded by the time the whole page loads. Try, moving the call to the bottom, right before the end body tag (). You can still leave declarations in the . Let me know how it goes.