x-tag

X-Parallax: New HTML5 Web Component

A couple of days ago I blogged about an experiment in the creation of a purely CSS3-driven parallax effect, and ever since I started thinking of wrapping it as a custom HTML5 Web Component to avoid the hassle of class names and rules in setting the slide images or background color.

As a whole, I am very happy with the result, called X-Parallax. It is easy to configure, fully responsive and very fast. Below are a few screenshots, but if you want you may want to jump straight to the demo (acting also as a tutorial of how to use it) and download the code.

Usage

<acidjs-xparallax nav="top" animationspeed="2000" defaultslide="0">
    <acidjs-xparallax-slide label="X-Parallax" background="images/roots.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Download" background="images/sea.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Installation" valign="middle" background="images/flowers.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide align="left" valign="top" label="Customization" background="images/glass.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="HTML5 Web Components" align="left" background="images/broken.jpg">
            <!-- slide content -->
    </acidjs-xparallax-slide>
</acidjs-xparallax>

Screenshots

Top Navigation Bar

x-parallax-top

Right Navigation Bar

x-parallax-right

Bottom Navigation Bar

x-parallax-bottom

Left Navigation Bar

x-parallax-left

Navigation Off

x-parallax-none

HTML Attributes of the <acidjs-xparallax /> Tag:

  • nav: Position of the navigation bar. Default: "top". Other values are "right", "bottom", "left" or "none". Setting nav="none" will not render the navigation bar.
  • animationspeed: Slide speed in milliseconds. The default value is "2000", i.e. 2 seconds.
  • defaultslide: Zero-index visible slide on page load. The default value is "0", i.e. the first slide.

HTML Attributes of the <acidjs-xparallax-slide /> Tag:

  • label: Navigation item label.
  • background: Valid color value or image. Default value: "#639" (my thoughts are with you and your family, Eric).
  • align: Horizontal alignment. Default: "center". Other values: "left", "center" or "justify".
  • valign: Vertical alignment. Default: "middle". Other values: "top" or "bottom".

Supported Browsers:

Evergreen browsers plus Internet Explorer 10 and above.

Check it on this page and have fun!

thumb

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Advertisements

Online Color Picker and Color Conversion Tool

Just a few hours ago I finished and deployed my new online service and very first endeavor in the interesting world of colors and color theory. Say hi to AcidJs.ColorConverter!

Features:

  • Native HTML5 color picker.
  • Color conversion to and from HEX, RGB, HSL, CMYK, HSV,  etc.
  • Color tints, tones and shades.
  • CMYK and RGB color charts, powered by Google Charts.
  • Inspirational color schemes.
  • Detailed information about the selected color.
  • Option to save the raw JSON data, containing the details of the selected color.
  • About 900 named color equivalents.

Built on top of HTML5 WebComponents (AcidJs.XTabs and AcidJs.XOverlay), and utilizing Object.observe() and the (not-so-new) input “color” type (sorry, no fallback for browsers, which do not support it and that’s on purpose!) and using the data from the brilliant ColorHexa service, which I transform to JSON via the REST API running on my server.

Screenshots:

The color picker:

cc-06

Raw data viewer:

cc-05

RGB and CMYK color charts

cc-04

Color conversions table

cc-03

Advanced view – shades, tints, tones and schemes

cc-02

Editor tab

cc-01

Check it on this page and have fun!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Syntax Highlighter HTML5 Web Component Based on Lea Verou’s Prism.JS

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

Usage:

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);
</acidjs-xhilite>

Recently I my HTML5, CSS3 and JavaScript Experiments website received a major facelift and as a next step and I am planning to replace the syntax highlighter I am currently using with AcidJs.XHilite.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
  • width – Optional width in pixels of the code block, for example: width="600".
  • height – Optional height in pixels of the code block, for example: height="200".
  • src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the screenshots below or go straight to the demo and download:

x-hilite-markup

x-hilite-javascript

x-hilite-svg

x-hilite-css

x-hilite-php

x-hilite-svg

x-hilite-java

x-hilite-csharp

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Handy Lorem Ipsum Placeholder HTML5 Web Component

Tired of copy-pasting the same lorem ipsum text anytime you start a new web project? If you are, you will definitely love <acidjs-xlipsum></acidjs-xlipsum>, because it will do this and much more. Utilizing the excellent Loripsum API, developed by twokings.nl, the tag will generate not only plain text, but also headers, links, lists – you name it. Just like this:

<acidjs-xlipsum></acidjs-xlipsum>
<acidjs-xlipsum
    paragraphs="7"
    length="short"
    show="link, ol, dl, headers, ul, bq, code, decorate">
</acidjs-xlipsum>
<acidjs-xlipsum show="link, ol, ul, allcaps"></acidjs-xlipsum>
<acidjs-xlipsum show="plaintext, prude"></acidjs-xlipsum>

x-lipsum

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • paragraphs – The number of paragraphs to generate. Default: "5".
  • show – Comma separated values, such as "link, ol, dl, headers, ul, bq, code, decorate". If none of these is set, only paragraphs will be rendered.
  • length – The average length of a paragraph. Possible values are "short", "medium", "long", "verylong". The default value is "medium".

For complete info, please visit Loripsum API.

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

X-Reflection: HTML5 Web Component for Adding CSS3 Reflections to any Element

For better or worse WebKit’s -webkit-box-reflect and Mozilla’s -moz-element never made it to the official specification of CSS3, although the latter may come pretty useful and has a lot of potential applications. Personally I am not a fan of reflections and they remind me of the mid 90’s water reflection Java applets but I guess that’s because I am not a designer. Nevertheless, I thought that a custom tag (along with the lazy image loader and x-meme) doing this automatically to all of the HTML elements added into it may come useful, so I implemented AcidJs-X-Reflect, which works like that:

