Java script to detect screen resolution and apply the css file

[venkateshyeluri]

Hi,

Im working on a html5 parallax site. I have a problem with the javascript, that it is not detecting the screen resoultion thought I have right css files in my folder. My js detects for one type of screen resolution but it is not detecting the remaining screen types though I have right css files in my folder.

Below is my code. Kindly provide some solution

$(document).ready(function( ) {
$( 'body' ).append( '<div id="screencss"></div>' );
adjustCSS ( ) ;
$(window ).resize( function( ){ adjustCSS() });
}  )
function adjustCSS( ) {
var pageWidth = $(window).width ( ) ;
var sizeSelected = " ";
      if(pageWidth > 1200( px ) ) { sizeSelected = "1280"; }
     else if (pageWidth > 1300(px) ) { sizeSelected = "1366"; } 
  var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled');
 $('head').find('link[title]').not(lnk).attr('disabled', 'disabled');
 }

thank you.

[JameB]

Take a look at following piece of code and adjust yours accordingly:

<script type="text/javascript">

    if (screen.availWidth<=800) //if screen width is 800px or less
        //do soemthing here
    else
        //do something else here


    if (screen.availHeight<=800) //if screen width is 800px or less
        //do soemthing here
    else
        //do something else here

</script>

[JameB]

On that note, take a look at this code and work with it:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="css_for_800px_screens.css" />

Or

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium_size_screen.css' />

[JameB]

[double post]