rabbitt rabbitt - 2 months ago 15
Javascript Question

If browser width is greater that 1000px, show images

Is it possible to get the width of the browser web view and act on it if it is greater than 1000px?

Example (in pseudocode):
If browser width is greater that 1000px;

<div style="position:fixed; top:0; left:0; z-index:1; visibility:visible;">
<img src="images/borderleft.png">
</div>

Answer

Modern Way: Media Queries

<div class="showWide">
<img src="images/borderleft.png">
</div>

// in your css file
.showWide {
   position:fixed; 
   top:0; 
   left:0; 
   z-index:1;
   visibility: hidden;
}

@media only screen and (min-width: 1000px) {
    .showWide {
        visibility: visible;
     }
}

2011 Way: JQuery

// returns width of browser viewport
if( $(window).width() > 1000)
{
  //add or unhide image.
}  

And for more information...jquery width() documentation.