OhReallyJS

script-focus.js

Synopsis

This script will add a button to your webpages, that will hide (and re-display) everything but the main content. This enables your visitors to get rid of all distracting elements, and focus on The Things That Matter™.

License

Copyright © 2016 Rob la Lau <https://ohreally.nl/>

This work is licensed under a Creative Commons Attribution 4.0 International License (https://creativecommons.org/licenses/by/4.0/deed.en).

Please be aware that minimizing this script does not mean that you don't have to include the copyright and author info.

Download

After reading the license information, you can download the current version of script-focus.js by clicking → here ←going to https://js.ohreally.nl/download/script-focus.js

Please, host the script with your own website instead of linking to the scripts at js.ohreally.nl directly.
Read thisRead https://js.ohreally.nl/hiy if you want to know why.

Dependencies

This script depends on script-url.js.

To enable translations for the text on the button, you will also need script-querystring.js.

This script will not do anything if your pages do not include HTML5's <main/> tag. If this tag is not present, the button will not be shown, and your pages will function as they did before.

See Browser compatibility for the list of supported/supporting browsers.

Installation

Download and install script-url.js.

Put this in the default stylesheet for your website:

#focusbutton {
	float : right;
	/*
	Feel free to style the button as you like
	(but be aware that 'position', 'top' and 'right'
	will be overridden when the button is activated).
	*/
}
@media print {
	#focusbutton {
		display : none;
	}
}

Save this stylesheet as style-focus.css to the root of your website ( http://www.example.com/style-focus.css ):

body > * {
	display : none;
}
main {
	display : block;
}
#focusbutton {
	position : fixed;
	top : 25px;
	right : 25px;
}

Do not put a <link/> tag for this stylesheet in the <head/> section of your webpages!

Save the script to the root of your website (http://www.example.com/script-focus.js), and add these lines to the <head/> section of your webpages:

<script type="text/javascript" src="/script-url.js"></script>
<script type="text/javascript" src="/script-focus.js"></script>

Usage

Wrap your main content in HTML5's <main/> tag. This script will automatically detect it, and insert the 'Focus' button as it's first child.

To make use of the translations for the text on the button, download and install script-querystring.js, and change your <script/> tag to include a language parameter:

<script type="text/javascript" src="/script-focus.js?language=nl"></script>

And, obviously, you can replace nl with any other language code found in, or added to, the script.

Examples

To see the 'Focus' button in action, scroll to the top of this page (right side of the page, under 'Available languages'; it has the text 'Zoom in' on it).

Browser compatiblity

The script should be supported by any moderately recent browser. The <main/> tag and the id attribute for <script/> tags, however, are both HTML5. Below are the version numbers for browser support for the <main/> tag.