CODEWITHSUNDEEP
javascriptjqueryhtml
kim
kim

Reputation: 21

Javascript/jQuery runs too fast - works on reloading page

I'm building a liquid website. It's been a hell if you work with some images in it. Either IE has an issue, or FF or Chrome.

I'm having an issue again. Basicly I'm building the website at runtime trough javascript. I'm setting the width first of everything. After that I'm setting the height of the main container. (otherwise there are breakout issues with the images).

Now my issue is: if i execute the webpage locally it works in all the 3 browsers. If I execute it online it doesn't set the height of the main container (which contains everything). (var wrapperHeight = objLogo.offsetHeight; -> returns 0)

If I refresh the webpage, everything looks normally and the above line returns the valid height... I'm using this together with a simple jquery script to flip divs (however this comes after my simple script).

Note: also I'm using a rather big background image on the body, this is set in css.. 2nd note: it only occurs in Chrome...

Code:

<head>
    <title></title>
    <link rel="stylesheet" href="css/default.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jquery.quickflip.js"></script>
    <script type="text/javascript">
        $('document').ready(function(){
                            //getting inner width/height
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;

                            //getting width for the main container
            var wrapperWidth = schermBreedte*0.641;

                            //getting width for left and right div in main container
            var totalWrapperWidth = wrapperWidth - 40;
            var widthLeft = totalWrapperWidth*0.345;
            var widthRight = totalWrapperWidth*0.655;

                            //getting elements
            var objOrange = document.getElementById('orange');
            var objGreen = document.getElementById('green');
            var objFliptabs = document.getElementById('flip-tabs');
            var objLeft = document.getElementById('left');
            var objRight = document.getElementById('right');
            var objContent = document.getElementById('content');
            var objLogo = document.getElementById('main_logo');
            var objV_line = document.getElementById('v_line');

                            //setting main container (objOrange & ObjGreen are 2 main containers used for the flip jquery script, they are actually placed above eachother (see jquery ref above and script beneath)
            objOrange.style.width = wrapperWidth + "px";
            objGreen.style.width = wrapperWidth + "px";
            objFliptabs.style.width = wrapperWidth + "px";

                            //setting the left & right div
            objLeft.style.width = widthLeft + "px";
            objRight.style.width = widthRight + "px";

                            //this logo is placed in the left div. The actual main container height is determined by getting the height of this logo after setting the width
            objLogo.style.width = (widthLeft-20)+"px";

                            //the right div is splitted into two pieces: a top which contains 6 images and a bottom which contains 1 image, the objectContent refers to the bottom as the top height is set dynamically by setting the width of the 6 images in %
            objContent.style.width = widthRight  + "px";

                            //getting the height for the main container by getting the height of the image (we've set the width of the image earlier - see above - so that it is scaled proportionally)
            var wrapperHeight =  objLogo.offsetHeight;
                            //setting the height of the main containers
            objOrange.style.height = wrapperHeight + "px";
            objGreen.style.height = wrapperHeight + "px";

                           //setting the height of a 1px line next to the left div
            objV_line.style.height = 100 + "%"

                            //getting the height of the content div (=2nd and bottom div of the right div)
            var contentHeight = wrapperHeight*0.445;

                            //setting the height
            objContent.style.height = contentHeight + "px";

                            //another line
            var length = parseInt(document.getElementsByTagName("div")["right"].offsetWidth) - 20;
            var line = document.getElementById('hor_lijn');
            line.style.width = lengte + "px";   

            $('#flip-container').quickFlip();
            $('#flip-navigation li a').each(function(){
                $(this).click(function(){
                    $('#flip-navigation li').each(function(){
                        $(this).removeClass('selected');
                    });
                    $(this).parent().addClass('selected');
                    var flipid=$(this).attr('id').substr(4);
                    $('#flip-container').quickFlipper({ }, flipid, 1);
                    return false;
                });
            });


        });
    </script>
</head>

Upvotes: 2

Views: 2702

Answers (2)

Skylar Anderson
Skylar Anderson

Reputation: 5703

When document.ready is fired, the browser doesn't necessarily have the images in memory in order to determine their height/width.

One options is to instead put your resize logic inside of a $(window).ready() rather than $(document).ready(). The difference between the two being that window.ready will wait for all contents to be loaded.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

It looks like you need to wait to run that code until the images are loaded so that their sizes are known and so the height can be calculated correctly.

Try using this jQuery plugin:

https://github.com/desandro/imagesloaded

$(document).ready(function() {
    $('#my-image-container').imagesLoaded(function() {
        /* your code here */
    });
});

Upvotes: 3

Related Questions