MarkupAdaptive

[Martijn Geerts]

MarkupAdaptive

This module aims to be a helper for developing an adaptive site. MarkupAdaptive is a module that injects classnames representing 'media queries'. Fire events after the browser is resized and fires an event when a media query is changed. Optionally it can write a cookie with the ‘media query’ classname of the current viewport size.
 
The main purpose of this module is about syncing media queries with javascript. Say I want to have a slider on the iPad but don't want that slider on the phone I could now destroy the slider exactly on the right time. You could respond server side with this cookie, but keep in mind that you then need a workaround for the default caching solutions. (template cache or ProCache)
 
The module script works with injected media queries and a HTML element tested against those. This javascript process starts real early in the load process and is extremely fast. It starts even before the body tag is parsed. In Explorer 7 and 8 clientWidth is used to pinpoint the “classname of the viewport size”. To support Explorer 7 and 8 your media queries should be specified in pixels.
 

In the wild
An working example of the module is hosted on hosted on lightning.pw Instant ProcessWire Hosting from conclurer.com. Please don't forget to view the console.log(). The site doesn't use any media query in the stylesheet. Not that I recommend building adaptive sites without media queries. .

How to install

• Install the module
• At least open the Module configuration, optionally save it.
• Insert the below code in the HEAD of your html file

<script><?php echo $modules->get('MarkupAdaptive'); ?></script>

Javascript methods available when using MarkupAdaptive.

( More instructions like Event support IE7 & 8 are available in the 'example template' packed in the module folder )

/**
 * Getting information with Javascript.
 *
 */

// How to catch the end of a resize (with jQuery)
$('html').on('resized', function(e) {
    console.log('Browser window is resized');
});

// Respond on a media query change
$('html').on('mediaquerychange', function(e) {

    // Get the old class name before the “mediaquery” change has occurred
    var oldClass = MarkupAdaptive.getOldClass();

    // Get the new class belonging to the current “mediaquery”
    var newClass = MarkupAdaptive.getClass();
    
    console.log('mediaquerychange, from: “' + oldClass + '” to: “' + newClass + '”');
});

// Get the current class
var current = MarkupAdaptive.getClass()

// Get the old class, the class before the current
var old_class = MarkupAdaptive.getOldClass()

// Mediaquery JSON object which originates from your Modules config
var sizes_object = MarkupAdaptive.getJson()

// Mediaquery JSON object which originates from your Modules config'
var array_with_classnames =MarkupAdaptive.getArray();

// Is the current browser IE8 (returns true/false)
MarkupAdaptive.isIE() // (bool)

// Is the current browser IE8
MarkupAdaptive.isIE(8) // (bool)

// Is the current browser less then or equal to IE9 (lt, lte, gt, gte)
MarkupAdaptive.isIE(9, 'lte') // (bool)

// get the cookie, when checked in the module configuration
function getCookie(name) {
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
    return match ? match[1] : null;
}

console.log('Classname cookie value: ' + getCookie('MarkupAdaptive'));

Special thanks to all the people from conclurer who made it possible to host MarkupAdaptive. When you're searching a lightning fast hoster. You should consider lightning.pw.

View on GitHub

Download GitHub

[Martijn Geerts]

Having a nasty bug in Explorer 9 and higher. Please wait using this one till this is fixed. Sorry

Huge rewrite & now polyfilled with the matchMedia polyfill from Scott Jehl, Paul Irish, Nicholas Zakas, David Knight.

[renobird]

Head explodes.

[isellsoap]

Like it a lot, especially the configuration options in the GUI. But to be honest, I think I’d use a pretty robust solution like enquire.js if I’d want media query handling via JavaScript.

[Joss]

Okay - some serious reading needed here.

This might save me a lot of messing!

[remove]

Hope you can help me out...

I have a different template for my mobile version using two media queries

@media only screen and (min-device-width : 768px) and mobile @media only screen and (max-width: 767px) 

My goal is to hide elements for the mobile template on phones to reduce loading time. I want to use this module and add display: none.

I can't get it to work. In settings I added two Base classnames

767px small
768px large

Added a style and class with div

<style>
    .small  {  }
    .large .hiddenphone { display: none }
</style>

<div class="hiddenphone">

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<img class="img-responsive" src="<?php echo $config->urls->templates; ?>images/logo.jpg" width="235" alt="" />
		</div>
	</div>
</div>

</div>

Is this approach possible?

[Martijn Geerts]

This is possible:

.small .show-on-mobile { display: block; }
.large .show-on-mobile { display: none; }

.small .hide-on-mobile { display: none; }
.large .hide-on-mobile { display: block; }

Remember that the module is more meant for media-query sync (CSS to Javascript)

For these things you're probably better of using media queries when you don't need support for IE7 & IE8. Don't forget that support for IE7 & IE8 what is in it self questionable as most machines running IE7 & IE8 have a monitor with atleast 1024px.

@media screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
  .show-on-mobile {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .hide-on-mobile {
    display: block;
  }
  .show-on-mobile {
    display: none;
  }
}