MarkupAdaptive by martijn-geerts

Javascript helper to sync your CSS media queries with javascript.

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 all about syncing media queries with javascript.

Say you want to have a slider on the iPad but don't want that slider on the phone you now can destroy the slider exactly on the right time.

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”.

How to use

  1. Install the module.
  2. Optionally set your preferred settings in the module configuration.
  3. Insert the script like this.
    • <script><?php echo $modules->get('MarkupAdaptive'); ?></script>
    • This script should run before document ready so it should be in the HEAD.

  4. You're ready to go.
/**
 * 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'));

A working example is hosted on lightning.pw. This page doesn't use any media queries in the stylesheet just to show that it is possible. It is not recommended however. Don't forget to open devtools to see the javascript events in action.

Big thanks to conclurer! This instant ProcessWire hosting is awesome.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • New main/master version of ProcessWire that has more than 220 commits, resolves more than 80 issues, adds numerous new features, performance improvements and optimizations, and consumes HALF the disk space of our previous release— More
    13 May 2022
  • Summary of weekly core updates for 22 April 2022 More
    22 April 2022
  • ProcessWire 3.0.198 core updates: in this post we take a closer look at 3 useful new features added in this version— More
    15 April 2022

Latest news

  • ProcessWire Weekly #418
    In the 418th issue of ProcessWire Weekly we'll cover recent highlights, share some tips and tricks, and check out the new master version of ProcessWire, 3.0.200. Read on!
    Weekly.pw / 14 May 2022
  • ProcessWire 3.0.200 new master/main version
    This new main/master version has more than 220 commits, resolves more than 80 issues, adds numerous new features, performance improvements and optimizations, and consumes HALF the disk space of our previous release. This post covers all the details.
    Blog / 13 May 2022
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer