Call a function when window is resized under 480px

Question

Is there a way in JavaScript or jQuery to call a function when the window is resized under 480px?

duplicate of http://stackoverflow.com/questions/662726/jquery-window-resized-from-dom-fire-event?rq=1 Use window.outerWidth or window.innerWidth to get dimensions — Dmitry Pashkevich, Jun 14 '12 at 08:45
@DmitryPashkevich That question is asking something completely different to this one. — Anthony Grist, Jun 14 '12 at 08:49
Essentially the questions (and answers) are the same. Here's another *extremely similar* thread http://stackoverflow.com/questions/2996431/javascript-detect-when-a-window-is-resized?rq=1 Personally, I get pissed when I search for something on SO and get a bunch of nearly identical threads... — Dmitry Pashkevich, Jun 14 '12 at 09:54

score 6 · Accepted Answer · answered Jun 14 '12 at 08:43

6

With jQuery you can do it as follows:

$(window).on("resize", function() {
    if ($(this).width() < 480) {     // or $(this).height() for height check
        // function();
    }
});

answered Jun 14 '12 at 08:43

VisioN

143,310
32
282
281

– Aessandro Jun 14 '12 at 08:55
@Alex It will work when you start to resize the window. If you do not change the window size the alert won't display. – VisioN Jun 14 '12 at 08:57
it doesn't work when you resize it do you want me to give you a live link? – Aessandro Jun 14 '12 at 08:58
@alex Also after alert i believe you are missing a ; – AbstractChaos Jun 14 '12 at 09:06
hi there, it works fine in Chrome but in FF the screen goes black freezing completely, really strange :O – Aessandro Jun 14 '12 at 09:13
Yes i can confirm that. Try putting $(document).ready(function() {}); around your code. – AbstractChaos Jun 14 '12 at 09:20

score 0 · Answer 2 · answered Jun 14 '12 at 08:44

0

You can use resize event on Window (http://api.jquery.com/resize/), then check the size of the window, and if its under 480px, call your method.

answered Jun 14 '12 at 08:44

ruffen

1,695
2
25
51

Reporter · Answer 3 · 2012-06-14T09:25:57.917

0

Did you ask for

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
        var counter=1;
        $(window).resize(function()
        {
            alert($(this).width());
            if ($(this).width() < 1000)
            {
                counter = incCounter(counter);
            }
            alert("counter = " + counter);
        });
        function incCounter(intvari)
        {
            backValue = intvari;
            backValue++;
            return backValue;
        }
    </script>
</head>
<body>
    Text
</body>
</html>

?

edited Jun 14 '12 at 09:25

answered Jun 14 '12 at 08:45

Reporter

3,897
5
33
47

1

the function needs to be called as soon as the window is resized under 480px. Thanks – Aessandro Jun 14 '12 at 08:47
basically I have a jQuery accordion and I want to make it work only for smartphones, so I was thinking of writing a function that would call the jQuery accordion only under a certain width. – Aessandro Jun 14 '12 at 08:48
I updated my answer. Honestly your question is a little bit too vargue. – Reporter Jun 14 '12 at 09:25

score 0 · Answer 4 · edited Aug 09 '13 at 08:17

0

var w=$(window).width();
if(w<480)
{
alert(w);
}

edited Aug 09 '13 at 08:17

David

15,894
22
55
66

answered Aug 09 '13 at 08:01

saun4frsh

383
1
4
21

Call a function when window is resized under 480px

4 Answers4