CODEWITHSUNDEEP
jqueryresizeresponsive-design
Karlgoldstraw
Karlgoldstraw

Reputation: 628

Replace HTML depending on screen size

I am trying to replace HTML content in small screen size and then replace it when the window is made larger again. My code below works but how do i get it to remove the change?

Here is my code so far:

$(window).resize(function() {
    if (window.innerWidth < 480) {

        $('.LatestNews').replaceWith('<h3><a href="">News Link</a></h3>');

    } else if (window.innerWidth > 480) {

        // Change back to original .LatestNews

    }
}).resize();

Thanks.

Upvotes: 3

Views: 10052

Answers (4)

steady_beaver
steady_beaver

Reputation: 1

var elem = $(".patience")

function defineContent () {
    
    if (window.innerWidth < 650){  
        elem.children().replaceWith('<h5>Small header</h5>')
    }else{                    
        elem.children().replaceWith('<h3>Slightly bigger header</h3>');
    }
}

$(window).resize(defineContent);     //defineContent without brackets!

Upvotes: -1

Calvin
Calvin

Reputation: 630

I would recommend something like this.

//setup some variables. You only need to change the top two and this code should work on your site.
var parentElem = $('div'),
    bigContent = "<p>this is some dummy content</p>",
    smallContent = parentElem.html(),
    s = 0;

//call your function every time the browser is re-sized. The arguments are: 1. the parent of the content you want to change, 2. the original content, 3. the content you want to show on larger screens 
$(window).resize(function(){
     replaceContent(parentElem, smallContent, bigContent);
});

function replaceContent(parent, small, big){
    // check if a breakpoint has been "crossed". I'm using the 's' variable to check if we have already run at this breakpoint to prevent needlessly repeating the function every time the user re-sizes.
    if (window.innerWidth < 481 && s === 1 ) {
        parent.children().remove();
        parent.html(small);
        s = 0;
    } else if ( window.innerWidth > 480 && s === 0) {
        parent.children().remove();
        parent.html(big);
        s = 1;
    };
}

It's not the best thing ever. Could have been structured better, but it will do the job.

Upvotes: 0

Calvin
Calvin

Reputation: 630

I would recommend having a look at responsejs.com. It comes up with some great ways of substituting content based on view-port and is an elegant solution to this problem.

The first thing you'd want to do is define your breakpoints. Something like this would work:

   (function() {

            Response.create({ mode: 'markup', prefix: 'r', breakpoints: [0,320,481,641,961,1020,1281] });
            Response.create({ mode: 'src',  prefix: 'src', breakpoints: [0,320,481,641,961,1020,1281] });

   })();

Next you can just use it's custom data attribute to place in your content in the markup. e.g.

<div data-r481="
     This content will be shown over 480 pixels.
 ">
 This is your default content
 </div>

This is far more semantic as you can have both versions in your markup instead of using JS to create them.

See the documentation for more info.

Upvotes: 3

IpponSolutions
IpponSolutions

Reputation: 58

The replaceWith function is changing the DOM structure and replacing any content within your component; therefore it will no longer have any knowledge of what was there before.

You could capture the innerHTML content of $('.LatestNews') in a global var before doing the replace, and then change it back as your screen resizes:

var originalContent = '';

$(window).resize(function() {
if (window.innerWidth < 480) {

    originalContent = $('.LatestNews').innerHTML;

    $('.LatestNews').replaceWith('<h3><a href="">News Link</a></h3>');

} else if (window.innerWidth > 480) {

    // Change back to original .LatestNews
    $('.LatestNews').innerHTML = originalContent;
}
}).resize();

N.B. This would only work if there was 1 instance of .LatestNews on your page; if you're dealing with multiple this won't work.

Upvotes: 0

Related Questions