CODEWITHSUNDEEP
jquerywidthviewportstretch
Maxim Siebert
Maxim Siebert

Reputation: 307

Jquery to get the width between left viewport to a specific div on my page

I'm trying to get a panel that has a position of absolute on the left of my viewport to have a width that goes all the way to a specific div centered on my page, I need this div to have a dynamic width according to the viewport size considering my site is responsive.

here is a quick fiddle of my problem, there is no javascript since I am not sure how to go about this, thought you guys could help me out or point me in the right direction.

http://jsfiddle.net/jA3JU/3/

Using width:40% works fine for the start, but once you play around with the width of the viewport 40% becomes to small.

#square {
background-color:#000;
height:200px;
width:200px;
margin:auto;
}
#mask {
background-color:#000;
height:100%;
width:40%;
position:absolute;
left:0;
top:0;
}

I need the width of #mask to be the exact size from the left of the viewport to the left of #square.

Thanks in advance

Upvotes: 1

Views: 344

Answers (1)

Christopher Marshall
Christopher Marshall

Reputation: 10736

Not sure if the fiddle doesn't like my window.outerWidth line, but something like.

var sizingMaskDiv = function () {
    var squareWidth = $('#square').width(),
        maskWidth = (window.outerWidth - squareWidth) / 2,
        finalWidth = maskWidth - squareWidth;

        $('#mask').css('width', finalWidth + "px");
}
// Sets initial width
sizingMaskDiv();

$(window).resize(function() {
 //on window resize, run function (can get slow)
 sizingMaskDiv();
});

http://jsfiddle.net/jA3JU/17/

​

Upvotes: 1

Related Questions