CODEWITHSUNDEEP
javascriptjquerycss
Dancer
Dancer

Reputation: 17701

Make div size of parent on resize

Is it possible to make a div the size of its parent on window resize?

I currently have the following html

<div class="sliderContainer">
    <div id="cyler">
        <div class="cy1" style="background-image:url(images/Keggy_Banner_Ie.jpg); background-position:center center; background-size:2000px 390px;  height:390px;"></div>
        <div class="cy1" style="background-image:url(images/Bravissimo_Banner_ie.jpg); background-position:center center;  background-size:2000px 390px; height:390px;"> </div>
        <div class="cy1" style="background-image:url(images/Radley_Banner_ie.jpg); background-position:center center;  height:390px;"> ></div>
        <div class="cy1" style="background-image:url(images/Tiger_Banner_ie.jpg); background-position:center center; height:390px;"></div>
    </div>
</div>

The sliderContainer class has a max width of 2000px and a min width of 1000px (oveeflow hidden)

Currently the .cy1 divs load at full window size and the image is centered - which is cool - but If I resize the .cy1 divs - they remain at the original window width.

I have tried the following JS to detect for screen re-size and apply the width of the screen to the div - to make it stretch to its parents size (the first part of the script ensures it only triggers once on resize complete), but i'm having no luck with that either - any suggestions?

var sizl = $(window).width();
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        $("#cycler .cy1").width(sizl);
    }, 500);
});

Upvotes: 0

Views: 187

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24733

You could you set it like this:

  var windowWidth = $(window).width();
  $('#cycler .cy1').css({'width':windowWidth});

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

Calculate window width inside your resize function

$(window).resize(function () {
    delay(function () {
        var sizl = $(window).width();
        $("#cycler .cy1").width(sizl);
    }, 500);
});

Upvotes: 2

Related Questions