How can I hide some ID elements using Javascript if the browser window is less than a given size?

I have been looking for an answer to this problem for hours and can't find anything that works.

I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.

I have a script for returning the window size and putting that value into a variable. I have got it to show a message if the variable value is less than 1056. (for testing)

I have seen ways how to 开发者_如何学编程make things visible or not with jQuery and and with Javascript but none of them work for me.

The id of the image I'm trying to hide is #go2.

here is a part of the script I have been trying to get to work:

if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');

if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';

I have had to use {literal} tags as the pages are using SMARTY templates!

I am very new to javascript and jQuery and wouold appreciate any help.

Thanks.

To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:

jQuery(window).resize(function() {
   if(jQuery(window).width() < 1056) {
      jQuery(".hide-these").hide();
   }
});

You can do, with jQuery:

if(viewportwidth <1056) {
    $('.target').hide();
}

Also, you can hide the elements with CSS3, like so:

@media only screen and (min-width: 1056px) {
    #go2 {
        display:none;
    }
}

CSS3 media queries do what you want without Javascript, however browser support is pretty patchy: http://www.w3.org/TR/css3-mediaqueries/

Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries: http://www.ilovecolors.com.ar/detect-screen-size-css-style/

If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.