0

I'm new with jquery. I tried to detect browser size using the following code and tried various ways but it alerts yay whenever the browser is resized. I checked online and I couldn't figure out what went wrong with my code. Would anyone know why? I'm trying to detect the size so I could disable the area tag link on the image on mobile screen.

$(window).ready(function() {

    $(window).resize(function() {
        var wi=$(window).width();
        var he=$(window).height();
        if ((wi<=480) && (he<=568))
        {
            alert('yay');
         }
    });
});
Arend
  • 3,741
  • 2
  • 27
  • 37
user3110299
  • 1
  • 1
  • 2
    no, your code wors well for me – k102 Jan 21 '14 at 09:46
  • 1
    its working actually ...here is the [demo](http://jsfiddle.net/bUs6T/) – iJade Jan 21 '14 at 09:47
  • Did you include JQuery to your project? – Vucko Jan 21 '14 at 09:48
  • You might want to look into media queries instead for this task. – David Hellsing Jan 21 '14 at 09:52
  • Does this mean, it alerts "yay" continuously? You can't rely on how often the resize event is fired if you start resizing within checked dimensions. You probably only want to trigger a "resize end event". Have you checked the [jQuery doc](http://api.jquery.com/resize/) or this [stackoverflow post](http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac) for details? – matthias Jan 21 '14 at 09:52
  • Thanks so much for your guidance..hmm...seems like it works for you guys. ya it alerts yay continuously as long as I'm resizing the browser. I did include jquery. Let me have test again. – user3110299 Jan 21 '14 at 14:07

1 Answers1

1

use event if you want runtime resize it

$(window).resize(function(event) {
    var wi=$(window).width();
    var he=$(window).height();
    if ((wi<=480) && (he<=568))
    {
        alert('yay');
    }
});

and if you want make style for mobile you must create code in <head> like:

<meta name="viewport" content="width=device-width, height=device-height" />
<link id="stylesheet-tablet" media="(min-width: 0px) and (max-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet">

or use percent size

.wraper{width:100%;}
.wraper .child{width:50%}

or you can use bootstrapt UI Framework

saman khademi
  • 822
  • 1
  • 6
  • 13