A few months ago while working on a client project, we came across a situation where some content needed to be moved to some very unusual positions at certain breakpoints—and by unusual I mean so unusual that media queries alone couldn’t do it! See the problem with media queries is that elements would be moved to positions relative to where they were placed in the DOM, yet in our situation we needed to flip the script. We needed to sort of “custom transport” these little guys to other locations that were not really easy to do with Media Queries alone.
Luckily for us some good guy had faced the same problem and had written a jQuery plugin to solve this issue. The plugin is called jQuery Transport. It’s like media queries on steroids.
In this short write-up I will just show how we used it and hope that you find a use for it in some of your future/current projects. As usual, I’ve provided a working demo and complete code just so you can tinker around with it. You’re welcome!
What I Did
I created a sample project which you can clone from GitHub. As you can see, I wrote my CSS code in SASS, which is why we have two files: layout.css and layout.scss. The .scss file containts all the code in SASS while the .css file is the compiled version of it.
What I Didn’t Do
Well, I am a very lazy guy and sometimes when I am in my ‘lazy zone’, I leave things incomplete. Unfortunately for you guys, this was one of those moments, so I left out the mobile navigation part. You will notice that if you click on the mobile navigation icon, nothing happens …
Have you ever watched that TV series The Tomorrow People where these guys move from one location to another in a matter of seconds? they call it teleporting and that’s what we are going to be doing here. We will ‘teleport’ some content from point A to point B in a matter of ‘window resize event’.
Suppose you want to to move box A to point B when we are on a mobile device, here are two blocks of codes for point A and Point B
<div class="point-b">
Point B Content
</div>
<div class="point-a">
Point A Content
</div>For point A to Move to point B when lets say screen is a tablet you are going to have to do the following:
First, create container for point A to be transported to, this container should be put where you want your content to move to AKA the destination. In our case we put it inside point B block.
<div class="point-b">
<div id="point-a-inside-boint-b">
<!-- point A will move here -->
</div>
Point B Content
</div>
<!-- Then we need to wrap point A's container
with another div with the following data attributes -->
<div data-transport="tablet!#point-a-inside-point-b|mobile!#point-a-inside-point-b">
<div class="point-a">
Point A Content
</div>
</div>The code above creates two breakpoints, one called ‘tablet’ and another called ‘mobile’. As you can see from the above code block, the ‘tablet’ breakpoint is followed by #point-a-inside-point-b, that’s the <div> element we added inside point B and that’s like saying “Hey media query, at breakpoint ‘tablet’ move the whole block A to a location that has an id ‘point-a-inside-point-b'”.
You will have noticed that the two breakpoints are separated by a pipe operator, which means you can create as many breakpoints are you want. Just separate them with the pipe “|” operator.
We then write JavaScript code to specify what screen dimensions our breakpoints should be applied to.
$(document).ready(function(){
$('[data-transport]').transport({
mobile: "(max-width: 480px)",
tablet: "(max-width: 1024px)"
});
});The JavaScript code above just calls the transport() method of the jQuery Transport plugin and instructs it that our ‘mobile’ breakpoint is when our screen size’s maximum width is 480 pixels and ‘tablet’ breakpoint is when the screen’s size’s maximum width is 1024 pixels.
Don’t forget to include jQuery and the jQuery Transport plugin in your project file. The jQuery file should always be included before the jQuery Transport file and the code above should always go below these two.
Let me know below if you’re having trouble getting it to work.