Question

Someone please tell me why the following script only works to the first “else if” statement?

Even if the width is below 800px I still get the 900px settings.

Here is the live code http://jsbin.com/iranof/2/

<script type='text/javascript'>
$(document).ready(function(){ 

var window_width = $(window).width();  

if (window_width >= 900){
$('#adSize').attr('id','largeRectangle');    
}
else 
  if (window_width <= 800)  
  {
$('#adSize').attr('id','mediumRectangle');
}  
else 
  if (window_width <= 700)  
  {
$('#adSize').attr('id','square');
}  
else
  if (window_width <= 600)  
  {
$('#adSize').attr('id','smallSquare');
}  
else if (window_width <= 480)
{
$('#adSize').attr('id','mediumRectangle');
} 
});
</script>

Answer 1

700 <= 800. If window_width is less than 800, the first else if check will return true – and so its body will be invoked; all the other else if will be ignored.

Rebuild your code so that <= checks deal with increasing numbers:

else if (window_width <= 480) { ... }
else if (window_width <= 600) { ... }
else if (window_width <= 700) { ... }
else if (window_width <= 800) { ... }