Responsive javascript

Question

Can anyone please help with a dodgy if statement, try as I might I can't see anything wrong with it, the code works when outside of the if statement:

var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer; 
$(function() {
    sizeBefore = $(window).width();
    sizeBreakPoint = 500;
    doneResizing();       
});

function doneResizing(){
       sizeAfterResize = $(window).width();
       if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
                alert('Before:' + sizeBefore);
                alert('After:' + sizeAfterResize);
                sizeBefore = sizeAfterResize;
                // THIS RUNS WHEN OUTSIDE IF STATEMENT
       }
}


$(window).resize(function() {
    //doneResizing();
     clearTimeout(resizeTimer);
     resizeTimer = setTimeout(doneResizing, 100);
});

EDIT: This statement should only be true on both document ready or completion of resize when the window has been resized from smaller than sizeBreakPoint to larger than sizeBreakPoint - hope this clarifies

EDIT: SOLUTION

var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer; 
$(function() {
    sizeBefore = $(window).width();
    sizeBreakPoint = 500;
    doneResizing();       
});

function doneResizing(){
       sizeAfterResize = $(window).width();
       if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
                alert('Before:' + sizeBefore);
                alert('After:' + sizeAfterResize);
       }
       sizeBefore = sizeAfterResize;
}


$(window).resize(function() {
     clearTimeout(resizeTimer);
     resizeTimer = setTimeout(doneResizing, 100);
});

Why is $(function() { sizeBefore = $(window).width(); sizeBreakPoint = 500; doneResizing(); }); wrapped in JQuery? — howderek
– howderek, Commented Mar 1, 2013 at 15:18
If it works out of the if statement, my guess is that the if rules are wrong. Have you console.logged values of the if, to make sure you're going into the if? — monxas
– monxas, Commented Mar 1, 2013 at 15:20
Jep, $.ready() and $(function) are semantically the same. — Torsten Walter
– Torsten Walter, Commented Mar 1, 2013 at 15:21

Hugo Alves · Accepted Answer · 2013-03-01 16:03:46Z

1

ok from looking and testing your if i can say:

if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint))

this is only true if your window starts with smaller then 500 and after you resize if it goes over 500. This because you never change you sizeBefore other then on page load.

Can you tell me what you really want to verify? Or if this what you really want.

** edit: suggested solution **

try to do something like this:

$(function() {
   sizeBreakPointMin = 480;
   sizeBreakPointMax = 520;
   doneResizing();       
});

function doneResizing(){
   sizeAfterResize = $(window).width();
   //this way you have a window where this is false and it's as you want to allow the window as in a fine size
   //you can garantie that the window is always bigger then 480 and smaller then 520
   if ((sizeAfterResize < sizeBreakPointMin) || (sizeAfterResize >= sizeBreakPointMax)) {
            alert('Before:' + sizeBefore);
            alert('After:' + sizeAfterResize);
            // THIS RUNS WHEN OUTSIDE IF STATEMENT
   }
}

from your code:

 if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
            ...
            sizeBefore = sizeAfterResize;
 }

this two lines don't go well together because the first time this is true you just garantied that sizeAfterResize >= sizeBreakPoint making the next time you go check the if sizeBefore is will always be bigger then sizeBreakPoint making the if statement impossible to enter 2 times as it is (and if you don't change sizeBefore outside the if.

Hope this helps.

edited Mar 1, 2013 at 16:03

answered Mar 1, 2013 at 15:34

Hugo Alves

1,5552 gold badges20 silver badges41 bronze badges

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

4 Comments

Jon Chubb Over a year ago

Thanks for your reply - the aim is to check both on page load and on completion of resize if the window width is smaller or greater than the break point and execute the relevant code. This needs to work if the window is resized multiple times. Once there's a working example I'll implement a version which only runs if the browser is wider than the 500 breakpoint.

Hugo Alves Over a year ago

@JonChubb try to change the && to a || That way if the the window is small it does the alerts OR if the the current size is bigger it does the alerts

Hugo Alves Over a year ago

@JonChubb there is problem, they way you are verifying it is always true. you have to give diferent break points one smaller and another bigger. This way will say that if the window is outside does points its to big or to small. Do you understand what i mean? i'm going to update my answer with a suggestion to this.

Jon Chubb Over a year ago

you are right I moved the sizeBefore = sizeAfterResize; after the if statement and it now works great - I'll update the initial question with the solution should anyone else need similar code. Many thanks for al your answers.

Deleteman · Accepted Answer · 2013-03-01 15:31:06Z

0

I think your problem lies within the if condition. sizeBefore is whatever your screen width is at the document ready event, which if you have a fullscreen browser, will be bigger than 500 (which is your breakpoint value). But you're never updating the sizeBefore, so it will never be lower than the sizeBreakPoint, and so, this part of the if statement will never be true: (sizeBefore < sizeBreakPoint)

edited Mar 1, 2013 at 15:31

answered Mar 1, 2013 at 15:24

Deleteman

8,6907 gold badges28 silver badges40 bronze badges

1 Comment

Jon Chubb Over a year ago

I think you're right, the statement works if the browser is smaller than 500 on document ready but will not work afterwards. How do I make the sizeBefore = sizeAfterResize; statement work - I take it that is the issue?

Wallace Sidhrée · Accepted Answer · 2014-01-21 16:37:52Z

This is no direct answer to the question, just my own twist on a responsive JavaScript

// calculate viewport width so that we can load js conditionally
function responsive(){
    var scaffolding = 'desktop';
    var w = parseInt($(window).innerWidth(), 10);
    if (w > 0 && w < 768) { scaffolding = 'phone'; }
    if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
    if (w > 980) { scaffolding = 'desktop'; }
    return scaffolding;
}

if ( responsive() == phone ) {
    // do stuff only on phones
}
if ( responsive() != phone ) {
    // do stuff everywhere else but phones
}

You get to define what each breakpoint represents and what it is called, in a way that it still makes sense when you start using the condition later in the code.

Collectives™ on Stack Overflow

Responsive javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related