Responsive jquery

Question

Need some help, and advice. Long story short i have a 3 column website.

<div id="left-col">Some content</div>
<div id="mid-col">Some content</div>
<div id="right-col">Some content</div>

When a browser window goes below 1000px, i do the following.

$(window).on('resize', function () {

if ($(window).width() < 1000) {         
    $("#right-col").appendTo('#left-col');
    $("#mid-col").css("max-width","785px");
}
});

Now using appendTo isnt the best solution because it takes the entire <div id="right-col"> and places it within the div. My initial want was to just move the html within right-col and append that to the end of left-col.

Regardless... How can i get it to snap back out of left-col and go back to it's original place when the browser is greater than 1000px;

Here's a jsfiddle of it. http://jsfiddle.net/C7k5b/

score 3 · Accepted Answer · answered Feb 11 '13 at 19:49

3

Could'nt you just append it back again ?

$(document).ready(function() {
    $(window).on('resize', function () {
        if ($(window).width() < 500) {      
            $("#right-col").appendTo('#left-col');
        }else{
            $("#right-col").appendTo($('#left-col').parent());
        }
    });
});

FIDDLE

answered Feb 11 '13 at 19:49

adeneo

312,895
29
395
388

Hmmm, i tried that just not the way you did it. Can you explain to me the logic behind ($('#left-col').parent()) – ipixel Feb 11 '13 at 19:57
Since the two coloumns are originally siblings, when you append one within the other, you can get it back by appending it to the parent etc. This depends on the structure of the HTML, but the same principle applies. jQuery has so many DOM traversal methods that you can always find the original parent again. – adeneo Feb 11 '13 at 20:03
I just tested this, it "works" but it causes a weird CSS issue. Because the jquery reacts a bunch of times upon resize of the window, my content in the right-col get's moved down by the same height as mid-col takes up. Your code only works under the else, wont work if > 500 or even if i use an else if. Any ideas? – ipixel Feb 11 '13 at 20:05
I'm not really sure what the issue is, as it works just like your fiddle for me in Chrome, except that it reverts back when the window size is increased ? – adeneo Feb 11 '13 at 20:10
yea the basic version on fiddle works ideally. I'll try to figure out why it's pushing it down before appending. Thanks very much for your help!!!!! – ipixel Feb 11 '13 at 20:16
Ok i know why it's doing that. Because my #right-col is float:right. The div order is left, right, mid instead of the typical left, mid, right. So for whatever reason the else part, when it fires it re-orders my divs to left, mid, right essentially making my float:right css not work as intended. The CSS i had in jsFiddle was a quick thing, i didnt think it would matter. Here's my bug... http://jsfiddle.net/C7k5b/2/ – ipixel Feb 11 '13 at 20:25
I added $('#right-col').insertBefore('#mid-col'); in the else statement, and it seems to have fixed the issue. A little hacky IMHO but i can deal. Thanks again! – ipixel Feb 11 '13 at 20:43

Responsive jquery

1 Answers1