Remove <br /> tags when window resized

Question

I'm having a funny issue, I'd like to remove the <br> under 760px width resolution. I've been using this which always worked, however it doesn't work on a new website I'm working on.

$(function() {
    if ($(window).width() < 760) {
        $('p.nobreak br').replaceWith(' ');
        $('span.vert-align.centerone br').replaceWith(' ');
    }
});

The funny part is if instead of < 760 I change by > 760 (for higher resolution) and it does work! But I need this for < 760. Any advice guys?

Rory McCrossan · Accepted Answer · 2016-07-06 15:40:26Z

Your current code works, but only for the resolution the window is loaded at. You need to apply your logic in the resize event handler so that it reacts as the window size is changed. Try this:

$(function() {
    var timer
    $(window).resize(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
           if ($(window).width() < 760){
               $('p.nobreak br, span.vert-align.centerone br').replaceWith(' ');
           }
        }, 100);
    });
});

Note however that a much better solution is to use CSS media queries to do this. It's faster, and also allows the effect of the <br /> tags to be applied again if the window is made larger. Try this:

<p>
    Lorem ipsum
    <br />dolor sit amet
</p>

@media (max-width: 760px) {
    p.nobreak br, 
    span.vert-align.centerone br {
        content: ' '
    }
    p.nobreak br:after, 
    span.vert-align.centerone br:after {
        content: ' '
    }
}

Working example (drag the result panel size handles to see the effect in action)

ScrappyTexas · Accepted Answer · 2016-07-06 15:39:57Z

0

Why wouldn't you use media queries to hide these elements instead of javascript?

Something like this for example:

@media screen and (max-width:760px) {
    p.nobreak br, span.vert-align.centerone br { display: none; }
}

answered Jul 6, 2016 at 15:39

ScrappyTexas

313 bronze badges

Collectives™ on Stack Overflow

Remove <br /> tags when window resized

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related