3

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.

Karlgoldstraw
  • 618
  • 2
  • 11
  • 25
  • http://responsejs.com/ does this very well if it's of interest. It also lets you specify both versions in the markup which is far more semantic than doing it this way. – Calvin Apr 30 '13 at 08:48
  • Thanks Calvin, but I'm only looking for the pure jQuery, I can't insert a plugin to the site I'm working on – Karlgoldstraw Apr 30 '13 at 08:52
  • you could copy the compressed code into your script file or just onto the page in script tags.It is still pure "jQuery" (JS). Just copy and paste this somewhere: http://airve.github.io/js/response/response.min.js – Calvin Apr 30 '13 at 08:54

4 Answers4

3

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.

Calvin
  • 630
  • 3
  • 17
  • Hi Calvin, Thanks again. I didn't explain myself correctly - I am not allowed to change the HTML markup, but I do have access to an external .js file. So whilst I see the benefit of the plugin (and I will use it again nother time) this time I cannot change the DOM manually, only on the fly. – Karlgoldstraw Apr 30 '13 at 09:11
  • ah damn, I'll edit my answer to make it more generic and leave it for others who face the issue without your limitations. Will write a new one for you now. – Calvin Apr 30 '13 at 09:13
0

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.

IpponSolutions
  • 58
  • 6
  • Hi, thanks for the quick response, I pasted this in, however it didn't work unfortunately. It does do the replace with still, but doesn't change it back – Karlgoldstraw Apr 30 '13 at 09:06
  • i didn't run it myself; just added an example to your code snippet. I'd suggest debugging it through as it's fairly straight forward - unless there's some reloading going on... – IpponSolutions Apr 30 '13 at 14:57
0

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.

Calvin
  • 630
  • 3
  • 17
-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!
steady_beaver
  • 1