Website Widgets and Components

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.

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.

HTML5 Web Component for Country Flags

Recently I discovered the huge free data sets on geonames.org, and I am actually planning a series of HTML5 Web Components which utilize this data. The first one is X-Flag – a custom HTML5 tag, able to display country flags out of a specified country code in three different sizes:

<acidjs-xflag code="bg"></acidjs-xflag>
<acidjs-xflag code="cz" size="small"></acidjs-xflag>
<acidjs-xflag code="de" size="medium"></acidjs-xflag>
<acidjs-xflag code="mt" size="large"></acidjs-xflag>

thumb

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

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

  • code – Required valid country code, for example "bg".
  • size – Optional size of the flag, a choice between "small", "medium" and "large". Default: "medium".

JavaScript Methods of the <acidjs-xflag></acidjs-xflag> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. 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-Ellipsis – Native Multiline Ellipsis, Truncation and Text Capping as a HTML5 Web Component

X-Ellipsis is a custom HTML5 Web Component, enabling easy text truncation, capping and ellipsis, which can be used as a simple HTML tag, without any additional JavaScript:

<acidjs-xellipsis cap="256" labelexpand="read more" labelcollapse="collapse">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo?
</acidjs-xellipsis>

While playing with the demo and downloading the code, you may want to take a look at it’s simple, but powerful API.

HTML Attributes of the Tag:

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

  • cap – Optional number, specifying the length at which capping should occur. Default: "128".
  • labelexpand – Optional expand label. Default: "»".
  • labelcollapse – Optional collapse label. Default: "«".
  • expand – If set to "off", expanding will be disabled. Default: "on".

JavaScript Methods of the Tag:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

  • cap(string) – Manually set new capping value to the queried element.
    • JavaScript:
      document.querySelector("#text-01").cap(256);
    • jQuery:
      $("#text-01").get(0).cap(256);
  • content(string) – Set new capping value to the current content of the queried element.
    • JavaScript:
      document.querySelector("#text-01").content("Lorem ipsum dolor, blah, blah, blah.");
    • jQuery:
      $("#text-01").get(0).content("Lorem ipsum dolor, blah, blah, blah.");

     

Happy text capping and make sure you check my other HTML5 Web Components experiments and demos!

x-ellipsis

X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web. 
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology: 
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will 
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

x-notifications-bar-html5-web-component

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

  • bgcolor – Optional background color. Default value: “#e34c26”.
  • expanded – Boolean, optional. Default: “true”.
  • message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
  • loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!

X-Password: HTML5 Web Component Input on Steroids

Just finished my new experiment with HTML5 Web Components and Mozilla X-Tags, called X-Password. What you get is a JavaScript-less extended password input, allowing Windows 8-like password reveal behavior out of the box:

<acidjs-xpassword></acidjs-xpassword>

x-password

The input supports all JavaScript getters, setters, events and form submission is handled natively. X-Password does not have any required attributes, but to achieve different behaviors you may play with the following (and also any other HTML attribute).

  • width – Optional input width, default: 300
  • name – Optional input name
  • id – Optional input id
  • enabled – Boolean, optional. Default: true
  • editable – Boolean, optional. Default: true
  • placeholder – Placeholder text, optional.
  • value – Optional default value
  • buttonhint – Optional tooltip for the reveal button
  • visible – Optional, boolean. If set to true, the input will be rendered as text type

You can check the demo and download X-Password on this page, and if you are interested in the exciting world of HTML5 Web Components, you may check my other posts dealing with this technology.

Have a great weekend!

HTML5 Web Component for Embedding YouTube Videos

Continuing the experiments with HTML5 Web Components I started a few weeks ago, I am happy to present my latest endeavor – HTML5 Web Component, which can be used to embed YouTube videos as a custom tags:

<acidjs-youtube videoid="wvHsX2lSW64"></acidjs-youtube>

youtube-video-html5-web-component

The component utilizes YouTube’s embedding API, and all of the parameters are supported as HTML attributes. Only videoid is required, the rest in the list are optional:

  • videoid – ID of the video (required), as in the url: https://www.youtube.com/watch?v=wvHsX2lSW64
  • width – Player width (optional). Default: 640
  • height – Player height (optional). Default: 390
  • theme – Player theme (optional) “dark” or “light”. Default: “dark”
  • showinfo – Display author and uploader info (optional) – 0 or 1. Default: 1
  • loop – Continuously play the video (optional) – 0 or 1. Default: 0
  • end – The time, measured in seconds from the start of the video, when the player should stop playing the video (optional). Default: 0
  • autoplay – Video auto play (optional) – 0 or 1. Default: 0
  • autohide – Indicates whether the video controls will automatically hide after a video begins playing (optional) 0 or 1 or 2. Default: 2
  • rel – Show related videos when playback of the initial video ends (optional) – 0 or 1. Default: 0.
  • enablejsapi – Make the JavaScript API available (optional) – 0 or 1. Default: 1

Here’s a link to the demo and to the code in case you want to play with it. If you are interested in the relatively new technology of HTML5 Web Components you may want to check my other posts related to this topic.

Enjoy and thanks for stopping by!