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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hideing a column for certain screen resolution?

    Hi,

    I have created a site using CSS. It contains three columns with the middle column being adjustable in width. The problem that I have come across is when this site is being viewed with a 800x600 resolution the last column on the right is placed under the middle column so it looks all jumbled together.

    Is there a way to hide that column when someone with a screen resolution of 800x600 or lower views the page? But of course the column should stay with the higher resolutions.

    Here is the url to the page I'm working on:

    http://mywebpages.comcast.net/angelfyre20/test_01.html

    The column I'm reffering to is the one with the weather box and picture.

    Thanks for any help that may be provided.
    Verity

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please see the file in the zip.
    Attached Files Attached Files

  • #3
    New Coder
    Join Date
    Sep 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mr. J.

    The only other thing is I also want that picture to disapper as well. If the screen resolution is below 1024.

    Code:
    <script>
    function init(){
    w=screen.width
    if(w!=1024){
    document.getElementById("navBeta").style.display="none"
    }
    }
    window.onload=init
    </script>
    So would I just add another line like this:

    document.getElementById("navBetaB").style.display="none"

    under the previous one?

    Also one other thing, I would like those two elements to show up with the 1152 and 1280 screen resolutions. So would I add more:

    if(w!=1152)

    and so on??

    Thanks for all your help.
    Verity

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Yes, just add

    document.getElementById("navBetaB").style.display="none"


    They will then only be displayed if the screen resolution is not 800 X 600

  • #5
    New Coder
    Join Date
    Sep 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!

    However there is one thing though, when I browse the site at 1280 those two things do not show up. The only resolution they do show up on is 1024.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Oops sorry


    Change this line

    if(w!=1024){


    to


    if(w<1024){

  • #7
    New Coder
    Join Date
    Sep 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, ok. I'll try that then.

    Although I applied a fix myself and it seems to be working. I used the else statement but I'll try what you wrote.

    Thanks again,
    Verity

  • #8
    New Coder
    Join Date
    Sep 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I applied what you wrote and got a syntax error.

    But all is ok though, because when I use the else statement it works, and I don't have any syntax errors.

    So thanks for helping me get this far, I appreciate it.

    Verity

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    If you post a copy of the script as you have it now I should be able to tell you why you get the error


  •  

    Posting Permissions

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