Adding border when window is resized?

My page is auto centered when some with a monitor bigger than what I developed for views the page. I want to add a left border to my left div tag when the screen is over a certain size.

Here's what I have:

the div tag is this:


<div class="left"></div>


css

.left{
width: 240px;
min-height: 548px;
background: #97D38B;
float: left;
border: 0px;
border-bottom: 2px;
border-style: solid;
border-collapse: collapse;
border-color: #0F5400;
}



javascript:


window.onresize=resized;
window.onload=resized;
function resized(){
if (window.innerWidth)
{
screenWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
screenWidth=document.documentElement.clientWidth;
}
else if(document.body)
{
screenWidth=document.body.clientWidth;
}

if (screenWidth<=1015)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';

if (screenWidth>1015)
document.getElementById('left').style.borderLeft = '2px';
}


The last bit of code document.getElementById('left').style.borderLeft = '2px'; doesn't seem to work.

Hi

Here's what I have:
the div tag is this:

<div class="left"></div>

if (screenWidth>1015)
document.getElementById('left').style.borderLeft = '2px';
}




In your code the div has no Id 'left'.


Just an idea

You could create a new class and change to that --- still need to give the div and id though.

var styleLrg = document.getElementById('left');
styleLrg.className = "newClassName";

LT

Hi

In your code the div has no Id 'left'.


Just an idea

You could create a new class and change to that --- still need to give the div and id though.

var styleLrg = document.getElementById('left');
styleLrg.className = "newClassName";

LT

Thanks. I never use ID tags in html so that always throws me off.

Anyway, I just did it with CSS, by adding the border, and positioning it off the screen to the left by the equivalent pixels of the border width.

i.e; border-left:2px; position: relative; left: -2px;

So then it becomes visible on the window resize.

Hi HDRebel88

Cool -- whatever works eh:thumbsup:

LT