How to load different HTML based on window.width()?

Question

How to always listen to window.width() and load different HTML codes based on the width values? I'm using window.width() and replaceWith().

It's only works when I open the page and not working when I resizing my browser window.

My code inside my html file:

    var width;
    $(window).resize(function() {
        width = $(window).width();
        if (width < 768) {
            $("#the_dropdown").replaceWith("<p>Less than 768</p>");
        } else {
            $("#the_dropdown").replaceWith("<p> More than 768</p>");
        }
    });
    $(window).trigger('resize');

Demo

Another question, does replaceWith() suitable for situation that involves long HTML codes (more than 1 line)?

I've already done some sets of HTML codes based on specific window's width and I want to put it accordingly inside my #the_dropdown div.

It's possible in CSS with @media queries : w3schools.com/cssref/css3_pr_mediaquery.asp — ceadreak
– ceadreak, Commented Jan 12, 2015 at 20:17
As ceadreak mentions, you should use media queries or perhaps something like modernizr to detect and react. — Mike Cheel
– Mike Cheel, Commented Jan 12, 2015 at 20:19
That one is to change CSS based on window's width. I already know about that. I'm not changing my CSS. I'm changing my HTML based on specific window's width. — Zulhilmi Zainudin
– Zulhilmi Zainudin, Commented Jan 12, 2015 at 20:19
Just to give you a term to search. What you are asking for is responsive design. — Justin Wood
– Justin Wood, Commented Jan 12, 2015 at 20:19
Don't check window width, use instead window.matchMedia and any polyfill to support older browsers if needed developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia — A. Wolff
– A. Wolff, Commented Jan 12, 2015 at 20:20

isherwood · Accepted Answer · 2015-01-12 20:25:12Z

4

Your code doesn't work because replaceWith() replaces the selected element. In your case, the element with id #the_dropdown. Therefore on the next trigger, this element isn't found and no text is written.

Replace replaceWith() with .html().

Demo

edited Jan 12, 2015 at 20:25

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jan 12, 2015 at 20:24

Tyr

2,7561 gold badge15 silver badges21 bronze badges

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

1 Comment

Ruan Mendes Over a year ago

So the OP should just be calling ` $("#the_dropdown").html("<p>Less than 768</p>")`

Collectives™ on Stack Overflow

How to load different HTML based on window.width()?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related