Setting a fixed height and width for a

Question

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="300px";
    ob.style.width = "200px";               
}

Here rowScroll is the <div> id. The above code is working properly. But the following code is not working:

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="30%";
    ob.style.width = "20%";             
}

How can I get this working with percentages?

*'Not working'* doesn't say anything about the problem; in general, explain what you are expecting to happen, and what is actually happening. In this case, the latter is probably sufficient. — nbrooks, Jan 31 '13 at 06:55
can I ask why you are doing this with a JS function and not using CSS ? — SQLGuru, Jan 31 '13 at 06:55

score 0 · Answer 1 · answered Jan 31 '13 at 07:09

You will need to use a div tag to achieve this. See the working code below:

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("b1").style.height="200%";
}
</script>
</head>
<body>

<div style="height:25px;">
<input type="button" id="b1" onclick="displayResult()" value="Change height of button" >

</body>
</html>

score 0 · Answer 2 · answered Jan 31 '13 at 07:09

What if you "tell" it what are these percentages from. like

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height = (container-width * 30)/100 + "px"
    ob.style.width = (container-width * 20)/100 + "px"             
}

score 0 · Answer 3 · edited May 23 '17 at 11:49

FYI percentage based width height depends upon parent container of your element 'rowScroll'. Try giving height, width info to the parent itself...

UPDATE:

for making height width 50% of screen following will do:

function windowHW() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myHeight,myWidth];
}
function scrollfun()
    {
        var ob = document.getElementById('rowScroll');
        document_dimension = windowHW();
        ob.style.height =document_dimension[0]/2;
        ob.style.width =document_dimension[1]/2;
    }

Please note that function windowHW is slight modification of solution given in:

stackoverflow question: JavaScript - Get Browser Height answered by meder

height of the div should be 50% or 60% of height of the screen or window — user1429962, Jan 31 '13 at 07:16
This is not an answer. To request additional information or suggest a modification, post a *comment* below the original post. The *Answer* section, is reserved for answers (or at least attempts to answer) the problem posed in the question. — nbrooks, Jan 31 '13 at 07:30
i kept that as an answer : 'percentage based width height depends upon parent container of your element 'rowScroll'. Try giving height, width info to the parent itself.' — Mrigesh Raj Shrestha, Jan 31 '13 at 07:31

score 0 · Answer 4 · edited Jan 31 '13 at 07:29

0

just use the property className from javascript

function scrollfun()
{
   document.getElementById("rowScroll").className = "MyClass";      
}

And in your css

.MyClass{height:30%;width:20%;}

edited Jan 31 '13 at 07:29

nbrooks

18,126
5
54
66

answered Jan 31 '13 at 07:11

Krish

2,590
8
42
62

there's no difference betweem doing this and what he is doing – He Hui Jan 31 '13 at 07:12
You can target an element using its ID, no need to add a class. `#rowScroll{height:30%; width:20%;}` – nbrooks Jan 31 '13 at 07:28
@HeHui : Doing it with the support of CSS, Because of OP can't achieve with the values using javascript – Krish Jan 31 '13 at 07:47

Setting a fixed height and width for a

4 Answers4