Slides Viewer: HTML5 Web Component

One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when I decided to rework it as a HTML5 Web Component as part of my recent amusement with this new and exciting aspect of HTML5.

The result is that now users could easily create a full-blown slides viewer just by utilizing this simple markup:

<acidjs-xslides>
    <acidjs-xslides-slide>Slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Another slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Yet another - simple text or complex HTML</acidjs-xslides-slide>
</acidjs-xslides>

You can check the demo and download X-Slides on my Experiments and Insight website, and if you are interested in HTML5 Web Components, X-Tags or Google Polymer, you will probably find inspiration in my other endeavours with this technology.

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-Chessboard: HTML5 Web Component

A few months ago I blogged about a fun experiment, explaining the creation of animated 3D chessboard and pieces with CSS3 and UTF characters only. Following my recent excitement and play with HTML5 Web Components I reused the CSS from the example and extended it to a custom tag, which when used as a simple HTML and without any JavaScript:

<acidjs-xchessboard id="xchessboard-01" boxsize="64">
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "c3"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
    [...]
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "f7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "g7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "h5"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Produces this beautiful chessboard:

x-chessboard

Using it, you may define as many pieces as you need, and you can also specify their type, color and position on the board, using the data-bind attribute of the <acidjs-xchessboard-piece></acidjs-xchessboard-piece> tag:

{
    "type":"pawn",
    "color":"black",
    "position": "h5"
}

As usual – here’s the link to the demo, the code and the download, and on my HTML5, CSS3 and JavaScript Experiments and Insight website there’s a lot of other stuff that you may find useful.

Cheers and until later! See you on Twitter!

X-Tabs – HTML5 Web Component Built with Mozilla X-Tags

Last night I introduced a new “html5 web components” category on my HTML5, CSS3 and JavaScript Experiments and Insight Website, so now all of the examples, which deal with this new and amazing technology are separated from the CSS and the JavaScript demos. Apart from that, I released a new component, based on Mozilla’s X-Tag and utilizing the JavaScript-less tabstrip solution I blogged about a sometime ago.

The component is called X-Tabs and allows declarative creation of fully functional tabs without any JavaScript:

<acidjs-xtabs width="100%" height="200" selectedtab="0" name="my-x-tab-01">
    <acidjs-xtabs-pane label="Home" hint="Go to our homepage">
        <h3>Home</h3>
        <p>Lorem ipsum.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="About Us" hint="More info about us">
        <h3>About Us</h3>
        <p>Sed ut perspiciatis?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Downloads" hint="Visit our downloads section">
        <h3>Downloads</h3>
        <p>At vero eos et accusamus.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Contact Us" hint="Give us a shout">
        <h3>Contact Us</h3>
        <p>Howdy?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Disabled Tab" hint="Give us a shout" enabled="false">
        <h3>Disabled Tab</h3>
        <p>Just a disabled tab.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Yet Another Tab" hint="And Yet Another Tab">
        <h3>Disabled Tab</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </acidjs-xtabs-pane>
</acidjs-xtabs>

x-tab

Have fun with the demo and feel free to modify and use the source code. If you like what I’m doing, follow me on Twitter or check my other posts about HTML5 Web Components, CSS3 or JavaScript.

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!

HTML5 Web Component Widgets for Displaying Movie Data from IMDb

A few months ago I designed and developed this RESTFul API for extracting movie data from IMDb with a couple of methods, and I am happy that a lot of people actually found it useful. In a number of occasions I was contacted regarding the availability of any easy to use on our websites widgets, which utilize the data from IMDb Fetcher, and this eventually lead to the creation of the first one.

I implemented it as a reusable HTML5 Web Component *, and it’s usage is simple as using HTML tags, like:

<acidjs-imdb-movie
    movie="WarGames"
    renderposter="true"
    mode="compact">
</acidjs-imdb-movie>

The service is hosted on imdb.wemakesites.net, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:

<script src="http://widgets.imdb.wemakesites.net/1.0/"></script>

As the widget requires jQuery, and you may already have it on your website you may register just the rest of the code required to run the tag like:

<script src="http://widgets.imdb.wemakesites.net/1.0/?jquery=false"></script>

The widget comes in three different sizes:

Full

acidjs-imdb-movie-full

Compact

acidjs-imdb-movie-compact

Minimal

acidjs-imdb-movie-minimal

In regards to the configuration of the tag, you  have the following attributes:

  • movie – required. Its value is the name of the movie, against which will be queried the API.
  • mode – optional. Here you can set the size of the widget. You have “full“, “compact” and “minimal“. If no value is set, the widget will render in full view.
  • renderposter – optional Boolean. Default is true. If set to false, the widget will be rendered without poster.

The acidjs-imdb-movie tag utilizes localStorage, so once movie data is loaded on the client, it is stored locally in the browser for later usage. For the next version I am planning to store the poster image as base-64 URI, but first I need to find a workaround for the security restriction of canvas and cross-domain scripting. To view the locally stored widget data, use your browser’s console like this:

window.localStorage.getItem("acidjs-movie-data");

To delete locally stored widget data, type the following in your browser’s console:

window.localStorage.removeItem("acidjs-movie-data");

Have a great weekend and thanks for reading! For more HTML5, CSS3 and JavaScript stuff, check my website or follow me on Twitter!

* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.