Reset page layout after body tag is overwritten

Question

I have page that automatically once the window height falls beneath a certain size (450px).

Question is - how do I retain the content once the window height goes above a certain size (450px).

I've tried .remove but it doesn't work.

Code:

$(window).resize(function() {
    if ($(window).height() < 450) {
        $('body').html("Please resize your screen.");
    }
    else {
        $('body').remove(this);
    }
});

Jsfiddle: http://jsfiddle.net/zyL6fyvn/1/

I don't understand what you're trying to achieve.. what is `this` supposed to reference? — myfunkyside, Nov 08 '14 at 11:38
Please ignore it - I was trying to recover the content that was initially in the body before the resize event — methuselah, Nov 08 '14 at 11:39
this is a very odd approach imo. there are other ways to do this, such as displaying a modal, an alert box, using `$(body).hide()/.show()` etc. — Timmerz, Nov 08 '14 at 12:49
you can also use css to specify `body { min-height: 450px }` — Timmerz, Nov 08 '14 at 12:51

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Easiest (and I think only) way, is to store the content into a variable before you remove it:

$(window).on('load',function() {
    var body;
    var bodyVisible = true;

    function resize() {
        if (bodyVisible==true && $(window).innerHeight()<450) {
            bodyVisible = false;
            body = $('body').html(); //store current body content before removing it
            $('body').html("Please resize your screen.");
        } else if (bodyVisible==false && $(window).innerHeight()>=450) {
            bodyVisible = true;
            $('body').html(body); //restore body content
        }
    }
    resize(); //invoke resize() on page-load
    $(window).resize(resize); //invoke resize() on page-resize
});

fiddle: http://jsfiddle.net/zyL6fyvn/3/

See comments in the code above for explanation.
I put the resize code inside a standard function that is invoked once on page-load and after that on every page-resize. (Otherwise the content will still show if the window's height is below 450, until you have resized once.)
I added the bodyVisible boolean, otherwise the body content is rewritten again on every resize. Now it's only rewritten once when the height passes the threshold.
I prefer to use .innerHeight() instead of just .height(), I get more consistent and reliable results with that. But that's just my opinion.
In your HTML, try to close your <input /> and your <br /> elements (the space before the slash is no typo).

(I have never seen a <br /> with a class btw, or CSS being applied to it for that matter.. but apparently it works, and it's even officially valid:)

Reset page layout after body tag is overwritten

1 Answers1