Move element back to original position

Question

I am using the enquire.js plugin to parse media queries stored as data-attributes which move the elements position in the DOM based on the browser width.

So I have wrote the following which works fine when you manually specify the unmatch, the problem is from the auto. I want this to remember the original position and automatically move the element back when it falls outside of the media query.

But I am having issues where the prev/next element that was originally references has also moved. Is there another way that I can move the element back to its original position? Or am I better off just hiding the element instead of moving it?

/*
 * Organise elements using meta data
 * 
 * @example:
 * data-respond='{
 *      "query":"screen and (max-width:481px)", 
 *      "match": { 
 *          "target": "#page", 
 *          "method": "appendTo"
 *      }, 
 *      "unmatch":{
 *          "target": "#footer", 
 *          "method": "appendTo"
 *      }
 * }'
 */
var $this,
data,
options,
allowedMethods = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore'];

$("[data-respond]").each(function () {
    $this = $(this),
    data = $this.data("respond");
    options = {};

    // check we have object
    /*if(typeof data !== 'object'){
        data = eval(data);
    }*/

    if (data.match) {
        if ($.inArray(data.match.method, allowedMethods) > -1) {
            options.match = function () {
                if (data.match.method == 'insertAfter') {
                    if ($this[0] == $(data.match.target).next()[0]) {
                        return;
                    }
                }
                if ($(data.match.target).length) {
                    $this[data.match.method](data.match.target);
                }
            }
        }
    } //match

    if (data.unmatch) {
        if (data.unmatch == 'auto') {
            data.unmatch = {};

            // a) insert after                      
            if ($this.prev().length) {
                data.unmatch.target = $this.prev();
                data.unmatch.method = 'insertAfter';
            } else if ($this.next().length) {
                // c) insert before 
                data.unmatch.target = $this.next();
                data.unmatch.method = 'insertBefore';
            } else {
                // d) append to parent
                data.unmatch.target = $this.parent();
                data.unmatch.method = 'appendTo';
            }

            if ($.inArray(data.unmatch.method, allowedMethods) > -1) {
                options.unmatch = function () {
                    $this[data.unmatch.method](data.unmatch.target);
                }
            }
        } else {
            // Manually set unmatch
            if ($.inArray(data.unmatch.method, allowedMethods) > -1) {
                options.unmatch = function () {
                    if ($(data.unmatch.target).length) {
                        $this[data.unmatch.method](data.unmatch.target);
                    }
                }
            }
        }

    } //unmatch

    enquire.register(data.query, options);
});

Jsbin - http://jsbin.com/akAV/1/edit

Answer 1

I want this to remember the original position and automatically move the element back when it falls outside of the media query.

But I am having issues where the prev/next element that was originally references has also moved.

A general remark : you have to define clearly what "original position" is when the "original context" is no more.

---

I think one of your problem is you use moving elements as reference.

Maybe you can leave an empty (fixed) html tag before moving :

// create an empty tag, which will be left at the "original position"
var $beacon = $('<span class="beacon"></span>');
$(this).after($beacon);
// keep a reference to this node
$(this).data('unmatch-beacon', $beacon[0]);

// the unmatch function would be something like :
data.unmatch = function(){
    var beacon = $(this).data('unmatch-beacon');
    $(beacon).after(this);
    $(beacon).remove();
    $(this).data('unmatch-beacon', null);
};

Answer 2

My first idea is actually a quite simple one. Why not wrap them where you want them?

<div class="parentContainer">
    <div class="firstWrapper">
        <!-- Content that you want to move goes here -->
    </div>
    <div class="secondWrapper">
        <!-- Second content  that you want to move  goes here -->
    </div>
</div>

And your JS should be something like:

// a) insert after                      
if($this.prev().length){
    data.unmatch.target = $('.firstWrapper');
    data.unmatch.method = 'appendTo';
} else if($this.next().length){
// c) insert before 
    data.unmatch.target = $('.secondWrapper');
    data.unmatch.method = 'appendTo';
} else {
// d) append to parent
    data.unmatch.target = $('.parentContainer');
    data.unmatch.method = 'appendTo';
}

This will make it quite easy to find where you want to append something. Keep It Simple! :)

/J.