public

Notifies a user if they arrive at an outdated documentation page for jQuery Mobile.

  • Download Gist
jquery.docs.versionNotifier.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
// ==UserScript==
// @match http://jquerymobile.com/demos/*
// ==/UserScript==
 
// notifies user of newer version of jQuery Mobile documentation
(function versionNotifier() {
var path = window.location.pathname,
// regex for version number in url
re = /[0-9ab.]+\//,
// extract version being viewed from path
// this is the only way I could reliably find to get this
// data-url on page element is inconsistent across doc versions
docsVer = path.match(re).toString().split('/')[0],
// cache body element
body = document.getElementsByTagName('body')[0],
// create iframe to be appended to body
iframe = document.createElement('iframe');
// set the src and style attributes
iframe.setAttribute('src','http://jquerymobile.com/demos');
iframe.setAttribute('style','display:none;');
// append the iframe
body.appendChild(iframe);
// when the iframe loads
iframe.onload = function() {
// get the current version off the first jqm page's data-url attr
var currentVer = iframe.contentDocument.getElementsByClassName('ui-page')[0].getAttribute('data-url').split('/')[2];
// if we're not already viewing the current version
if (currentVer !== docsVer) {
// cache the content div (where we're going to insert the message
var contentDiv = body.getElementsByClassName('ui-content')[0],
// create a div to hold our message
messageDiv = document.createElement('div'),
// create the message
message = document.createTextNode('Looks like this is an old version of the documentation. '),
// create a link
link = document.createElement('a'),
// and the link text
linkText = document.createTextNode('Go to the latest version');
// set classes to gives us a yellow notification bar
messageDiv.setAttribute('class','ui-bar ui-bar-e');
// prevent jqm from using ajax to load page
link.setAttribute('data-ajax','false');
// this prevents ajax request on older versions of jqm
link.setAttribute('rel','external');
// set href to latest docs
link.setAttribute('href','http://jquerymobile.com/demos/');
// append link text to the link
link.appendChild(linkText);
// append the message and link to the message container
messageDiv.appendChild(message);
messageDiv.appendChild(link);
// insert it at the top of the content div
contentDiv.insertBefore(messageDiv,contentDiv.firstChild);
// and remove the iframe
body.removeChild(iframe);
}
else {
// if we're already on latest version of docs, just remove the iframe
body.removeChild(iframe);
}
};
})();

This is a userscript (only tested in Chrome) that adds a notification to older jQuery Mobile docs pages that you're not viewing the latest version of the docs. It's pretty hacky, but it's the only way I could figure out to do it.

The problem this hopes to solve: Do a Google search for pagecreate (for example) on jquerymobile.com. You'll get results for several different versions of the jQuery Mobile docs, but frequently not the docs for the current release. https://www.google.com/search?q=site%3Ajquerymobile.com+pagecreate

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.