Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    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:

    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.

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi

    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
    Last edited by low tech; 05-20-2012 at 06:39 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • Users who have thanked low tech for this post:

    HDRebel88 (05-20-2012)

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by low tech View Post
    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.
    Last edited by HDRebel88; 05-20-2012 at 06:41 AM.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi HDRebel88

    Cool -- whatever works eh

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •