-2

I have an if statement that resizes my background video to match the browser window height and width, though sometimes it doesn't work, and will only match either the height or the width. I am relatively sure this can be remedied by making sure that both the if clause and else clause run no matter what. I thought about nesting it in a for loop, but that didnt seem like a good solution.

Here is my code.

JS:

var resizeVideo = function() {

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var video = document.getElementById("test");
    var videoWidth = video.style.width;
    var videoHeight = video.style.height;

    console.log(videoHeight);
    console.log(fullHeight);

    var fired = false;        
    if(parseInt(video.style.height, 10) <= window.innerHeight && fired == false) {
        video.style.height = fullHeight + 'px';
        var fullWidthAdjusted = fullHeight * 1.7777777;
        video.style.width = fullWidthAdjusted + 'px';
        console.log(videoWidth);
        console.log("Height correction working");
        fired = true;
    } else {
        video.style.width = fullWidth + 'px';
        var fullHeightAdjusted = fullWidth * .5625;
        video.style.height = fullHeightAdjusted + 'px';
        console.log("Width correction working");
        fired = true;
    }
};

window.onresize = resizeVideo;
window.onload = resizeVideo;
6
  • 4
    But do you me that both the if and the else should run? That is the whole idea of an if / else statement, that NOT both will run.
    – putvande
    Aug 19, 2014 at 14:55
  • 2
    If you need both chunks of code to run, why use if/else?
    – j08691
    Aug 19, 2014 at 14:56
  • 1
    The whole point of if/else is to be one or the other. If you want some piece of code to run no matter what, pull it out of the statement... Aug 19, 2014 at 14:56
  • To comment on your code more appropriately, you should have one if statement for width only, and one if statement for height only, one after the other. Aug 19, 2014 at 14:58
  • Is this not possible with just CSS?
    – ncksllvn
    Aug 19, 2014 at 15:11

1 Answer 1

2

if .. else is there to execute either one piece of code or another. In your case, both might need to be executed, depending on the situation, so you'll need two separate if statements, each with their own condition.

// You can, but don't have to, introduce a variable for this.
// I like it, because it makes the condition more readable and a bit more
// self-documenting, but you might just as well put it in the 'if' as you did.
var heightChanged = parseInt(video.style.height, 10) <= window.innerHeight;
var widthChanged = parseInt(video.style.width, 10) <= window.innerWidth;

if (heightChanged) {
    video.style.height = fullHeight + 'px';
    var fullWidthAdjusted = fullHeight * 1.7777777;
    video.style.width = fullWidthAdjusted + 'px';
    console.log(videoWidth);
    console.log("Height correction working");
} 

if (widthChanged) {
    video.style.width = fullWidth + 'px';
    var fullHeightAdjusted = fullWidth * .5625;
    video.style.height = fullHeightAdjusted + 'px';
    console.log("Width correction working");
}

I eliminated the 'fired' variable, since it didn't really do anything in your code.

Alternatively, you might want to have a look at the article Proportional Resizing of Web Page Elements Using Only CSS.

4
  • the fired condition makes no sense, it is literally defined (assigned) right before it is tested
    – musefan
    Aug 19, 2014 at 15:00
  • @musefan Is that compiler-sp34k for "you made a typo, forgot an ="?
    – GolezTrol
    Aug 19, 2014 at 15:02
  • 1
    Ha, no. I didn't even notice that. I meant it makes no sense to evaluate fired == false as it is always set to false prior to the condition
    – musefan
    Aug 19, 2014 at 15:05
  • 1
    @musefan Well it wasn't in my version. ;) But you're right. It seems to have no use, so I eliminated it from this code. Thanks.
    – GolezTrol
    Aug 19, 2014 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.