How to apply css dynamically by jquery with changed values?

Question

I am trying to apply width to the 'div' as per user's screen resolution. For that I am using below jquery code:

$(function() {
  var resolution = $(window).width();
  var new_width = resolution - 17;
  new_width = new_width + "px";
  $("#box").css("width", new_width);
});

I am trying to change width dynamically but its not working.

If I give values statically by using $("#box").css("width", "500px"); it will take effect and sets the width to 500px but if I use new_width instead of 500px its not changing the width of div.
How do I fix it?

daniel · Accepted Answer · 2016-02-09 19:15:17Z

1

By dynamically, do you mean on resize? Then you need the resize event:

$(window).resize(function() {
    var resolution = $(window).width();
    var new_width = resolution - 17;
    $("#box").css("width", new_width + "px");
});

edited Feb 9, 2016 at 19:15

answered Feb 9, 2016 at 19:08

daniel

1,4339 silver badges17 bronze badges

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

Comments

Vaibhav · Accepted Answer · 2016-02-09 19:02:50Z

0

By default div will take 100% width as it is block element. Make in inline block and try doing same thing.

answered Feb 9, 2016 at 19:02

Vaibhav

4472 silver badges10 bronze badges

Comments

JVXR · Accepted Answer · 2016-02-09 19:04:05Z

0

You may want to make sure that the code to set the width is tied to an event. Right now it seems to set the width on page load i.e. window's width.

answered Feb 9, 2016 at 19:04

JVXR

1,3221 gold badge11 silver badges20 bronze badges

Comments

Kingrune · Accepted Answer · 2016-02-09 19:07:53Z

0

This is what I did when I has this problem:

var Width = window.screen.availWidth; //maximizes to screen's width

this is just javascript. may not be what you are looking for instead of using $(window).width();

answered Feb 9, 2016 at 19:07

Kingrune

877 bronze badges

Collectives™ on Stack Overflow

How to apply css dynamically by jquery with changed values?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related