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
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 :