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

  • ProcessWire 3.0.190 has 15 commits relative to 3.0.189 and contains a mixture of issue resolutions and feature additions. We’ll review these below, in addition to updates for the PageAutosave and ProFields Table modules— More
    3 December 2021
  • Great video by @jlahijani that demonstrates his ProcessWire page builder using ProFields Repeater Matrix, the new Page Autosave + Live Preview module and Uikit 3— youtube.com/watch?v=Rb5kiU…
    13 November 2021
  • More development on page automatic save this week, plus the addition of live preview— More
    12 November 2021

Latest news

  • ProcessWire Weekly #394
    In the 394th issue of ProcessWire Weekly we'll share the latest ProcessWire news and updates, including some highlights from the support forum, the latest weekly update from Ryan, and more. Read on!
    Weekly.pw / 27 November 2021
  • ProcessWire 3.0.190 core updates
    ProcessWire 3.0.190 has 15 commits relative to 3.0.189 and contains a mixture of issue resolutions and feature additions. This post covers them all, in addition to updates for the PageAutosave and ProFields Table modules.
    Blog / 3 December 2021
  • Subscribe to weekly ProcessWire news

“Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer