PDA

View Full Version : Changing width of elements

bleep
10-11-2007, 07:29 AM
Hi,

I have the following XHTML:


<div id="navcontainer">
<ul id="navlist">
<li><a href="link1/">Is it for you?</a></li>
<li><a href="link2/">Starting a Business</a></li>
<li><a href="link3/">Planning</a></li>
<li><a href="link4/">Networking</a></li>
<li><a href="link5/">Support</a></li>
<li><a href="link6/">Running a business from home</a></li>
<li><a href="link7/">Planning</a></li>
<li><a href="link8/">Networking</a></li>
<li><a href="link9/">Support</a></li>
<li><a href="link10/">Running a business from home</a></li>
</ul>
</div>


Using JS, I'd like to get the number of lis within #navlist, and set the width of each to 700/the number of lis.

Can anyone give me some pointers? I'm not usually a JS coder, so please be gentle!

TIA.
diades
10-11-2007, 08:22 AM
Hi Bleep

Take a look at this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Keith Parker (diades)" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
onload = function()
{
//get the child list objects that
//you want to manipulate
var arrLi = document.getElementById("navlist").getElementsByTagName("LI");
//Calculate the width that
//you want and round the
//figure to take care of decimals
var iWidth = Math.round(700 / arrLi.length);
//loop through all the list elements
for(var i = 0;i < arrLi.length;i++)
{
//set the width
arrLi[i].style.width = iWidth +"px";
}
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
li{
/*
This will force any overlap to hide
and not extend the list object
*/
overflow:hidden;
/*
This is just here to show the
width aplied
*/
border:1px solid black
}
/*]]>*/
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="link1/">Is it for you?</a></li>
<li><a href="link2/">Starting a Business</a></li>
<li><a href="link3/">Planning</a></li>
<li><a href="link4/">Networking</a></li>
<li><a href="link5/">Support</a></li>
<li><a href="link6/">Running a business from home</a></li>
<li><a href="link7/">Planning</a></li>
<li><a href="link8/">Networking</a></li>
<li><a href="link9/">Support</a></li>
<li><a href="link10/">Running a business from home</a></li>
</ul>
</div>
</body>
</html>