How can I hide some ID elements using Javascript if the browser window is less than a given size?
<p>I have been looking for an answer to this problem for hours and can't find anything that works.</p>

<p>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.</p>

<p>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)</p>

<p>I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.</p>

<p>The id of the image I'm trying to hide is #go2.</p>

<p>here is  a part of the script I have been trying to get to work:</p>

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

if (viewportwidth &lt;1056)document.getElementById('go2').style.display = 'none';
</code></pre>

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

<p>I am very new to javascript and jQuery and wouold appreciate any help.</p>

<p>Thanks.</p>
