I made this scrip because I've been noticing designers making the designs in which elements move position when the site changes size. For example: :: Desktop - elem 1 - elem 2 :: Mobile - elem 2 - elem 1 This script should make bringing those designs to life a lot easier. (C)hange (e)lement (lo)cation (b)ased (o)n (s)ize, celobos.js for short. (…

celobos.js

/*jslint browser: true*/
/*global  $*/

/*

// NEEDS JQUERY
This script will move elements in the code to other elements based on the size of the screen.
You define what it has to move in the html using data attributes.

Those attributes are:
    - data-celo-element
      Which is a comma seperated list existing out of jquery selectors, .elem1,.elem2 or just .elem1 for example.
      
    - data-celo-screensize
      Which is a comma seperated list existing out of numbers, 700,800 or just 700 for example.
      If you want to move a lot of elements on the same screensize, you can just define one screensize and the script will coope with that.
      Furthermore, these screensizes relate directly to the elements that are defined.
      Elem 1 will be pulled too the element on Screensize 1.

Example: 
        <div class="col col-1" data-celo-element=".doe-1,.doe-2" data-celo-screensize="500,600">
            <div class="demo-element doe-1"></div>
            <div class="demo-element doe-2"></div>
        </div>
        <div class="col col-2" data-celo-element=".doe-1,.doe-2" data-celo-screensize="700,800"> </div>
        <div class="col col-3" data-celo-element=".doe-1,.doe-2" data-celo-screensize="900,1000"> </div>
*/

var celo = {};

(function () {
    "use strict";
    celo.sizes = {};
    celo.index = function () {
        // get the elements
        var elements = $("[data-celo-element]");

        // loop trough the elements
        elements.each(function (n, mainElem) {
            var celoElementNames = mainElem.getAttribute("data-celo-element").split(','),
                celoScreensizes = mainElem.getAttribute("data-celo-screensize").split(','),
                celoElements = [],
                sizeObject = {},
                objectArray = [],
                screenWidth = window.innerWidth;
            
            // get the elements defined in the data-celo-element attribute.
            celoElementNames.forEach(function (elemName) {
                celoElements.push($(elemName));
            });

            // loop trough the elements gotten in the data-celo-element attribute.
            celoElements.forEach(function (selector, n) {
                // this second loop created the abbility to have multiple objects with the same identifier in the same object.
                $(selector).each(function (i, elem) {
                    // add an attribute for future reference.
                    elem.setAttribute("data-celo-move-element", 'true');

                    // thie is the screensize on which the object is going to change from parent.
                    var screenSize = celoScreensizes[n];
                    if (screenSize === undefined) {
                        screenSize = celoScreensizes[0];
                    }
                    if (screenSize === undefined) {
                        screenSize = window.innerWidth;
                    }

                    // create the later used object.
                    sizeObject = {
                        size: screenSize,
                        moveTo: mainElem
                    };

                    // Create an array which contains all the sizeobjects, and append it to the element.
                    if (elem.celoMoveTo === undefined) {
                        elem.celoMoveTo = [sizeObject];
                    } else {
                        elem.celoMoveTo.push(sizeObject);
                    }
                });
            });
        });
    };

    // this is the function that checks if the child element is in the correct parent element.
    // if it is not, it will move it to the correct parent element.
    celo.check = function () {
        // get the elements by the role tag we appended in the index() function.
        // this doenn't loop trough the parent elements, but trough the children, because otherwise the parents would overwrite eachother.
        var elements = $("[data-celo-move-element='true']"),
            windowWidth = window.innerWidth,
            closestElement;
        
        // loop trough the gotten elements.
        elements.each(function (n, elem) {
            var celoMove = elem.celoMoveTo,
                celoObject,
                distance,
                closestElement,
                closest;
            
            // loop trough the array (the one that contains the data which says at which size the element is going to change) we appended to the element in the index() function.
            celoMove.forEach(function (celoObject) {
                var relativeSize = celoObject.size - windowWidth;
                
                // if the size is under 0 it is valid, because we don't want the biggest size to be the size the child elements are always going to.
                if (relativeSize < 0) {
                  relativeSize = relativeSize - relativeSize - relativeSize;
                    // if closest is not yet set.
                    if (closest === undefined) {
                        closest = relativeSize;
                        closestElement = celoObject.moveTo;
                    // if the relativeSize is smaller than the current closest one, it will become the new closest.
                    } else if (relativeSize < closest) {
                        closest = relativeSize;
                        closestElement = celoObject.moveTo;
                    }
                }
            });
            
            // move the element.
            $(elem).appendTo(closestElement);
        });
    };

    // init functions:
    
    celo.init = function () {
        celo.index();
        celo.check();
    };

    window.onload = function () {
        celo.init();
    };

    window.onresize = function () {
        celo.check();
    };
}());