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 namedMiniDaemon. [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: TheFileReader()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
:hoverpseudo-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
:hoverpseudoclass [zip] -
You can use the
:hoverpseudo-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
:checkedpseudoclass [zip] -
You can also use the
:checkedpseudo-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
::afterpseudo-element in conjunction with theattr()CSS expression and adata-descrcustom data attribute to create a pure-CSS, glossary-like tooltip. [article] - Pure-CSS lightbox [html]
-
The
:targetpseudo-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 {{HTMLElement("select")}} through a
fieldsetof 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 {{ HTMLElement("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
setIntervalwithin 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
onkeypressevent 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.