Re-size a div style respect to browser window width and height - Jquery

Question

I'm trying to change browser width and height into .test div. whenever I re-size the browser the current value should change.

$(document).ready( function() { window.onresize = function(event) { resizeDiv(); } function resizeDiv() { var vpw=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var vph=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight; $(‘.test’).css({‘height': vph + ‘px’}); } );

.test { background: green; padding: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="test"></div>

You'd be better of with $(‘.test’).height(vph);

lshettyl
– lshettyl

2015-04-02 11:22:33 +00:00
Commented Apr 2, 2015 at 11:22 — lshettyl
– lshettyl, Commented Apr 2, 2015 at 11:22

Aram Mkrtchyan · Accepted Answer · 2015-04-02 11:41:30Z

3

Example

example

js

function resize() { $(".test").css({ width: $(window).width(), height: $(window).height() }); } resize(); $(window).resize(function(){ resize(); });

if you want minus some pixels

function resize() { $(".test").css({ width: $(window).width() - 15, height: $(window).height() - 15 }); }

edited Apr 2, 2015 at 11:41

answered Apr 2, 2015 at 11:21

Aram Mkrtchyan

2,7104 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Azzah Over a year ago

Working well. I have some more doubt?

Azzah Over a year ago

Nothing wrong. I want minus some px from this width and height. how can i achieve this.

Azzah Over a year ago

Thanks for your time. and how can i get some div's height and width on re-size?

Aram Mkrtchyan Over a year ago

select the div width class /var width = $(".bllock").width();/ and put it on resize function and after that you can get thw width

Azzah Over a year ago

I need one more help Aram.

Marius · Accepted Answer · 2015-04-02 11:19:56Z

1

Uncaught SyntaxError: Unexpected token ILLEGAL

You use ‘ and ’. In order that your script to run you need to use ' or ".

answered Apr 2, 2015 at 11:19

Marius

913 bronze badges

1 Comment

websky Over a year ago

Yes, $(‘.test’).css({‘height': vph + ‘px’}); ==> $(‘.test’).css({‘height', vph + ‘px’});

kleinohad · Accepted Answer · 2015-04-02 11:36:50Z

Best practice for what you are asking is to use responsive design: http://responsivedesign.is/examples/playgrounds-and-sandboxes/lots-of-donuts

for example:

@media only screen and (min-width: 1300px) { #divId {width:1000px;}} @media screen and (max-width: 860px) {#divId {width:800px;} } @media screen and (max-width: 650px) { #divId {width:600px;}} @media screen and (max-width: 480px) { #divId {width:400px;}}

I dont want css solution. because am doing some what different use.

Collectives™ on Stack Overflow

Re-size a div style respect to browser window width and height - Jquery

3 Answers 3

5 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Related