0

I want to check if the screen width is higher than 1024 pixels, to set sidebar + 50px

I tried this piece of code (but the sidebar doesnt load on 1024+):

<?php $arjunaOptions = arjuna_get_options(); ?>
<?php
//calculate sidebar and content area ratio
if ($arjunaOptions['sidebarDisplay'] != 'none') {
    $available = 920;
    $available2 = 970;
    $contentArea = $arjunaOptions['contentAreaWidth'];
    $sidebar = $available - $contentArea;
    $sidebarlarge = $available2 - $contentArea ;
    $sidebarLeftRight = floor(($sidebar - 50) / 2);

    print '<style type="text/css">
    @media screen and (max-width: 1024px) {
    .contentWrapper .contentArea {width:'.$contentArea.'px;}
    .contentWrapper .sidebars {width:'.$sidebar.'px;}
    .contentWrapper .sidebarLeft, .contentWrapper .sidebarRight {width:'.$sidebarLeftRight.'px;}  
    }

    @media screen and (min-width: 1025px) {
    .contentWrapper .contentArea {width:'.$contentArea.'px;}
    .contentWrapper .sidebars {width:'.$sidebarlarge.'px;}
    .contentWrapper .sidebarLeft, .contentWrapper .sidebarRight {width:'.$sidebarLeftRight.'px;}
    }

    </style>';

}
?>
Scripter
  • 558
  • 2
  • 8
  • 20

1 Answers1

3

You should not be doing this dynamically in PHP, since PHP has no concept of the size of the screen (without help from client side cookies or something similar).

You should use a CSS media query for this. For example:

@media screen and (max-width: 1024px) {
  /* CSS for up to 1024px width */   
}

@media screen and (min-width: 1025px) {
  /* CSS for over 1024px width */
}

You can also use javascript to modify the CSS properties of an element. In fact your example seems to try to use jQuery syntax in PHP, which of course won't work.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103
  • This is actually probably a better answer than mine. Read about media queries here: http://www.w3.org/TR/css3-mediaqueries/ – Jason Swett Apr 03 '13 at 18:22
  • How do I use a media query with this example (see the code above)? – Scripter Apr 03 '13 at 18:26
  • @Scripter I would bet that you most likely don't need to do all that width calculation you are doing if you actually implement CSS properly to have your elements fit the available screen area. My intent wasn't to write your CSS for you, but rather point out an extremely useful tool (once the is essential for modern web development) that you should familiarize yourself with. There are tons of examples of how to use media queries out there on the web. – Mike Brant Apr 03 '13 at 18:35
  • @Scripter It might help if yo link a fiddle or show your actual HTML source that is output. Without seeing the source, it is hard for anyone to understand the actual values that are being populated. – Mike Brant Apr 08 '13 at 15:27
  • The problem is that everything still loads. – Peter Westerlund Jun 05 '14 at 08:28