Just include the script in your document somewhere. It'll handle the rest.
RANDOMIZER.js finds every element with the class
randomizer and sets the attribute
hidden on every child but one, which is then displayed.
Randomizer.init and the script will search the page for all elements with class
randomizer and hide all but one of its children.
It is recommended that you set the
hidden attribute on all
randomizer elements, so that they do not display until the script has time to process them, like so:
<div class="randomizer" hidden> … </div>
RANDOMIZER.js will automatically remove the
hidden attribute from
randomizer elements after they are done processing.
EXPORT.js creates two data URIs, one pointing to a plain-text version of a document (with some formatting), and the other to an html document, which is identical to the original but for the following changes:
- all scripts in the
- all linked stylesheets are replaced with equivalent
- if no
<base>element exists, a new one is created pointing to the original URL (
window.location.href) of the document
Same-origin checking is done for stylesheets included with
@import but not for
<link> elements; be sure to use the
crossorigin attribute if you need to do a CORS request or your code might break.
Export.init with the element in which to place the links; this element is given as the return value.
Note that all content of this element will be replaced. For example:
will create and append a footer with the links to the bottom of the document.
By default, the plain-text version will only contain the contents of the
You can change this by providing a second argument when you call
Export.init, for example:
You can include the
data-no-export attribute on the root element of the document to prevent exporting.
If this attribute is provided,
Export.init will instead return a comment node.
EXPORT.js uses an extended markdown syntax. In particular, the following additions/changes are made:
<aside>elements are represented with
<b>elements are represented with
<br>elements are represented with
\followed by a newline
<del>elements are represented with
<dfn>elements are represented with
<em>elements are represented with
<h6>elements take the form
# … #
<hr>elements are represented with
* * *
<i>elements are represented with
<iframe>elements are represented with
<ins>elements are represented with
<li>elements are always represented using block syntax
<q>elements are represented with
<small>elements are represented with
<s>elements are represented with
<strong>elements are represented with
<sub>elements are represented with
<sup>elements are represented with
Tables are currently not displayed well in EXPORT.js. Other elements may be rendered in harder-to-describe ways; for example, definition lists.
Here's a sample HTML file using LOAD.js:
The LOAD.js script may be included anywhere on the page. It will run automatically after all DOM content is loaded.
LOAD.js requires an additional element,
#load-data, an explanation for which follows.
#load-data may technically be any element with an
load-data, using a
<script type="text/plain"> element is recommended.
src attribute, on its own line inside the
It may optionally be surrounded by whitespace and be preceded by a single colon.
Here are some examples:
<script type="text/plain" id="load-data"> some_crazy_script.js http://example.com/another_one.js : colon_is_ignored.js </script>
Alternatively, you can put the list of files (as they would appear in
#load-data) inside a separate text file, and load it asynchronously.
To do this, simply type
POST (depending on the method you wish to use), followed by a colon the URL of the file.
This will send an XMLHttpRequest to access the file, whose contents will be read as plain text.
You can place whitespace before the method, between the method and the colon, and after the colon.
External text files can also contain
POST lines, in which case those files will also be read.
LOAD.js doesn't currently check to make sure there aren't duplicates, or to prevent endless loops, so be careful when doing this!
You can include comments inside of the
#load-data element by preceding a line with two colons.
Whitespace can appear before, after, or even in-between these colons, and the entire line will be ignored.
Comments must be on their own line, for now.
Running scripts after everything is loaded
Upon loading every script, LOAD.js dispatches the
load-complete event to
You can use
document.addEventListener("load-complete", someFunction, false) to listen for this.
Other things to consider
LOAD.js creates a new global object,
Load, in which it stores all of its data.
Load for your own stuff to avoid breaking anything.
There is currently a maximum script cap of 32.
LOAD.js also requires
addEventListener; be sure to polyfill this before loading LOAD.js if you need to support older browsers.
YT Seek allows you to playback a certain portion of an embedded YouTube player just by clicking on a link.
YT_Seek.init(), and YT Seek will add the YouTube
<iframe> API to the page.
If you've already done this, there is no need to call the function.
There are two data-attributes in YT Seek:
Set these attributes to the number (in seconds) that you wish to begin and end the range of playback.
data-yt_seek-start will start playback at the beginning of the video, and not specifying
data-yt_seek-end will make playback go to the end of the video.
Here is a sample link using YT Seek:
<a href="#ytplayer" data-yt_seek-start="5" data-yt_seek-end="20">text</a>
This link will play back the embedded YouTube player with id
ytplayer for the range 5 to 20 seconds.