0

I think this is quite simple but after 2 days of trying I'm still clueless. Basically, I need to run one set of commands if the screen is over 767 pixels wide and another if the screen is under 767 pixels.

When the screen is wider than 767 pixels, I want to:

<script type="text/javascript">

    var jsReady = false;//for flash/js communication

    // FLASH EMBED PART
    var flashvars = {};
    var params = {};

    params.quality = "high";
    params.scale = "noscale";
    params.salign = "tl";
    params.wmode = "transparent";
    params.bgcolor = "#111111";//change flash bg color here
    params.devicefont = "false";
    params.allowfullscreen = "true";
    params.allowscriptaccess = "always";
    var attributes = {};
    attributes.id = "flashPreview";

    swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

    <!-- and much more code... -->

</script>

When the screen is narrower than 768 pixels, I want to run:

<script type="text/javascript">  

        jQuery(function($){
            $.supersized({
                //Background image
                slides  :  [ { image : 'img/some_image.jpg' } ]                 
            });
        });

</script>

That's right... For desktops and tablets, I want to show a full-screen video background. For smaller screens (less than 767 pixels), I want to show a single still image background.

2
  • 1
    Do you mean the window (viewport) width or the physical screen (device) width? If you mean the viewport, use Starx's answer. If you mean the device, use poncha's answer. The viewport width changes on resize. The device width is constant (no need for resize handler). See responsejs.com/labs/dimensions
    – ryanve
    Apr 7, 2012 at 23:20
  • Yes, I meant the viewport. I do read my questions thoroughly but invariably miss something! I will investigate Starx's answer. Thanks!
    – awDemo
    Apr 7, 2012 at 23:34

3 Answers 3

2

You can get the currect size of windows using $(window).width() and attach a handler on the resize event of the form. For a simple use, It is as simple as

$(window).resize(funcion() {
    $width = $(window).width();
    if($width < 767) {
            $.supersized({
                //Background image
                slides  :  [ { image : 'img/some_image.jpg' } ]                 
            });
    } else {
        //if width is greater than 767
    }
});
1
  • Thanks Starx! I'm a newbie so help out a little here... I can see the supersized code here but where do I put the other code (when the viewport is > 767?
    – awDemo
    Apr 7, 2012 at 23:35
2
if(screen.width > 767) {
   code A...
} else {
   code B...
}
3
  • This gives the device width. This is good if that's what the op means. See: responsejs.com/labs/dimensions
    – ryanve
    Apr 7, 2012 at 23:15
  • Right. This is what the OP has mentioned though (screen). If the intention is to handle the viewport width, then this would have to be done differently, and account for changes of the viewport (resize).
    – poncha
    Apr 7, 2012 at 23:35
  • I did mean viewport (sorry) but this is good to know too! Thanks.
    – awDemo
    Apr 7, 2012 at 23:41
1

Since you're using JQuery you can use this:

if ($(window).width > 767) { ... }

That returns the current size of the window, not the max.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.