Event will not trigger when conditions are met

Question

I have written a script that switches the float value from right to left when the window is squeezed to a certain horizontal length.

function switchMedia(){
    if(w < 1050){
        document.getElementById("secondPic").style.cssFloat = "left";
    document.getElementById("secondPic").style.marginLeft = "1.5vh";
    }
    if(w > 1050){
        document.getElementById("secondPic").style.cssFloat = "right";
    }
  } 
}

And the listener here:

initialize();

function initialize(){
    addEventListener("resize",switchMedia,false);
    switchMedia();

}

The odd thing is that it worked for the first values of w I put in, but once I switched to 1050, the float value will not change.

you have two closing braces `} }` . Where do you update the `w` variable? Where do you handle the exact `1050` case? — Roko C. Buljan, Dec 19 '15 at 03:29

score 0 · Answer 1 · answered Dec 19 '15 at 03:06

0

Your conditionals only return true if w is less than or greater than 1050. 1050 is neither less than nor greater than 1050. Try changing the second conditional to if(w > 1049)

answered Dec 19 '15 at 03:06

TAGraves

1,369
1
9
11

Although it's not specified in the question, I assume `w` is window width here. I doubt the OP didn't resize "enough" for the width to change from that specific value. – marekful Dec 19 '15 at 03:09
You are probably right about that; I took "I switched to 1050" to mean they were manually setting `w` until they knew the conditionals were working. – TAGraves Dec 19 '15 at 03:11

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

You need to update the w variable

http://jsbin.com/fivove/1/

function switchMedia(){
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if(w < 1050){
    document.getElementById("secondPic").style.float = "left";
    document.getElementById("secondPic").style.marginLeft = "1.5vh";
  }
  if(w >= 1050){
    document.getElementById("secondPic").style.float = "right";
  }
} 


function initialize(){
  window.addEventListener("resize",switchMedia,false);
  switchMedia();

}

initialize();

https://stackoverflow.com/a/28241682/383904

Also, don't search twice for an element into the DOM specially not on resize:

http://jsbin.com/fivove/2/

var secPic = document.getElementById("secondPic"); // Cache your element! 
// It's too expensive to lookup th whole DOM for a single element on resize

function switchMedia(){
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var isSmall = w < 1050;
  secPic.style.float      = isSmall ? "left" : "right";
  secPic.style.marginLeft = isSmall ? "0"    : "1.5vh";

} 

function initialize(){
  window.addEventListener("resize",switchMedia,false);
  switchMedia();
}

initialize();

edited May 23 '17 at 12:30

Community

1
1

answered Dec 19 '15 at 03:09

Roko C. Buljan

196,159
39
305
313

I have `var w = window.innerWidth` I believe that does the same as your code. But I tried this anyway, and it doesn't seem to work :( – RM3 Dec 19 '15 at 03:14
@RM3 how can you explain than the working jsBin demo? :D Please open console, inspect your errors and fix them. – Roko C. Buljan Dec 19 '15 at 03:15
` function switchMedia(){ var wi = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, smallWidth = 1050; pic2.style.cssFloat = smallWidth ? "left" : "right"; pic2.style.marginLeft = smallWidth ? "0" ? "1.5vh"; }` – RM3 Dec 19 '15 at 03:21
Sorry, I thought enclosing in back dashed would put it in block form, but that is what I have running. – RM3 Dec 19 '15 at 03:23
@RM3 great now open the jsBin demo, download it and try to figure out why that example works and yours don't I'm not here to do the homework ;) – Roko C. Buljan Dec 19 '15 at 03:24
Alright, alright calm down. I'll do the homework. Thanks for the help! – RM3 Dec 19 '15 at 03:26
@rm3 As I've told you, open console and see if you have any errors, if not, you did not tried the exact script I've posted. You're welcome & happy coding – Roko C. Buljan Dec 19 '15 at 03:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98426/discussion-between-rm3-and-roko-c-buljan). – RM3 Dec 19 '15 at 17:11

Event will not trigger when conditions are met

2 Answers2