CODEWITHSUNDEEP
javascriptjquery
Duc Anh
Duc Anh

Reputation: 581

resize div on window resize

I have this code 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
html,body {
    width: 100%;
    margin: 0;
    padding: 0;
}

#main {
    margin: 0 auto;
    width: 963px;
    height: 642px;
}
#preload {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.loading {
    position:absolute;
    top: 43%;
    left: 47%;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>
    <div id="main">
        <img id="preload" src="preload.png"/>
        <img class="loading" src="../effects/loading icon/loading3.gif" />
    </div>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../player/player.js"></script>
    <script type="text/javascript" src="pic1.js"></script>
    <script>
    $(document).ready(function() {
        $(window).on('resize', function(){
            var maxWidth = $(window).width();
            var maxHeight = $(window).height();
            var ratio = $("#main").height() / $("#main").width();

            if(maxWidth * ratio > maxHeight) {
                $("#main").height(maxHeight);
                $("#main").width(maxHeight / ratio);
            } else {
                $("#main").width(maxWidth);
                $("#main").height(maxWidth * ratio);
            }
            $("#preload").width($("#main").width());
            $("#preload").height($("#main").height());
        }).trigger('resize');
    })(jQuery);
    </script>
</body>
</html>

What I want is the div and the img inside to auto resize with window resize. The problem is, on 1st time page load, there is a blank space below the div like Picture 1, and when I resize window the space disappear like you can see on Picture 2. Why there is space in Picture 1 and how can I fix it, tks so much :) Picture 1

Picture 2

Update Jsfiddle : http://jsfiddle.net/7bNjf/

Upvotes: 5

Views: 9427

Answers (5)

uingtea
uingtea

Reputation: 6524

you bind only on "resize" try bind with "load"

$(window).on('load resize', function()....

Upvotes: 0

himadri
himadri

Reputation: 638

Your image is inside a div name #main and in CSS you specify the height width of the #main div.

So I think your image have smaller height than the #main div height. After the resize the window you change the height of the #main div using jQuery. I think the same height of image and #main div solves your problem at first time load

Upvotes: 0

user1693593
user1693593

Reputation:

Refactor the code so that the image.onload calls the resize function initially.

<img id="preload" src="preload.png" onload="resizeImage()" />

In the script section:

function resizeImage() {
    //calculations here...
}

window.addEventListener('resize', resizeImage, false);

(using vanilla JS for illustration where the key-parts you need to change are.. modify as needed).

This implies of course (?) that resizeImage() is also called in the onload/onready event for the window.

Upvotes: 5

Rich Wagenknecht
Rich Wagenknecht

Reputation: 712

When you're resizing the image you're preserving the aspect ratio. If the calculated image height is less that the window height, the image will be "docked" against the top left corner of it's enclosing div given the styling you used (position: absolute; top: 0; left: 0)

The only way you can get it to always fill it's enclosing div is to either clip it or to stretch it and lose it's aspect ratio.

Another alternative is to center the image vertically.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

Seems like an answer so I'll put it here:

On DOM ready the images are still loading :) Put your logic into a function, and reuse that function inside window .resize and .load:

jQuery(function( $ ) {


     function resizzler(){
        var $main = $('#main');
        var maxWidth = $(window).width();
        var maxHeight = $(window).height();
        var ratio = $main.height() / $main.width();

        if(maxWidth * ratio > maxHeight) {
            $main.height(maxHeight).width(maxHeight / ratio);
        } else {
            $main.width(maxWidth).height(maxWidth * ratio);
        }
        $("#preload").width($main.width()).height($main.height());
    }

    $(window).on('resize load', resizzler );

});

Upvotes: 1

Related Questions