Examples and demos from articles

What follows is a brief list of examples and demos from our theoretical articles.

Live demos

JavaScript

Rich-Text Editor ^[zip]

How to standardize the creation of complete Rich-Text Editors in web pages. ^[article]

Typewriter effect ^[html]

The following example will delete and re-type simulating a typewriter all the text content of the NodeList which match a specified group of selectors. ^[article]

Fade In/Out ^[html]

Sometimes a page uses dozens and dozens of animations. In such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the clearTimeout() function. A possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them.
Here is a possible and minimalist example of such abstraction, which for this reason we named MiniDaemon. ^[article]

Image preview before upload ^[html]

The FileReader.prototype.readAsDataURL() method is useful, for example, to get a preview of an image before uploading it. ^[article]

Note: The FileReader() constructor was not supported by Internet Explorer for versions before 10. For a full compatibility code, see also our crossbrowser possible solution for image preview.

Determine if an element has been totally scrolled ^[html]

This example shows how to determine whether a user has completely scrolled an element or not. ^[article]

CSS

Pure-CSS dropdown menu ^[html]

With the :hover pseudo-class you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). ^.[article]

Pure-CSS web gallery based on the :hover pseudoclass ^[zip]

You can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. ^.[article]

Pure-CSS web gallery based on the :checked pseudoclass ^[zip]

You can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. ^[article]

Pure-CSS tooltips ^[html]

This shows the use of the ::after pseudo-element in conjunction with the attr() CSS expression and a data-descr custom data attribute to create a pure-CSS, glossary-like tooltip. ^[article]

Pure-CSS lightbox ^[html]

The :target pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox. ^[article]

Pure-CSS editable (pseudo)<select> ^[html]

This example shows how it's possible to simulate an editable <select> through a fieldset of radioboxes and textboxes. ^[article]

Expandable elements ^[html]

This example shows how it is possible to show/hide classes of elements in pure CSS. In this demo there is also an example of a "toggle button" rendered through a <label> element. ^[article]

Code snippets and tutorials

JavaScript

Complete cookies reader/writer with full unicode support

This little framework consists of a complete cookies reader/writer with unicode support.

XML to JSON conversion snippets (JXON)

JXON (lossless JavaScript XML Object Notation) is a generic name by which is defined the representation of JavaScript Objects using XML. There are no real standards for this conversion, but some conventions begin to appear on the web.

Autogrowing <textarea>

This example shows how to make a textarea really autogrowing during a typing.

Insert some custom text in a <textarea>

This example shows how to insert some HTML tags or smiles or any custom text in a textarea.

Using setInterval within animations

Sometimes a page uses dozens and dozens of animations. In such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the clearTimeout() function. A possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them.

Convert relative paths to absolute

This example show how to translate relative paths to absolute paths.

A shortcut to massively modify the DOM

This example shows how to create a framework able to modify many properties of DOM objects at the same time.

Filter the digitation into a form field, Capture the digitation of a hidden word

This example shows the use of the onkeypress event during a digitation into a form field.

AJAX – Submitting forms and uploading files

This paragraph shows how to submit forms in pure-AJAX.

Multipage AJAX navigation example

This article provides a working (minimalist) example of a pure-AJAX web site composed only of three pages.

Do something if current document has changed since last visit

Here is a possible example of how to show an alert message when current document changes.

Do something if an external page has changed since last visit

Here is a possible example of how to show an alert message when an external page changes.

Import scripts

Here is a possible example of how to dynamically import scripts with JavaScript.

CSS

CSS Tutorial

Aimed at complete beginners, this CSS tutorial for beginners introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of the language with practical examples that you can try for yourself on your own computer and illustrates the standard features of CSS that work in modern browsers.

Dropdown menus rules

How to create pure-CSS dropdown menus.

See also

• Code snippets