- By James Scariati
- February 2016
Change the display order of content on an HTML page just by adding querystring parameters to its URL. Content is rearranged entirely on the front-end with CSS flexbox, letting you create variations on-the-fly without any server-side component or deployment process.
- jQuery
- Flexibility (for IE9 support)
Include jQuery, Flexibility, flexstring.css, and the jquery.flexstring.min.js plugin in your HTML, and set up a basic page layout where your content is wrapped with a parent container:
<head>
<link rel="stylesheet" href="css/flexstring.css" />
</head>
<body>
<div id="container">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
<script src="lib/jquery.min.js"></script>
<script src="lib/flexibility.js"></script>
<script src="lib/jquery.flexstring.min.js"></script>
</body>Then call flexString() on the container:
$(document).ready(function() {
$("#container").flexString();
});You can append the following querystring parameters to adjust the display order of page content:
order: a comma-delimited numerical list that specifies the display order of the container's children. Also acceptsreverseto reverse the natural display order orrandomto randomize ithide: a comma-delimited numerical list of child elements to hide. The hidden elements remain in the DOM, so you can toggle their visibility after the initial page load if necessaryremove: equivalent tohide, except the child elements are removed from the DOM entirely
Show the fifth <section> first, followed by the first <section>, then the fourth <section>, etc.
index.html?order=5,1,4,2,3Reverse the order of the <section>s and hide the first and fifth.
index.html?order=reverse&hide=1,5Hide the fourth <section>, remove the second <section>, and randomize the order of the remaining <section>s.
index.html?order=random&hide=4&remove=2Because CSS flexbox is used to reorder the page content, the DOM retains the original order. Therefore, jQuery methods
like .prev() and .next() will follow the DOM order, not the display order.