How to Change a div width when size of browser window change with javascript

Question

How to Change a div width when size of browser window change with javascript (no jQuery)? I want to perform this job dynamically when user resize his browser. Please help, Immediately ... any suggestion for this job with css?

Have you read up on the resize event? What have you tried so far? developer.mozilla.org/en-US/docs/Web/Reference/Events/resize — Mathias
– Mathias, Commented Mar 25, 2014 at 14:47
You should use CSS for as simple a task as this because under heavy load, CSS performs much better jQuery. — Gaurang Tandon
– Gaurang Tandon, Commented Mar 25, 2014 at 14:49
Why would you do this via Javascript? use CSS. You can do something like div { width: 80%; } that will resize depending of the size of the window, keeping the div at 80% of the window. If not that you can look into Media Queries — Ruddy
– Ruddy, Commented Mar 25, 2014 at 14:50

SSMA · Accepted Answer · 2014-03-25 14:50:08Z

2

Use percentage. for example width="50%" This will change the width when browser size change.

answered Mar 25, 2014 at 14:50

SSMA

4971 gold badge7 silver badges20 bronze badges

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

1 Comment

misagh01 Over a year ago

this code doesn't work for me because the parent of div element has fixed width and shoulde has a fixed width.

rafaelcastrocouto · Accepted Answer · 2014-03-25 14:51:49Z

2

You can either set this with CSS or Javscript

CSS would be easily done using %'s ie

div {
    width: 95%;
}

JS would be easily done using

var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
    element.style.width = window.style.width;
});

edited Mar 25, 2014 at 14:51

rafaelcastrocouto

12.2k3 gold badges41 silver badges67 bronze badges

answered Mar 25, 2014 at 14:50

Dean Meehan

2,66724 silver badges39 bronze badges

1 Comment

Dean Meehan Over a year ago

What exactly doesnt work? jsfiddle would be great to help you out

Nillervision · Accepted Answer · 2014-03-25 15:32:58Z

This code should work in all browsers. But you really should use CSS instead.

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf8" />
    <title>untitled</title>
</head>
<body>
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div>

<script type="text/javascript">
var myElement = document.getElementById('myDiv');
function detectWidth(){
    var myWidth = 0;
    if(typeof (window.innerWidth)== 'number'){
        myWidth = window.innerWidth; 
    }
    else {
        myWidth = document.documentElement.clientWidth;  //IE7
    }
    myElement.style.width=myWidth-300+'px';
}
window.onload=function(){
    detectWidth();  
};
window.onresize = function (){
    detectWidth();
};
</script>
</body>
</html>

Collectives™ on Stack Overflow

How to Change a div width when size of browser window change with javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related