2014-02-24T07:38:00.001-08:00
That is why I've written my own library to help with the sorting. Below my library(which is dependant on jQuery. If you need a library that is not dependant on library that is not jQuery in dependant contact me:
/* Copyright 2014 Michael Dibbets, all rights reserved.
This library is free to use for non commercial use,
if you leave a comment below the blog post at
http://all-purpose-programming.blogspot.nl/2014/02/chaning-order-of-appearance-of-elements.html
where you are implementing this libary.
For commercial use contact me to come to an licensing agreement.
mdibbets [at] outlook [dot] com
My prices are fair and reasonable.
ususage of this script without notification of the author
in the before mentioned ways is not permitted.
*/
function JX_responsive_sort(precursor)
{
if(typeof precursor == 'undefined')
{
precursor = 'conditional';
}
// our sorting array
var orderofthings = new Array();
// window width
var windowwidth = $(window).innerWidth();
// get all classes named conditional
jQuery('.'+precursor).each(function()
{
// get all classes of the conditional element
var classList = jQuery(this).attr('class').split(/\s+/);
// loop through all classes of the current element
// backwards compatible... of course
for(c=0;c<classList.length;c++)
{
item=classList[c];
// no need for this one bub
if(item != precursor)
{
if(item.substring(0,11) == precursor)
{
// sanitise the item
item = item.substring(12,item.length);
// from which screenwidth is this rule active?
var startwidth = parseInt(item.substring(0,item.indexOf('_')));
// to which screenwidth is this rule active?
var endwidth = parseInt(item.substring(item.indexOf('_')+1,item.indexOf('_',item.indexOf('_')+1)));
if(windowwidth >= startwidth && windowwidth <= endwidth)
{
// remove the widths so all that remains are commands
item = item.substring(item.indexOf('_',item.indexOf('_')+1)+1,item.length);
// split on hypens, since they are the commands separators
var commands = item.split(/-/);
for(i=0;i<commands.length;i++)
{
// get the instructions
var instructions = commands[i].split('_');
// to know the command remove the first element
var command = instructions.shift();
// command order - Instruction to display the elements in the desired order.
// This is a top level ordering of parent elements in the conditional_mainwrap
// In order to change the ordering of child elements you'll have to "pop" them
// a level higher.
// allowed variables:
// 0 : order number priority. Try not to cause conflicts
if(command == 'order')
{
// add the this element at the desired position into the order of things.
orderofthings.push({order: instructions[0] , theobj : this });
}
// command pop - Instruction to remove the current element from its parent,
// and attach it to the parents parent.
if(command == 'pop')
{
// an item that switches positions needs an "returning" wrapper.
// that is the first parent.
// Then we have the normal container that needs to be escaped.
// Then we have parent where we wish to attach it to.
if(jQuery(this).parent().attr('id') == precursor + '_wrap_' + jQuery(this).attr('id'))
{
jQuery(this).appendTo($(this).parent().parent().parent());
}
}
// command repop - Instruction to return the current element to it's designated position
// This is why a poppable element needs a wrapper, so we know where to return it.
if(command == 'repop')
{
jQuery(this).appendTo('#conditional_wrap_'+jQuery(this).attr('id'));
}
}
}
}
}
}
});
// set a simple variable to get the jQuery object of the parent wrap
parentkeeper = jQuery('.'+precursor+'_mainwrap');
// sort the arrays so the orderofthings get's it's sorting from the ORDER command.
orderofthings = orderofthings.sort(keysrt('order',false));
for(c=0;c<orderofthings.length;c++)
{
if(typeof orderofthings[c] != 'undefined')
{
jQuery(orderofthings[c]['theobj']).appendTo(parentkeeper);
}
}
}
jQuery(document).ready(function(){
JX_responsive_sort();
});
jQuery( window ).resize(function()
{
JX_responsive_sort();
});
function keysrt(key,desc) {
return function(a,b){
return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
}
}<HTML>
<HEAD>
<STYLEtype="text/css">
#consol {
font-family:courier;
color:lime;
font-weight:400;
background-color:black;
border:1px inset gray;
padding-left:10px;
}
span
{
display:inline-block;
margin: 50px 50px;
font-size:4em;
font-weight:800;
text-shadow: 3px 3px 10px gray;
font-family:sans-serif;
}
#red {
background-color:red;
border: 1px solid brown;
display:inline-block;
}
#yellow1, #yellow2
{
background-color:yellow;
border: 1px solid lightbrown;
}
#black
{
display:inline-block;
border:1px solid black;
background-color:gray;
}
#green1, #green2, #green3
{
display:inline-block;
background-color:lime;
border:1px solid darkgreen;
}
#blue
{
display:inline-block;
border:1px solid darkblue;
background-color:lightblue;
}
#purple1, #purple2, #purple3
{
display:block;
border: 1px solid darkpurple;
background-color:purple;
}
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
width:600px;
}
#yellow1, #yellow2
{
width:250px;
height:300px;
margin:20px;
float:left;
}
#black
{
float:right;
}
#green1, #green2, #green3
{
clear:both;
float:right;
width:200px;
height:150px;
margin:20px;
}
#blue
{
width:600px;
}
#purple1, #purple2, #purple3
{
width:150px;
margin:25px;
float:left;
height:200px;
}
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
width:100%;
}
#yellow1, #yellow2
{
width:90%;
margin:5%;
float:left;
}
#black
{
width:100%;
}
#green1, #green2, #green3
{
width:90%;
margin:5%;
}
#blue
{
width:100%;
}
#purple1, #purple2, #purple3
{
width:90%;
margin:5%;
}
}
</STYLE>
</HEAD>
<BODY>
<div class="conditional conditional_mainwrap">
<div id="black" class="conditional conditional_0_875_order_4 conditional_875_3000_order_1">
<div id="conditional_wrap_green1" class="conditional">
<div id="green1" class="conditional conditional_0_875_pop-order_2 conditional_875_3000_repop whoa">
<span>1</span>
</div>
</div>
<div id="green2">
<span>2</span>
</div>
<div id="green3">
<span>3</span>
</div>
</div>
<div id="red" class="conditional conditional_0_875_order_1 conditional_875_3000_order_2">
<div id="yellow1">
<span>1</span>
</div>
<div id="yellow2">
<span>2</span>
</div>
</div>
<div id="blue" class="conditional conditional_0_875_order_3 conditional_875_3000_order_3">
<div id="purple1">
<span>1</span>
</div>
<div id="purple2">
<span>2</span>
</div>
<div id="purple3">
<span>3</span>
</div>
</div>
</div>conditional_0_875_pop-order_2