Adding border when window is resized?

HDRebel88 · 05-20-2012, 05:25 AM

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:

Code:

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

css

Code:

.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:

Code:

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.

low tech · 05-20-2012, 06:34 AM

Hi

Quote:

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

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

Code:

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.

Code:

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

LT

HDRebel88 · 05-20-2012, 06:39 AM

Quote:

Originally Posted by low tech

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.

Code:

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.

low tech · 05-20-2012, 06:46 AM

Hi HDRebel88

Cool -- whatever works eh

LT