Change javascript according to window width

Question

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.

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
– ryanve, Commented 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
– awDemo, Commented Apr 7, 2012 at 23:34

Starx · Accepted Answer · 2012-04-08 02:57:59Z

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
    }
});

edited Apr 8, 2012 at 2:57

answered Apr 7, 2012 at 22:19

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

awDemo Over a year ago

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?

poncha · Accepted Answer · 2012-04-07 22:03:26Z

2

if(screen.width > 767) {
   code A...
} else {
   code B...
}

answered Apr 7, 2012 at 22:03

poncha

7,8763 gold badges36 silver badges39 bronze badges

3 Comments

ryanve Over a year ago

This gives the device width. This is good if that's what the op means. See: responsejs.com/labs/dimensions

poncha Over a year ago

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).

awDemo Over a year ago

I did mean viewport (sorry) but this is good to know too! Thanks.

McGarnagle · Accepted Answer · 2012-04-07 22:06:04Z

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.

answered Apr 7, 2012 at 22:06

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Collectives™ on Stack Overflow

Change javascript according to window width

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related