<acidjs-xreflect>
    <img src="path/to/image-01.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale=".5" opacity=".75" endcolor="#b00">
    <img src="path/to/image-02.jpg" height="233" width="310" />
</acidjs-xreflect>
<acidjs-xreflect scale="2" opacity=".75" endcolor="#00f">
    <img src="path/to/image-03.jpg" height="233" width="310" />
    <p>Lorem ipsum dolor sit amet...</p>
</acidjs-xreflect>

Once the component kicks in, any element inside of it is supplied with a configurable (scale, end color, opacity) reflection:

x-refelct-image-01 x-refelct-image-02

The reflection is achieved by duplicating the original content in a separate flipped (scaleY(-1)) tag overlayed by a semi-transparent element with gradient. Initially utilized CSS generated content (::after) for the gradient overlay however I noticed that since the effect is applied with JavaScript (all of the properties of the reflection are configurable) the gradient randomly disappeared in Firefox, so eventually I went for a nested <div />. I also gave up the idea of using scoped styles, since they are not widely supported yet.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • endcolor – Reflection end (bottom) color. The value should be a valid color string – named, hex, RGB, etc. The default color is white ("#fff").
  • opacity – Reflection translucence. The default value is ".5". ".5" is more transparent "1" is opaque. Values should vary from "0" to "1".
  • scale – Vertical scaling of the reflection, relative to the original source. The default value is "1". "2" is twice the original source.

Methods, Getters and Setters

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Guitar Chord Diagrams as… HTML5 Web Components. This Rocks!

Being kind of a pest about HTML5 Web Components these days here, and I’m sorry about that. But this new one rocks, and I am really happy with the result of the fun I had the other day, trying to build a guitar chord diagram with pure CSS

Here it is – AcidJs.XChord – a HTML5 Web Component for plotting purely CSS3-driven, image-less, scalable and printer-friendly guitar chord diagrams, supporting any number of strings, wrapped as a fun and easy to use custom tag:

<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
    <acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
</acidjs-xchord>

Using the tag above you get:

6-String Guitar Diagrams:

acidjs-xchord-01

7-, 8-, 9- (yes, I love Djent) Axe Diagrams:

acidjs-xchord-02

Bass Diagrams:

acidjs-xchord-03

… Virtually any-string-number guitar chord diagram.

HTML Attributes of the <acidjs-xchord></acidjs-xchord> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • frets – Optional number of the frets that should render. Default: "4".
  • size – Optional size (number) of the diagram. Default: 1. "1.5" or "2" will render a bigger diagram.
  • startat – From which fret should the diagram start from. Default: "1".
  • description – Optional decription of the chord, for example "This is A-minor".
  • label – Optional label of the chord, for example "Am".

HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string> Tag

  • key – The key of the string, for example "E".
  • state – The state of the played note. Possible values: "empty", "pressed" or "muted".
  • fret – The fret which is the state applied to.

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Fulfill my child dream of becoming a rock star – check the demo and get the component. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Extended File Upload Input, Wrapped as a HTML5 Web Component

Yesterday I finished my latest endeavor of the explorations of the amazing world of HTML5 Web Components. I must say that the deeper I get into the topic, the more I understand their importance, and I am pretty sure that very soon (even much sooner that I dared to speculate a couple of months ago) they will become really popular.

acidjs-xupload

The new component is called AcidJs.XUpload, and is an extended input element for uploading files, similar to <input type=”file” />, but with a lot of additional out-of-the-box features such as multiple/directory upload, icon support, editing of the file list, custom events and last but not least – fully skinnable via CSS. Using it is charming, stylish and so HTML5:

<acidjs-xupload></acidjs-xupload>
<acidjs-xupload width="140" height="44" name="file-02" label="Select files"></acidjs-xupload>
<acidjs-xupload id="file-02" name="file-02" label="Browse for files" multiple></acidjs-xupload>
<acidjs-xupload width="150" height="54" icon="AcidJs.XUpload/icons/icon-01.svg"></acidjs-xupload>
<acidjs-xupload directory label="Select a Folder to Upload"></acidjs-xupload>
<acidjs-xupload multiple accept=".gif" label="Select GIFs"></acidjs-xupload>
<acidjs-xupload multiple accept="image/*" label="Select Images"></acidjs-xupload>
<acidjs-xupload multiple accept="video/*" label="Select Videos"></acidjs-xupload>

HTML Attributes

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • width – Optional width of the component. Default is auto.
  • height – Optional height of the component. Default is 2em.
  • name – Optional name of the component which will be used as query parameter. No default name.
  • label – Optional label of the component. Default is Browse....
  • icon – Optional icon of the component. By default no icon is set.
  • disabled – If set, the component will be rendered disabled.
  • multiple – If set, multiple selection will be enabled, so users will be able to select multiple files via Ctrl/Shift + Click or Ctrl + A.
  • accept – Allows the setting of file filters (Check the examples for browser support).
  • directory – If set, users will be able to upload a whole directory and sub-directories (Check the examples for browser support).
  • nofiles – If set, users will be able to remove items from the drop down, containing the currently selected files.

* Due to security reasons, setters and getters are disabled.

JavaScript Methods

Any native JavaScript method (getElementById, querySelector, etc. plus the component-specific:

  • getPostData() – returning the current FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList).

* Due to security reasons, setAttribute and removeAttribute will not take effect.

JavaScript Events

  • "acidjs-xupload-change" – Similar to the normal change event, but returning the FileList, which can be used to upload the data to the server (check the information on this page for more info regarding FileList):
    $("#file-02").bind("acidjs-xupload-change", function(e, data) {
        window.console.log(e.type, data);
    });
    

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.