Question

I am using jquery to remove two divs .twitter and .email from their original positions when the max-width is 959px and place these two divs after the div #maininner.

When the max width is larger than 959px, I would like these two divs to go back to their original positions: both are inside their own div class .grid-box.width100.grid-v which are inside #sidebar-a.

The problem is that there are multiple .grid-box.width100.grid-v inside #sidebar-a. How do I get the two divs .twitter and .email to go into the two empty .grid-box.width100.grid-v that they are removed from?

Note: I am unable to put separate classes on the multiple div class .grid-box.width100.grid-v.

$.onMediaQuery('(max-width: 959px)', {
        valid: function() {
        $("#sidebar-a ").remove().insertBefore($("#maininner"));    
        $(".twitter").remove().insertAfter($("#maininner"));
        $(".email").remove().insertAfter(("#maininner"));

        },

        invalid: function() {
        $("#sidebar-a").remove().insertAfter($("#maininner"));
        $(".twitter").remove().appendTo($(".grid-box.width100.grid-v"));
        $(".email").remove().appendTo($(".grid-box.width100.grid-v"));

        }
    });

Thanks in advance for any help! 😀

Answer 1

I think the best way would be to use $.clone() in order to clone the .twitter and .email values. Then hide the originals. If the width changes, re-evaluate the current width and then change the visibility accordingly.