No replies
lisa15's picture
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2011-04-15
Posts: 4
Points: 8

I am almost finished with designing a website, and I'm trying to tackle the problem of what happens when a window is resized smaller than "normal."

I figured I would try to solve the problem by using JavaScript to just hide certain elements when the window is smaller than 1024. However, the JavaScript code I came up with hasn't worked so far.

Now when the window gets too small, the three elements appear in the wrong places.

I'm not an expert at JavaScript, so I was hoping someone could take a look at what I've come up with and see if they could spot a problem, or perhaps offer an alternate solution that doesn't involve JavaScript for hiding certain elements when a screen is too small...possibly involving the position of the three elements in question...

So in the header of my template page is the following JS code:

<script type="text/javascript">
$(document).ready( function(){
// $(window).load(function() { alert('The window is loaded!'); });
$(window).bind("resize", resizeWindow);
  function resizeWindow( e ) {
    if ( == false) 
      $foo = $(window).width();
      if ($foo < 1024) 
        $('#staple1, #staple3').css({"right": "0px", "visibility": "hidden"});
	    $('#staple2').css({"left": "0px", "visibility": "hidden"});
        $('#staple1, #staple3').css({"right": "-35px", "visibility": "visible"});
	    $('#staple2').css({"left": "-20px", "visibility": "visible"});
Then in my stylesheet, for the 3 elements above (staple1, staple2, and staple3), I have:
#staple1 { 
	right: -30px; 
	bottom: 0; 
	height: 34px; 
	width: 56px; 
	background: url(images/staple1.png) no-repeat;
#staple2 { 
	left: -20px; 
	top: 60px; 
	height: 24px; 
	width: 54px; 
	background: url(images/staple2.png) no-repeat; 
#staple3 { 
	right: -35px; 
	top: 100px; 
	height: 30px; 
	width: 60px; 
	background: url(images/staple3.png) no-repeat;