Changing CSS via Javascript if... [Archive]

mike245

02-29-2008, 07:07 PM

http://img.skitch.com/20080229-k4hyjyu6qtgauhybiuiy3u9qa2.jpg

I have a website with a sidebar and a main content box. I do not want the shared part of the 1px border to overlap (in to 2px), as it will look ugly. But if I do a simple "border-right: none" in CSS, if the height expands over the content box, it will have no border. Does anyone know how to make a JavaScript that basically says:

if (sidebar_length > contentbox_length)
{
CSS.contentbox = (border-left: none;)
} else {
CSS.sidebar = (border-right: none;)
}

Thank you! All help is greatly appreciated!

rangana

03-01-2008, 05:08 AM

...I thought this would be possible.
See this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function fixHeight(left,right)
{
if (document.getElementById(left))
{
var leftheight=document.getElementById(left).offsetHeight;
var rightheight=document.getElementById(right).offsetHeight;
var setheight = Math.max(leftheight, rightheight);
document.getElementById(left).style.height=setheight+"px";
document.getElementById(right).style.height=setheight+"px";
}
}

window.onload=function(){
fixHeight('sidebar_length','contentbox_length');
}
</script>
<style type="text/css">
#wrap
{
width:760px;
background:#222;
margin:1px auto;
font-family:tahoma;
font-size:10pt;
padding:5px;
}
#sidebar_length {
width:300px;
background: #efefff;
float:left;
padding:5px;
}
#contentbox_length {
width:300px;
background: blue;
color:white;
float:right;
text-align:center;
padding:5px;
}
</style>
<body>
<div id="wrap">
<div id="sidebar_length">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur non quam vel magna lobortis ornare. Nunc varius sollicitudin orci. Ut orci elit, imperdiet in, mollis luctus, tempus at, nisi. Nulla gravida neque euismod lacus. In vel nisl. Sed commodo. Maecenas enim ligula, ullamcorper vitae, condimentum at, tempus ut, massa. Dleftc velit. Sed velit nisi, pretium sit amet, adipiscing sit amet, aliquet et, quam. Morbi luctus, tellus eu consectetuer placerat, leo neque sollicitudin orci, et egestas orci pede vitae velit. Suspendisse nisl. Sed et augue.
</div>

<div id="contentbox_length">
Equal right?
</div>

</div>
</body>
</html>

See if it helps :D