0

I'm working on a full responsive website and I'm having an issue with one thing - maybe you could help me with it.

Basic structure:

<div id="content">
<div id="content_left"></div><!--end content_left-->

<div id="content_right">
<div class="profile_box"></div><!--end profile_box-->
</div><!--end content_right-->

</div><!--end content-->

I'm trying to do these things:

  • (when I shrink the site to 600px or less)
    • clone whole #content_right
    • move .profile_box from #content_right to #content_left
    • detach whole #content_right

  • (when I stretch the site to 600 or more)

    • append #content_right to #content
    • move .profile_box back in the place (#content_right)

    $(window).resize(function(){ if($('body').width() < 600) { var cr_clone = $('#content_right').clone(true); $("#content_right .profile_box").detach().prependTo('#content_left') $("#content_right").detach(); } else{ cr_clone.appendTo('#content'); } });

It's working in one way - when I shrink the site, .profile_box is moved to #content_left, and whole #content_right is detached - so it's working great, but...

In the other way, there is a problem. When I'm "in shrinked" site and want to stretch to 600 or more the #content_right is not showing (after site refresh it shows up but I want to show it without refreshing).

It will work on mobile devices, so, when user rotates their cellphone, I want to work "in fly" depends on screen width.

Any help will be appreciated - thanks.

I don't want to hide or show it because it's still loading data even if it's hidden.

RyanS
  • 627
  • 1
  • 10
  • 26
n0xx
  • 13
  • 7
  • That looks awfully complicated. Why not simply move elements from one div to another, and then back in place, using appendTo()? http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element Besides, the `$(window).resize()` method is triggered at about every resized pixel, which means your manipulation will be triggered like 300 times if you resize the window by 300px. You should put your manipulation in a function, and in the `window.resize()` make a test if body is smaller or greater than 600px, call your function once – Jeremy Thille Dec 02 '14 at 14:58
  • It would be easier but in #content_right i have a lot other things and i dont want to load them if screen size will be 600px or less. And i dont want to waste user bandwidth to load something that will be hidden anyway (on small screens). You mean something like this: $(window).on("resize load", function () { $(body).resize(function(){ } }); ? Im not good in jquery scripting, if it's something totally different please, put some example. – n0xx Dec 02 '14 at 15:13

1 Answers1

2

Your cr_clone doesn't exists in the else statement :

var cr_clone = $('#content_right').clone(true);
if($('body').width() < 600) {
            $("#content_right .profile_box").detach().prependTo('#content_left')
    $("#content_right").detach();
}
else{
    cr_clone.appendTo('#content');
}

UPDATE

You need two if statement. You have to add the section only if it's not already there :

var cr_clone = $('#content_right').clone(true);
if($('body').width() < 600) {
    if ($("#content_left #content_right").length == 0){
        $("#content_right .profile_box").detach().prependTo('#content_left');
        $("#content_right").detach();
    }

}
else{
    if ($("#content_left #content_right").length > 0) {
        cr_clone.appendTo('#content'); 
        $("#content_left profile_box").detach().prependTo('#content_right'); 
    }

}
Mathieu Labrie Parent
  • 2,598
  • 1
  • 9
  • 10
  • else{ cr_clone.appendTo('#content'); $("#content_left profile_box").detach().prependTo('#content_right'); } }); Now, it's moving .profile_box to #content_left but multiple times (about 25 o_O) and when I stretching site #content_right is again placed but 25x times and without other div's that was placed in #content_right before. There are about 25 #content_right div's and in each there is .profile_box. Anyway thanks for fast answer Mathieu. – n0xx Dec 02 '14 at 15:20
  • I think you have it 25 times because the window.rezise event is executed for each px you rezise. So before appending, make sure it's not already there. In the < 600 part : if ($("#content_left #content_right").length == 0) do the insert – Mathieu Labrie Parent Dec 02 '14 at 15:27
  • Do you mean something like this: if($('body').width()< 600 || $("#content_left #content_right").length == 0) {} ? If yes, it hides whole #content_right after i touch browser to shrink it, and profile.box shows in #content_left after i get 600px width. I dont know if it even a good solution (overall). Maybe it would be more better and faster for user and bandwith to just hide it and prepend only ? – n0xx Dec 02 '14 at 15:58