Dynamically calculate a div width

JavaScript
1

Hi,

Here are sample divisions:

<style type="text/css">
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>

<div id="grandparent">

<div id="parent">

<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>

</div>

</div>

The <div class=“child”> width value is always 10 pixels less than <div id=“parent”> width value. How can it be calculated so any width value is given to <div id=“parent”>, its child gets 10 pixels less than that?

Any help is very much appreciated!
Mike

2

I’m not certain about javascript however this can be done very easily in jQuery:

$(document).ready(function(){

     var gWidth = 100,
          pWidth = giwdth - 10,
          cWidth = pWidth - 10;

     $('#grandparent').css('height', gWidth+'px');
     $('#parent').css('height', pWidth+'px');
     $('.child').css('height', cWidth+'px');

}

This is basically dynamically setting the parent and child width to be 10px less than their parent respectively.

3

Thanks for the answer, but I’m looking for a basic JavaScript solution. :slight_smile:

4

Ah I see.

Hmm… well, off the top of my head, I don’t recall any way that you can directly control the values of a css attribute like width. It has been a while since I’ve used straight javascript, though.

best of luck in finding your answer.

5

Here is a script that does the job. You need to create a style element and then append the rule to the element. In IE browsers the rule becomes the cssText. In non-IE browsers it is the innerHTML. I have added the new style element to the head of the document, although it works equally well in the body.

You will notice that the child class is no longer shown. This is because I applied your styles to all of the child divs in the id=parent div by using the selector #parent div (any div within div id=parent). This avoids repetition in the script.

You can change the base width of the divs by altering the setWidth in the top of the script, marked “<<<< SET WIDTH HERE”.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Append Style Rule</title>
<script type=“text/javascript”>
<!–
var gObj, pObj; setWidth=250; // global <<<< SET WIDTH HERE
window.onload=function(){
// set style width on page load
gObj=document.getElementById(“grandparent”);
pObj=document.getElementById(“parent”);
gObj.style.width=(setWidth+20)+“px”;
pObj.style.width=(setWidth-20)+“px”;
// append new style rule to document
var setStyle = document.createElement(‘style’);
setStyle.setAttribute(“type”,“text/css”);
// this is the new rule
var cssNewTxt=‘#parent div { overflow:auto; clip:auto; color:#F00; width:’+(setWidth-50)+“px;”+’ border:1px solid #0FF; }';
//
if( typeof setStyle.styleSheet !=“undefined”) // IE
{ setStyle.styleSheet.cssText=cssNewTxt; }
else
{ setStyle.innerHTML=cssNewTxt; } // NON IE
//
// put new style element in head of document
document.getElementsByTagName(“head”)[0].appendChild(setStyle);
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#grandparent { position:relative; top:0px; left:0px; margin-left:100px; height:500px; border:1px solid #F00; text-align:left; }
#parent {overflow:auto; height:100px; border:1px solid #00F; }
–>
</style>
</head>

<body>

<div id=“grandparent”>
<div id=“parent”>
<div>
100000000000000000</div>
<div>
1000000000000000000000000</div>
<div>
10000000000</div>
<div>
1000000000000000000000000</div>
<div>
1000000000000000000000000</div>
<div>
1000000000000000000000000</div>
<div>
1000000000000000000000000</div>
</div>
<!-- end parent –>
</div>
<!-- end grandparent –>

</body>

</html>

6

Thanks Allan! :slight_smile: