The class works with all major browsers, including Internet Explorer 9 and 10, and does not initialize on older versions. Check the demo and implementation and eventually download it from my JavaScript, CSS3 and HTML5 experiments website.

Related Posts

• HTML5 Shopping Cart
• Online CSS Merger, Minifier and Obfuscator
• State-of-the-art Ribbonbar Web UI
• Acid.JS Web.UI Library
• CSS3 and SVG Reflections
• HTML5, CSS3 and JavaScript Experiments and Insight
• Coming Soon – CSS3 and JavaScript Replacement Page
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

Enjoy the week!

Related

• State-of-the-art Ribbonbar Web UI
• Acid.JS Web.UI Library
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

Key features

• Lightweight and operating entirely on the client.
• Built with the latest technologies, as your future website will be.
• Fully customizable.
• Stylish and flexible.
• Easy to modify and fun to use.
• Your way to say in stylish manner that your website is “under construction”.

Click here to view the demo and you will love it so much, that you will download and give it a try immediately.

Enjoy the weekend!

Related Posts

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

The Markup:

<div class="css3-inline-file-input">
    <form action="./" enctype="multipart/form-data" method="post" name="form-01">
        <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
    </form>
</div>

The CSS:

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;

    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}

Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.

You can check the demo on this page, and in case you find it useful, you can download it here.

Enjoy the rest of the day!

Related Posts

• HTML5 Shopping Cart
• The Mystery of c:\fakepath Unveiled
• Ribbonbar Web UI Component
• HTML5 Resume Generator and Onepager Website
• Acid.JS Web.UI Library
• CSS3 Treeview. No JavaScript.
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• CSS3 Background Image Cropping

Enjoy and thanks for the patience and support, fellows!

The UI is extremely easy to customize, so if you are acquainted with CSS, just give it a try or download it straight away.

Key Features

• Lightweight, modern and loading extremely fast.
• CSS3 driven with fallback for older browsers.
• Cross-platform JSON data format for the resume.
• Support for multiple resume data files.
• Operating fully on the client.
• Sleek imageless UI, which can be easily modified.

Related Posts

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• Ribbonbar Web UI
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations
• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3

Builder.CSS

Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.

W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.

Stickeez

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.

Image to Base-64 Data-URI Encoder

Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.

Hasher Message Digest Encoder

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Watch this presentation to learn how it’s done and what makes it so cool. If you don’t feel like reading, just check the demo or download CSS3 Slides Viewer right away.

The HTML:

…Is a simple <form /> and a radio button list:

<div class="css3-slides-viewer">
    <form name="css3-slides-viewer" method="post" action="./">
        <fieldset>
            <legend>CSS3 Slides Viewer</legend>
            <ul>
                <li><input type="radio" name="css3-slides-viewer-slides" autofocus="autofocus" id="slides-00" checked="checked" />
                    <label for="slides-00"><!-- / --></label>
                    <section>
                        <!-- slide content should go here -->
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-01" />
                    <label for="slides-01"><!-- / --></label>
                    <section>
                        <!-- slide content should go here -->
                    </section>
                </li>
            </ul>
        </fieldset>
    </form>
</div>

The Slides Counter…

… Has been implemented via CSS counters:

.css3-slides-viewer > form > fieldset > ul > li section::before
{
    counter-increment: slide;
    content: "Slide " counter(slide);
}

The Fade-in/out Animation…

… Is using delayed CSS3 transitions and visibility: visible/hidden.

.css3-slides-viewer > form > fieldset > ul > li > section
{
    transition: all 500ms 10ms ease-in;
}

Hide/Show Slides

/* by default slides are hidden */
.css3-slides-viewer > form > fieldset > ul > li > section
{
    visibility: hidden;
}

/* the slide is visible only if it's radio button is selected */
.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ section
{
    visibility: visible;
}

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, nternet Explorer 9+

Due to the lack of support for CSS transitions, Internet Explorer 9 does not play the fade-in/out animation, and enabling the keyboard navigation should be done by clicking the buttons on top, because that browser does not support the autofocus=”autofocus” property of HTML5.

Check the demo or download CSS3 Slides Viewer.

If you like this solution, you can also check my personal wesbite, Acid.JS Web.UI, my blog or follow me on Twitter.

Make sure you try my online CSS minifier and merger and image to base-64 encoder.

Related Posts

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3
• CSS3 Background Image Cropping

Just give it a try on it’s new home page. Optionally, it is available for hosting on your own domain – if you are interested, please, check the Help & About tab of Builder.CSS.

Features and Improvements

• New and cool looks with easy and intuitive UI.
• Brand-new optimization routine, crunching your CSS even more at the speed of light.
• Support for predefined projects, which can contain the styles of all your websites (self-hosted version only).
• Add files from desktop via drag and drop.
• View, exclude and remove files from compilation.
• Processing is done entirely in the browser.
• Option to save the ouput to a file on the server (self-hosted version only).
• … And much more, just try it here.

Screenshots

Related

• HTML5 Shopping Cart
• W3C validation bookmarklet
• Online image to base-64 data-uri converter
• Hasher – online message digest encoder
• Builder.JS – JavaScript merger, minifier and obfuscator
• Stickeez – an amazing HTML5-driven sticky notes application
• Acid.JS web components and controls

Българският журналист е създание от пластелин – проект на работодателя си (който от своя страна е опекунстван от еди-кой-си политик, бизнесмен или просто мутра), който оформя мисленето на подопечния си, възпитан в културата на покорството и безгръбначието още в университета. Такива бяха журналистите преди 1989, такива са и сега, 23 години по-късно. Не се е променило и високомерното мълчание, неизбежно давано като отговор на директни въпроси, засягащи самото битие на пластелиненото човече с голямо внушено самочувствие.

How to Create a Fully Functional CSS3-only Treeview

How to Create a Fully Functional CSS3-only Tabstrip without a Single Line of JavaScript

How to Create Semantically Correct Imageless Custom Checkboxes and Radiobuttons with CSS3

How to Style HTML Dropdowns with CSS3

Creating Crossbrowser CSS3 and SVG Reflections

How to Create iPhone Toggle Buttons with CSS3

How to Achieve Gaussian Blur Effect with CSS3

CSS3 Driven Slides Viewer Without any JavaScript

Just check this amazing presentation here.

How to Create Fancy Animated Tooltips without any JavaScript

How to Crop Background Sprite with CSS3

The CSS

In short – we have a list with radio buttons, <label />s and <div />s. We hide each <div />, which is the content of the tab according to the checked state of the radio button. The <label /> is used as the button of the tab.

/*
 * @CSS3 Tabstrip
 * @author Martin Ivanov
 * @website http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 **/

.css3-tabstrip ul,
.css3-tabstrip li
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.css3-tabstrip,
.css3-tabstrip input[type="radio"]:checked + label
{
    position: relative;
}

.css3-tabstrip li,
.css3-tabstrip input[type="radio"] + label
{
    display: inline-block;
}

.css3-tabstrip li > div,
.css3-tabstrip input[type="radio"]
{
    position: absolute;
}

.css3-tabstrip li > div,
.css3-tabstrip input[type="radio"] + label
{
    border: solid 1px #ccc;
}

.css3-tabstrip
{
    font: normal 11px Arial, Sans-serif;
    color: #404040;
}

.css3-tabstrip li
{
    vertical-align: top;
}

.css3-tabstrip li:first-child
{
    margin-left: 8px;
}

.css3-tabstrip li > div
{
    top: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    overflow: auto;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.css3-tabstrip input[type="radio"] + label
{
    margin: 0 2px 0 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.css3-tabstrip input[type="radio"]:checked + label
{
    z-index: 1;
    background: #fff;
    border-bottom-color: #fff;
    cursor: default;
}

.css3-tabstrip input[type="radio"]
{
    opacity: 0;
}

.css3-tabstrip input[type="radio"] ~ div
{
    display: none;
}

.css3-tabstrip input[type="radio"]:checked:not(:disabled) ~ div
{
    display: block;
}

.css3-tabstrip input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: no-drop;
}

The Markup

In the example below, the first tab is selected by default, because the radio button, associated with it has the checked attribute. You can set arbitrary tab to selected by default like that.

<div class="css3-tabstrip">
    <ul>
        <li>
            <input type="radio" name="css3-tabstrip-0" checked="checked" id="css3-tabstrip-0-0" /><label for="css3-tabstrip-0-0">Home</label>
            <div>
                <h3>What is Lorem Ipsum</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book. It has survived not only five centuries,
                    but also the leap into electronic typesetting, remaining
                    essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem
                    Ipsum passages, and more recently with desktop publishing
                    software like Aldus PageMaker including
                    versions of Lorem Ipsum.</p>
            </div>
        </li><li>
            <input type="radio" name="css3-tabstrip-0" id="css3-tabstrip-0-1" /><label for="css3-tabstrip-0-1">About Us</label>
            <div>
                <h3>Why do we use it?</h3>
                <p>It is a long established fact that a reader will be distracted
                    by the readable content of a page when looking at its layout.
                    The point of using Lorem Ipsum is that it has a more-or-less
                    normal distribution of letters, as opposed to using 'Content
                    here, content here', making it look like readable English.
                    Many desktop publishing packages and web page editors
                    now use Lorem Ipsum as their default model text, and a
                    search for 'lorem ipsum' will uncover many web sites still
                    in their infancy. Various versions have evolved over the
                    years, sometimes by accident, sometimes on purpose
                    (injected humour and the like).</p>
            </div>
        </li><li>
            <input type="radio" name="css3-tabstrip-0" id="css3-tabstrip-0-2" /><label for="css3-tabstrip-0-2">Portfolio</label>
            <div>
                <h3>Where does it come from?</h3>
                <p>Contrary to popular belief, Lorem Ipsum is not simply
                    random text. It has roots in a piece of classical
                    Latin literature from 45 BC, making it over 2000 years
                    old. Richard McClintock, a Latin professor at Hampden-Sydney
                    College in Virginia, looked up one of the more obscure
                    Latin words, consectetur, from a Lorem Ipsum passage,
                    and going through the cites of the word in classical
                    literature, discovered the undoubtable source. Lorem
                    Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                    Finibus Bonorum et Malorum" (The Extremes of Good and Evil)
                    by Cicero, written in 45 BC. This book is a treatise on
                    the theory of ethics, very popular during the Renaissance.
                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                    comes from a line in section 1.10.32.</p>
            </div>
        </li><li>
            <input type="radio" name="css3-tabstrip-0" id="css3-tabstrip-0-3" disabled="disabled" /><label for="css3-tabstrip-0-3">Contact Us</label>
            <div>
                <h3>Where can I get some?</h3>
                <p>There are many variations of passages of Lorem Ipsum available,
                    but the majority have suffered alteration in some form,
                    by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a
                    passage of Lorem Ipsum, you need to be sure there isn't
                    anything embarrassing hidden in the middle of text. All
                    the Lorem Ipsum generators on the Internet tend to
                    repeat predefined chunks as necessary, making this the
                    first true generator on the Internet. It uses a dictionary
                    of over 200 Latin words, combined with a handful of model
                    sentence structures, to generate Lorem Ipsum which looks
                    reasonable. The generated Lorem Ipsum is therefore
                    always free from repetition, injected humour, or
                    non-characteristic words etc.</p>
            </div>
        </li>
    </ul>
</div>

Finishing Touches

What’s left is to set width and height to the tabstrip. This should be done on the outermost element. If you have different tabstrips on the same page, you can use it’s, secondary classes, etc. In the example page, we have just one tabstrip, so we will use the base class:

.css3-tabstrip
{
    width: 440px;
    height: 220px;
}

Supported Browsers

• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera
• Internet Explorer 9 and above

If you like this post, maybe you will follow me on Twitter or visit my personal website for other cool stuff. You can also try out the demo or download the example from this link.

Enjoy the weekend!

Related Posts

• HTML5 Shopping Cart
• CSS3 Treeview. No JavaScript.
• CSS3 Driven Slides Viewer Without any JavaScript
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3
• CSS3 Background Image Cropping

The Renderer JavaScript Class

/*
 * Renderer
 * HTML Template Engine
 * developer's website: http://wemakesites.net/#!/web-dev
 * developer's twitter: https://twitter.com/#!/wemakesitesnet
 * developer's blog http://acidmartin.wordpress.com/
 **/

(function() {
    "use strict";

    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @class Renderer
     * @constructor
     **/
    function Renderer() {}

    Renderer.prototype = {
        /*
         * @member TEMPLATES
         * @public
         * @info key/value storage of templates that will be used
         **/
        TEMPLATES: {
            "list": '<ul>{{items}}</ul>',
            "list-item": '<li>{{contents}}</li>',
            "names": '<span>first name: {{firstName}}</span><span>last name: {{lastName}}</span>'
        },

        /*
         * @method compile
         * @public
         * @param name (String) name of the template that will be used
         * @param data (Object) key/value pairs of template placeholders and values that should be replaced against these placeholders
         **/
        compile: function(name, data) {
            var
                html = this.TEMPLATES[name] || "";

            data = data || {};

            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var
                        value = data[key],
                        regexp = new RegExp("{{" + key + "}}", "g");

                    html = html.replace(regexp, value);
                }
            }

            return html;
        },

        /*
         * @method add
         * @public
         * @param name (String)
         * @param html (String)
         * @param callback (Function) [optional]
         **/
        add: function(name, html, callback) {
            if(name && html) {
                this.TEMPLATES[name] = html;
                if(callback) {
                    callback.call(this);
                }
            }
        },

        /*
         * @method remove
         * @public
         * @param name (String)
         **/
        remove: function(name) {
            if(this.TEMPLATES[name]) {
                delete this.TEMPLATES[name];
            }
        }
    };

    window.AcidJs.Renderer = Renderer;
})();

Use Cases and Examples

(function() {
    // initialize Renderer
    window.templates = new AcidJs.Renderer();

    // compile and render some test template
    window.console.log(window.templates.compile("names", {firstName: "Martin", lastName: "Ivanov"}));

    // add template on the fly
    window.templates.add('date', '<div>{{month}} {{day}} {{year}}</div>');

    // compile and render the newly added template
    window.console.log(window.templates.compile("date", {day: 21, month: "June", year: 1976}));

    // add template on the fly and compile it immediately (callback is optional)
    window.templates.add('test-2', '<span><em>{{testValue}}</em> <strong>{{anotherTestValue}}</strong></span>', function() {
        window.console.log( window.templates.compile("test-2", {testValue: "Some value", anotherTestValue: "Another test value"}) );
    });

    // compile and render templates contents as function
    window.console.log(window.templates.compile("list", {items: function() {
            var
                guitars = ["B.C. Rich", "Jackson", "ESP", "Ibanez", "Gibson", "Fender"],
                html = [];

            for(var i = 0, len = guitars.length; i < len; i++) {
                var
                    guitar = guitars[i];

                html.push(window.templates.compile("list-item", {contents: guitar}));
            }

            html = html.join("");

            return html;
    }}));

    // remove the test template
    window.templates.remove("names");
})();

Supported Browsers

• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera
• Internet Explorer 6-10

Please, follow @wemakesitesnet or check my website for more cool stuff. If you like this piece of code, you can also download it.

Related Posts

• HTML5 Shopping Cart
• JavaScript Mapper Class for RESTFul Methods
• State-of-the-art Ribbonbar Component
• Progressbar Component
• XML to JSON JavaScript Objectifier Class
• URI to JSON Serializer Class
• IMDB Fetcher – Experimental IMDB JavaScript and PHP API
• Quick and Dirty Localization With JavaScript
• JavaScript Instance Name Finder
• HTML5 Placeholder Enabler
• HTML 5 Details Element Enabler
• WebWorkers JavaScript class.
• Classless JavaScript inheritance.
• JavaScript class augmenter.
• JavaScript API for TinyURL.
• HTML Validation Bookmarklet.

To validate a page, simply click the bookmark and you will be presented with a detailed validation report. In you are a chrome user, you can get and install the bookmarklet from Google Web Store.

Screenshots

Validation Success

Validation Failure

Site Cannot be Checked

Supported Browsers *

• Mozilla Firefox
• Google Chrome

* More browsers will be supported soon

To get your HTML markup validation bookmarklet, go to this page and follow the instructions.

Related

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• State-of-the-art Ribbonbar Web Component
• JavaScript Template Engine
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

Ribbonbar UI has everything you would expect from a ribbonbar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool Windows7 skin. And at last, but not least – deploying and configuring it is a matter of minutes.

Key Features

• By far, the most successful recreation of the “real” desktop ribbonbar as a web component.
• Comprehensive documentation and fun to use API.
• Easy to modify JSON structures for tabs, ribbons and commands.
• Imageless CSS3 skin working with all modern browsers and falling back nicely for older browsers.
• 4 types of inbuilt tools – “toolbar”, “office menu”, “split-button” and “external”.
• Ability to load external tools by loading them via AJAX and passing get/post parameters.
• Small footprint.
• Easy command handling.
• Can be used with 3-rd party WYSIWYG editors, as a navigation component, in email systems, etc.
• The retrieval for the JSON files can be done with any server runtime (however Ribbonbar is shipped with PHP routine only).

Supported Browsers

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer

Screenshots

Related

• HTML5 Shopping Cart
• Acid.JS Web.UI Library
• HTML Markup Validator Bookmarklet
• Progressbar Web UI
• Image to Base-64 Data URI Converter
• HTML5 Sticky Notes App
• Band Tourdates Scheduler Web UI
• Booking System for Online Reservations

The Markup:

<ul class="css3-background-image-cropping">
    <li><a href="some-file.md">some-file.md</a></li>
    <li><a href="some-file.pdf">some-file.pdf</a></li>
    <li><a href="some-file.txt">some-file.txt</a></li>
</ul>

The CSS:

:root .css3-background-image-cropping a::before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 0 0;
    width: 16px;
    height: 16px;
    background: url("icons.png") no-repeat;
}

:root .css3-background-image-cropping a[href$=".md"]::before
{
    background-position: 0 -64px;
}

:root .css3-background-image-cropping a[href$=".pdf"]::before
{
    background-position: 0 -80px;
}

:root .css3-background-image-cropping a[href$=".txt"]::before
{
    background-position: 0 -96px;
}

The Icons Sprite

And voilà! That’s the result:

The Advantages

• The texts in the boxes wrap safely and nicely without revealing unwanted regions of the sprite.
• The images in the sprite are order- and size-independent.

The Disadvantages

• Works only on CSS3-capable browsers.

If you like this post, you can try the demo or download the example, follow me on Twitter or check my website for more cool stuff! Happy new year!

Relates Posts

• HTML5 Shopping Cart
• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• Imageless Custom Checkboxes and Radio Buttons with CSS3

Here’s an excerpt:

About 55,000 tourists visit Liechtenstein every year. This blog was viewed about 230,000 times in 2012. If it were Liechtenstein, it would take about 4 years for that many people to see it. Your blog had more visits than a small country in Europe!

Click here to see the complete report.

The CSS

As you can see, I am using the CSS3 :root element, which is ignored by non-CSS3 browsers, so they will display the normal check boxes and radios. The code listing below contains only official CSS properties, so maybe it’s a good idea to download the cross-browser solution from this link.

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    border-radius: 100%;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}

The Markup

Nothing fancy here, just a regular semantic form without any additional markup, supporting natively keyboard navigation and accessibility intact.

<!-- markup for custom radio buttons -->
<ul class="css3-radios">
    <li><label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label></li>
</ul>
<!-- / markup for custom radio buttons -->
<!-- markup for custom check boxes -->
<ul class="css3-checkboxes">
    <li><label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label></li>
</ul>
<!-- / markup for custom check boxes -->

What do you Think?

If you like the solution, you can try the demo or get it from this link. In case you are interested in other stuff I do, you can follow me on Twitter, visit my personal website or check my Web UI components.

Have a great weekend!

Related Posts

• HTML5 Shopping Cart
• Ribbonbar Web UI Component
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Acid.JS Web.UI Library
• CSS3 Treeview. No JavaScript.
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Gaussian Blur Effect
• Fancy CSS3 Tooltips Without JavaScript
• CSS3 Background Image Cropping

About IMDBFetcher

IMDBFetcher is an experimental, JavaScript and PHP API for fetching data from IMDB and returning it as a JSON object ready for parsing and rendering on the for the client. The current version of IMDBFetcher supports title, poster, release date, director(s), actor(s), IMDB and MPAA rating, description, genre(s) and running time.

Continue reading here…

Related Posts

The Shortener JavaScript Class

(function() {
    "use strict";

    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @constructor
     * @param urls (Object) set a predefined key-value pairs of urls/shorturls
     * {
     *  "url": "shorturl"
     * }
     **/
    function Shortener(urls) {
        this.urls = urls || {};
    }

    Shortener.prototype = {
        /*
         * @member APIS (Object)
         * @public
         **/
        APIS: {
            tinyurl: "http://tinyurl.com/api-create.php?url="
        },

        /*
         * @method get
         * @public
         * @param longUrl (String) URL that should be shortened
         * @param callback (Function) [optional] callback that will be executed after the URL has been processed
         * @param apiToUse (String) [optional] which shortening service should be used (default is "tinyurl")
         **/
        get: function(longUrl, callback, apiToUse) {
            var
                that = this,
                service = apiToUse ? this.APIS[apiToUse] : this.APIS.tinyurl;

            if(this.urls[longUrl]) {
                if(callback) {
                    callback.call(this, this.urls[longUrl]);
                    return;
                }
            }

            $.when($.ajax({
                    url: "AcidJs.Shortener/php/Shortener.php",
                    data: "url=" + window.encodeURIComponent(longUrl) +
                        "&service=" + window.encodeURIComponent(service),
                    dataType: "json"
                })).then(function(rsp){
                    that.set(longUrl, rsp[longUrl], callback);
                });
        },

        /*
         * @method set cache the short url in the urls object and reuse it from the DOM storage if requested again
         * @private
         * @param key (String) original expanded URL
         * @param value (String) shortened url
         * @param callback (Function) [optional] execute the callback, if set in the get() method
         **/
        set: function(key, value, callback) {
            this.urls[key] = value;
            if(callback) {
                callback.call(this, this.urls[key]);
            }
        }
    };

    window.AcidJs.Shortener = Shortener;
})();

Using the Class

(function() {
    var
        config = {
            "http://wemakesites.net": "http://tinyurl.com/2cv6wrm",
            "http://acidjs.wemakesites.net/": "http://tinyurl.com/bonbupy",
            "http://acidmartin.wordpress.com": "http://tinyurl.com/clvk2v8"
        };

    window.shortener = new AcidJs.Shortener(config);
    window.shortener.get("http://stickeez.wemakesites.net", function(url) {
        window.console.log(url);
    });
})();

Watch the demo or click here to download the Shortener API and enjoy! If you like the script, please, follow @wemakesitesnet on Twitter.

Related Posts:

The CSS

:root .css3-gaussian-blur *
{
    text-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    color: transparent !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, .05) !important;
    /* disable the pointer events for blurred zones */
    -moz-pointer-events: none !important;
    -webkit-pointer-events: none !important;
    pointer-events: none !important;
}

:root .css3-gaussian-blur input,
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur button,
:root .css3-gaussian-blur select
{
    box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 0, 0, .05) !important;
    resize: none !important;
    opacity: .5 !important;
}

:root .css3-gaussian-blur img,
:root .css3-gaussian-blur input,
:root .css3-gaussian-blur input[type="file"],
:root .css3-gaussian-blur input[type="checkbox"],
:root .css3-gaussian-blur input[type="radio"]
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur select
{
    opacity: .2 !important;
    background: transparent none !important;
}

:root .css3-gaussian-blur fieldset
{
    border-color: transparent !important;
}

/* Vendor-specific styles */
/* CSS3 filters are currently supported by Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    :root .css3-gaussian-blur img
    {
        -webkit-filter: blur(15px) !important;
        filter: blur(15px) !important;
        opacity: 1 !important; /* restore the opacity for that browser */
    }
}

/* IE<10 styles using the \9 hack */
:root .css3-gaussian-blur img
{
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    -ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    opacity: 1\9 !important;
}

:root .css3-gaussian-blur *
{
    color: #ccc !important\9;
}

The HTML

Just apply .css3-gaussian-blur class to the element you would like to blur. If you wish to blur the entire page, add this class to the <body />tag.

Related Posts

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

The code follows, but if you are impatient to give it a try, you can download it from this link.

Before and After

The Markup

<span class="css3-selectbox"><select>
    <option value="JavaScript">JavaScript</option>
    <option value="CSS">CSS</option>
    <option value="HTML">HTML</option>
</select></span>

The CSS

:root .css3-selectbox,
:root .css3-selectbox select,
:root .css3-selectbox::after,
:root .css3-selectbox::before {
    display: inline-block;
    vertical-align: top;
    height: 18px;
}

:root .css3-selectbox::after,
:root .css3-selectbox::before {
    content: "";
    pointer-events: none; /* remove the pointer event of the custom arrow, so the mouse actually clicks the real one */
}

:root .css3-selectbox,
:root .css3-selectbox::after {
    background: #757575;
    background: linear-gradient(#757575, #626262);
}

:root .css3-selectbox select {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: normal 11px/18px "Segoe UI", Arial, Sans-serif;
    color: #fff;
    outline: none;
}

:root .css3-selectbox option {
    background: #535353;
}

:root .css3-selectbox {
    border: solid 1px #303030;
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0 0 1px #6a6a6a, 0 0 0 1px #919191 inset;
}

/* the custom arrow, achieved with element's border styles */
:root .css3-selectbox::before {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 4px;
    width: 0;
    height: 0;
    border: solid 4px transparent;
    border-top-color: rgba(255, 255, 255, .6);
}

:root .css3-selectbox::after {
    position: relative;
    left: 1px;
    width: 16px;
    margin: 0 0 0 -17px;
    box-shadow: -1px 0 0 1px #919191 inset;
}

:root .css3-selectbox:hover::before {
    border-top-color: #fff;
}

Related Posts:

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• Fancy CSS3 Toolips (Yeah, Without Any JavaScript)
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

The motivation to use both visibility: hidden and opacity: o – I did it in order to prevent pointer events that will display the tooltip before the mouse actually starts hovering the element. The 50ms delay of the transition is there in order to circumvent and make the animation possible after applying visibility: visible. Finally – currently, the only browser that can play consistent transitions in Firefox, so the other browsers will display the tooltip without the fancy animation. If you like the solution, you can check the demo or download it from here… and maybe follow me on Twitter for more cool stuff.

The CSS:

/* apply to elements, containing a data-title attribute */
[data-title] {
    position: relative;
    padding: 0;
}

[data-title]::before,
[data-title]::after {
    position: absolute;
    left: 50%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    background: #000;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);

    -moz-transition: opacity 200ms 50ms linear;
    -webkit-transition: opacity 200ms 50ms linear;
    -ms-transition: opacity 200ms 50ms linear;
    -o-transition: opacity 200ms 50ms linear;
    transition: opacity 200ms 50ms linear;
}

[data-title]:hover::before,
[data-title]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* the tooltip */
[data-title]::before {
    content: attr(data-title);
    width: 120px;
    padding: 4px;
    margin: 30px 0 0 -68px;
    font: normal 11px/16px Arial, Sans-serif;
    color: #fff;
    cursor: default;
    border-radius: 4px;
}

/* the pointer */
[data-title]::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: 26px 0 0 -6px;

    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Usage… It’s Easy:

Just apply data-attrbiute with some text to the elements that should display the tooltip, for example:

<ul>
    <li><a href="http://stickeez.wemakesites.net" target="_blank" data-title="Sticky notes app using the new HTML5 File API, blob and local storage">Sticky Notes App</a></li>
    <li><a href="http://image2base64.wemakesites.net" data-title="Image to Base64 Converter Using the new HTML5 File API">Image to Base-64 Data-URI Converter</a></li>
    <li><a href="http://hasher.wemakesites.net/" data-title="Hasher uses 40+ encryption algorithms to create encrypted message digests online">Message Digest Encrypter</a></li>
</ul>

That’s it! Enjoy the weekend!

Related Posts:

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• How to Style Select Boxes with CSS3
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

Progressbar.JS is a lightweight, multipurpose, platform-independent JavaScript and CSS3 driven component that will enhance the usabiliy of your web applications. The possible use cases are unlimited – from the classic loading indicator displayed during AJAX calls through form validation to complex wizard-like interfaces – it all depends on you.

It is flexible, easy to install and fully customizable featuring rich client API, custom events and imageless purely CSS3-driven skins and cool animations.

What’s New:

• Improved and richer client API
• Improved rendering and smaller footprint
• New skins

Related:

• Ribbonbar.UI Component
• SplitButton.JS Component
• Tabstrip Component

Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. If you are a chrome user, you may use Hasher as Chrome App.

Related Posts

• Online Image to Base-64 Data URI Converter
• Stickeez – HTML5 Sticky Notes Application

<ul>
    <li>item 0</li>
    <li>item 1</li>
    <li class="marked">item 2</li>
    <li class="marked">item 3</li>
    <li class="marked">item 4</li>
</ul>

… And you need to apply special styles only to the first occurence of the .selected class. CSS3 has a lot of possibilities for selecting elements, but it does not provide solution for this case. So, when :nth-of-type(), :first-of-type, nth-child() and :first-child do not work, you can use this one:

/* select any .marked element */
.marked {
    color: #f00;
}

/* override all .marked elements but the first using the sibling selector */
.marked ~ .marked {
    color: #000;
}

Related Posts

• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Fancy CSS3 Tooltips (Yeah, without any JavaScript)
• How to Style Select Boxes with CSS3
• CSS3 Element Reflections
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping

(function() {
    "use strict";

   /*
    * @namespace AcidJs
    **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

   /*
    * @class Augmenter
    * @constructor
    **/
    function Augmenter() {}

    Augmenter.prototype = {

       /*
        * @method methods Inherit methods from one class to another
        * @pulic
        * @param superclass {Class}
        * @param subclass {Class}
        * @param members {Array} [optional] Array of methods that should be inherited. If not set, all superclass methods will be copied to the subclass
        **/
        methods: function(superclass, subclass, members) {
            var
                member;

            if(members) {
                for(var i = 0; i < members.length; i ++) {
                    member = members[i];

                    if(superclass.prototype.hasOwnProperty(member)) {
                        subclass.prototype[member] = superclass.prototype[member];
                    }
                }
            } else {
                for(member in superclass.prototype) {
                    if(superclass.prototype.hasOwnProperty(member)) {
                        subclass.prototype[member] = superclass.prototype[member];
                    }
                }
            }
        },

       /*
        * @properties properties Inherit properties from one class to another
        * @pulic
        * @param superclass {Class}
        * @param subclass {Class}
        * @param properties {Array} [optional] Array of properties that should be inherited. If not set all superclass properties will be copied to the subclass
        **/
        properties: function(superclass, subclass, properties) {
            if(properties) {
                for(var i = 0; i < properties.length; i ++) {
                    if(superclass.hasOwnProperty(properties[i])) {
                        subclass[properties[i]] = superclass[properties[i]];
                    }
                }
            } else {
                   for(var property in superclass) {
                       if(superclass.hasOwnProperty(property)) {
                           subclass[property] = superclass[property];
                       }
                   }
            }
        }
    };

    window.AcidJs.Augmenter = Augmenter;
})();

Related Posts

(function() {
    "use strict";

    // the extend function
    function extend(superclass, subclass) {
        for(var key in superclass) {
            if(superclass.hasOwnProperty(key)) {
                subclass[key] = superclass[key];
            }
        }
    }

    // Base object
    var
        Base = {
            props: {
                firstName: "Martin",
                lastName: "Ivanov",
                web: {
                    site: "http://wemakesites.net",
                    blog: "http://acidmartin.wordpress.com/",
                    ui: "http://acidmartin.wordpress.com/",
                    twitter: "https://twitter.com/#!/wemakesitesnet"
                }
            },
            init: function() {
                window.console.log(">>> Base.init()");
            },
            getProperties: function() {
                return this.props;
            }
        };

    // directly call Base method if required
    Base.init();

    // inheriting object with some default methods
    var
        Subclass = {
            ownMethod: function() {
                window.console.log(">>> Subclass.ownMethod()");
            }
        };

    // extend the Subclass with properties from the Base object
    extend(Base, Subclass);

    // call some methods from the Subclass
    Subclass.init();
    Subclass.ownMethod();
    window.console.log(Subclass.getProperties());
})();

Related Posts

Here’s a tiny JavaScript class for easy usage of the Workers API of HTML5. As of October 2012 Workers are supported by Firefox, Chrome, Opera, Safari and Internet Explorer 10. On older versions of IE, the class will not initialize.

When you download the class, please, make sure you check the comments in the script file to learn how to use the class.

So… Here we go:

The AcidJs.WebWorkers Class

(function() {
    "use strict";

    /*
     * @namespace AcidJs
    **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

   /*
    * @class WebWorkers
    * @constructor
    * @author Martin Ivanov http://acidjs.wemakesites.net
    **/
    function WebWorkers() {
        if(typeof(window.Worker) === "undefined") {
            var
                fn = (function(){});

            for(var o in this) {
                if(Object.hasOwnProperty(o)) {
                    this[o] = fn;
                }
            }
        }
    }

    WebWorkers.prototype = {

       /*
        * @method create Create new WebWorker
        * @public
        * @param config {Object}
        * {
        *  name: {String},
        *  script: {URL},
        *  onMessage: {Function},
        * }
        **/
        create: function(config) {
            var
                name = config.name,
                script = config.script,
                onmessage = config.onMessage;

            if(undefined === config || undefined !== this[name]) {
                return;
            }

            this[name] = new Worker(script);
            this._bind(name, onmessage);
        },

       /*
        * @method getWorker Return Worker instance
        * @public
        * @param name {String}
        * @return XrayWrapper|undefined
        **/
        getWorker: function(config) {
            return this[config.name];
        },

       /*
        * @method start execute a Worker
        * @public
        * @param config {Object}
        * {
        *  name: {String}
        * }
        **/
        start: function(config) {
            var
                name = this.getWorker({name: config.name});

            if(undefined !== name) {
                name.postMessage(config.data);
            }
        },

       /*
        * @method stop terminate a Worker
        * @public
        * @param config {Object}
        * {
        *  name: {String}
        * }
        **/
        stop: function(config) {
            var
                name = this.getWorker({name: config.name});

            if(undefined !== name) {
                name.terminate();
            }
        },

       /*
        * @method destroy Stop and delete the instance of a Worker
        * @public
        * @param config {Object}
        * {
        *  name: {String}
        * }
        **/
        destroy: function(config) {
            var
                name = config.name;

            if(undefined !== this.getWorker({name: config.name})) {
                this.stop({
                    name: config.name
                });
                delete this[config.name];
            }
        },

       /*
        * @method _bind Attach handler to the onmessage event of the Worker
        * @private
        * @param name {String}
        * @onmessage {Function}
        * @data {Object|String}
        **/
        _bind: function(name, onmessage) {
            this[name].addEventListener("message", function(e) {
                onmessage.call(this, e.data);
            }, false);
        }
    };

    window.AcidJs.WebWorkers = WebWorkers;
})();

Using the Class

(function() {
    // instantiate the class
    window.workers = new AcidJs.WebWorkers();

    // create a worker
    window.workers.create({
        script: "AcidJs.WebWorkers/workers/process-guitars.js",
        name: "process-guitars",
        onMessage: function(data) {
            console.log(data);
        }
    });

    // start the worker, post a message to it and supply some data to be processed in the background
    window.workers.start({
        name: "process-guitars",
        data: ["schecter", "fender", "gibson", "jackson", "b.c. rich", "esp", "ibanez", "charvel"]
    });

    // get the worker
    // console.log(window.workers.getWorker({name: "process-guitars"}));

    // stop the worker
    // window.workers.stop({name: "process-guitars"});

    // destroy the worker
    // window.workers.destroy({name: "process-guitars"});
})();

Did you download the class? Did you enjoy the blogpost? Did you check the demo? If you did, follow me @wemakesitesnet, check my personal website or acid.js web.ui for more cool stuff.

Related Posts

The Lokalizr JavaScript Class:

(function() {
    "use strict";

    /*
     * @class Lokalizr
     * @constructor Lokalizr
     * @param languages {Object} [required]
     * @param defaultLanguage {String} [optional]
     **/
    function Lokalizr(languages, defaultLanguage) {

        this.languages = languages || {};

        if(defaultLanguage) {
            this.localize(defaultLanguage);
        }
    }

    Lokalizr.prototype = {

    /*
     * @map ATTR
     * @public
     **/
    ATTRS: {
        lang: "data-lang"
    },

    /*
     * @map MESSAGES
     * @public
     **/

    MESSAGES: {
        invalid: "Invalid language code."
    },

    /*
     * @method localize
     * @public
     * @param langCode {String} [required]
     **/
    localize: function(langCode) {
        if(false === "querySelectorAll" in document) {
            return;
        }

        var
            lang = this.languages[langCode],
            attr = this.ATTRS.lang,
            elements = document.querySelectorAll("[" + attr + "]");

        if(!lang) {
            this.error(this.MESSAGES.invalid);
            return;
        }

        for(var i = 0, len = elements.length; i < len; i++) {
            var
                element = elements[i],
                key = element.getAttribute(attr);

            element.innerHTML = lang[key];
        }
    },

    /*
     * @method getLangString
     * @public
     * @param langCode {String} [required]
     * @param langString {String} [required]
     * @return {String}
     **/
    getLangString: function(langCode, langString) {
        if(langCode && langString) {
            return this.languages[langCode][langString];
        }
    },

    /*
     * @method error
     * @public
     * @param message {String} [required]
     **/
    error: function(message) {
        window.alert(message);
    }
};

    window.Lokalizr = Lokalizr;
})();

Example Markup:

<p data-lang="hello">Hello</p>
<p data-lang="good-morning">Good Morning</p>
<p data-lang="good-evening">Good Evening</p>

Usage:

(function() {
    // instantiate Lokalizr and localize automatically
    window.lang = new window.Lokalizr({
        "en-US": {
            "hello": "Hi",
            "good-morning": "Good morning",
            "good-evening": "Good evening"
        },
        "de-DE": {
            "hello": "Hallo",
            "good-morning": "guten Morgen",
            "good-evening": "guten Abend"
        }
     } , "de-DE");

     // localize on demand
     window.lang.localize("en-US");

     // get specific language keys
     window.console.log("language string",
         window.lang.getLangString("de-DE", "hello"));
     window.console.log("language string",
         window.lang.getLangString("de-DE", "good-morning"));
     window.console.log("language string",
         window.lang.getLangString("de-DE", "good-evening"));
 })();

That’s it! If you like the demo, you can pick it from this link.

Enjoy the weekend!

Related Posts

"rest/user/get/my"

… We can execute:

window.mapper.userGetMy();

… And we can also pass as an argument the http parameters object:

window.mapper.userGetMy({
    firstName: "John",
    lastName: "Smith",
    id: 9999
});

… Which will result in an ajax request to:

rest/user/get/?firstName=John&lastName=Smith&id=9999&_=1348612389319

The API methods are defined in the constructor of the RestMethodMapper class like this – the first argument is the REST end-point, the second argument is a key/value object map of all RESTFul method and their properties (type, dataType, success and failure callbacks):

(function() {
    window.mapper = new AcidJs.RestMethodMapper(
        "rest/",
        {
            "user/get/": {
                type: "GET",
                cache: false,
                success: function(response) {
                    console.log("success:", response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: ", jqXHR, textStatus, errorThrown);
                },
                dataType: "json"
            },
            "user/get/my/": {
                type: "get",
            },
            "msg/post/new/": {
                type: "post"
                success: function() { },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: ", jqXHR, textStatus, errorThrown);
                },
                dataType: "json"
            }
        }
    );
})();

The above code can be tested like this:

window.mapper.userGet({
    firstName: "John",
    lastName: "Smith",
    id: 9999
}); // which will request rest/user/get/ with the parameters set as an argument object
window.mapper.userGetMy(); // which will request reset/user/get/my/
window.mapper.msgPostNew({
    id: 1234,
    body: "Lorem ipsum dolot sit amet"
}); // which will request rest/msg/post/new/ with the parameters set as an argument object

Below is the full source code of the RestMethodMapper class:

(function() {
    "use strict";

    /*
     * @namespace AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @class RestMethodMapper
     * @constructor
     * @param endpoint {String} [optional]
     * @param method {String} rest api method, for example "user/get/my"
     * @author Martin Ivanov http://acidjs.wemakesites.net
     **/
    function RestMethodMapper(endpoint, method) {
       endpoint = endpoint || "";
       method = method || {};

       var
           that = this;

       $.each(method, function(key, value) {
           (function() {
               var
                   name = that.restToMethod(key);

               if(!that[name]) {
                   var
                       ajaxConfig = {
                           url: endpoint + key
                       };

                   if(value) {
                       $.each(value, function(k, v) {
                           ajaxConfig[k] = v;
                       });
                   }

                   that[name] = function(data) {
                       if(data) {
                           ajaxConfig.data = data;
                       }
                       $.ajax(ajaxConfig);
                   };
                }
            })();
        });
    }

    RestMethodMapper.prototype = {
        /*
         * @method restToMethod convert RESTFul api method to a JavaScript method
         * @param url {String}
         * @return {String}
         **/
        restToMethod: function(url){
            if(!url) {
                return "";
            }

            var
                path = url.split("/"),
                methodName = "";

            for(var i = 0, len = path.length; i < len; i++) {
                methodName += (i === 0) ? path[i] : path[i].charAt(0).toUpperCase() + path[i].substr(1);
            }

            return methodName;
        }
    };

    window.AcidJs.RestMethodMapper = RestMethodMapper;
})();

The RestMethodMapper class uses jQuery, but obviously it can be easily implemented in pure JavaScript or with the help any other JavaScript library. I utilized jQuery, because the project required it, so I made use of that library’s $.ajax() method. If you like this approach you can download it’s source code and demo from this link. And why not follow @wemakesitesnet on Twitter?

Related Posts

You can also use Stickeez as a Google Chrome extension.

http://2012.front-trends.com/speakers/

Slides:

http://speakerdeck.com/u/chriscoyier/p/what-we-dont-know

http://desandro.github.com/mobile-safari-machete/

https://speakerdeck.com/u/rmurphey/p/beyond-the-dom-sane-structure-for-js-apps

https://speakerdeck.com/u/csswizardry/p/breaking-good-habits-1/

https://speakerdeck.com/u/jina/p/style-guide-driven-ui-design-with-sass

http://www.v3ga.net/conferences/ft2012/

http://lea.verou.me/css-4d/#intro

http://www.braniecki.net/b2g/

http://www.medikoo.com/future-web/

http://www.slideshare.net/szafranek/javascript-refactoring

http://taligarsiel.com/Projects/howbrowserswork1.htm

http://blog.lassus.se/files/javascript_the_subsets_we_use.pdf

https://speakerdeck.com/u/rachelandrew/p/pushing-the-boundaries-without-breaking-the-web

http://nimbu.in/front-trends/#/title

https://speakerdeck.com/u/theophani/p/design-processes-not-interfaces

http://speakerdeck.com/u/bartoszopka/p/learning-to-teach

http://jsno.de/presentations/Front-Trends/#/

CSS SUMMIT 2012

http://environmentsforhumans.com/2012/css-summit/

Slides:

http://www.rachelandrew.co.uk/presentations/css-summit-2012

http://www.slideshare.net/chrisdavidmills

http://webinista.github.com/CSSSummitTransforms/

http://estelle.github.com/animation

http://lojjic.github.com/css-summit-polyfills/

http://www.xanthir.com/talks/2012-08-01/

It is a must-have tool that can be used along with our CSS Builder, RESTBuilder and JavaScript merger and obfuscator tools.

You don’t need to download or install anything. Just go to http://image2base64.wemakesites.net and start using it right away!

/* first apply the \9 hack for any version of internet explorer, for example */
body
{
    background: #f00\9;
}

/* ... then override the above rule by using the CSS3 :root selector which is supported by IE9, but still use the \9 hack to filter out only IE9 */
:root body
{
    background: #ccc\9;
}

By using the above CSS you can have special styles, which are the same for Internet Explorer 6-8 and other rules for Internet Explorer 9 without affecting other browsers.

IMDBFetcher makes possible cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc. There is a really thin PHP layer which is solely responsible to make the crossdomain request of getting the HTML page locally, strip some white space and send it g-zipped to the client. The actual conversion from HTML to JSON is done on the client via regular expressions. The final result looks like this:

{
    "title": "Scarface",
    "starring": [
        "Al Pacino", "Michelle Pfeiffer", "Steven Bauer"
    ],
    "directors": ["Brian De Palma"],
    "year": "1983",
    "rating": "8.2",
    "poster": "http://ia.media-imdb.com/images/M/MV5BMTQ5NzI3OTQ3NF5BMl5BanBnXkFtZTcwODczMjMzMQ@@._V1._SY317_CR4,0,214,317_.jpg",
    "description": "In 1980 Miami, a determined Cuban immigrant takes over a drug cartel while succumbing to greed.",
    "genres": ["Crime", "Drama", "Thriller"],
    "mpaaRating": "R",
    "releaseDate": "9 December 1983 (USA)",
    "runningTime": "170 min",
    "result": "success"
}

… And is stored on the client in the form of key/value paired data objects, which can then be (re)used locally. IMDB restricts hotlinking of images from their servers, so I also had to write a small PHP function that returns a local copy of the movie poster which can be used when rendering the movie JSON object to HTML on the page. Please, refer to the “Using the Image Proxy” chapter on the documentation page for IMDBFetcher to learn how to use it.

Key Features

• Provides simple to use movie data API from IMDB and returns a native JSON object ready for rendering on the client.
• Gzips and strips white space and other crap from the original page, and returns a simple native JSON object.
• Fully ajax-driven, no page reloads.
• Features convenient API methods for retrieving local or remote data, and for deleting local movie data.
• A bonus script for getting posters from IMDB locally (due to the restricted hotlinking policy of IMDB) is included.
• Very fast, responsive and extremely easy to use.

Downside of IMDBFetcher

The major downside is that IMDBFetcher is fully dependent on the DOM provided by IMDB. If IMDB changes the markup of their pages, then IMDBFetcher will stop working, but anyway it can be fixed pretty fast on my side, and I will release an updated version.

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, Internet Explorer 9/10. IMDBFetcher does not initialize on older versions of Internet Explorer (6-8).

Now… What?

If you like the idea, you can give it a try – just check the demo, download it and learn how to use it by visiting the IMDBFetcher’s documentation page. If you are looking for other cool solutions or web UI components, you can check Acid.JS Web.UI and get the entire suite from this link.

Related Posts

Requirements

• Modern browser with native JSON support. To enable in older browsers, use Douglas Crockford’s JSON2 or one of the various solutions on the Internet.
• Web Server.
• PHP.

Usage and API

Copy the entire AcidJs.XmlToJson/ directory from the distribution file in the root of your project, then register the run-time script before the closing </body> tag of the page:

<script src="AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>

(function() {
    window.xmltojson = new AcidJs.XmlToJson();
})();

If you wish to keep the AcidJs.XmlToJson/ directory on another location, you can use the optional rootFolder property in the object initializer, and then make sure you also change the path in the SRC attribute of the script tag you used to register the XmlToJson runtime:

<script src="Scripts/AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>

(function() {
    window.xmltojson = new AcidJs.XmlToJson({
        rootFolder: "Scripts/" // do not forget the trailing slash
    });
})();

Once you initialize XmlToJson you will have access to the following methods:

getRemoteData(config)
Request XML, convert it to JSON on the server, then set and optionally return the JSON object. In the config you can defin the following properties: name, url, params (optional) and success callback (optional):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Seasons in the Abyss"
        }
    ],
    success: function(data) {
        // the success call back returns the newly created data object that contains the converted JSON object and the config of the getRemoteData method
        console.log("data object: ", data); // return the entire data object
        console.log("JSON object: ", data.json); // return the converted XML to JSON object only
        console.log("data object name: ", data.name); // return the name of the data object
        console.log("request url: ", data.url); // return the request url
        console.log("request parameters as objects: ", data.params); // return the remote request parameters as objects
        console.log("removte request with the params as get data: " + data.remoteUrl); // return the removte request with the params as get data
    }
});

getLocalData(name)
Returns the local instance of an existing JSON data object by it’s name (set in the name property of the config of the getRemoteData method)

window.xmltojson.getLocalData("slayer");

deleteData(data)
Deletes an array of stored data object(s) by specified name and makes them unavailable.

window.xmltojson.deleteData(["slayer", "rss", "feedburner"]);

Examples

Get Artist and Album Data from Last.FM (http://last.fm):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Reign in Blood"
        }
    ],
    success: function(data) {
        console.log(data.json);
    }
});

Get RSS feed from Feedburner (http://feedburner.com)

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://feeds.feedburner.com/acidmartin",
    success: function(data) {
        console.log(data.json);
    }
});

Parse Sitemap File

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://acidjs.wemakesites.net/sitemap.xml.php",
    success: function(data) {
        console.log(data.json);
    }
});

Using XmlToJson

• Download.
• Check the demo page.
• Include on your page. Refer to the demo page included in the file you have downloaded.
• Have fun and don’t forget to check Acid.JS Web.UI components or follow @wemakesitesnet on Twitter

Related Posts

It is a must-have tool that can be used along with our CSS Builder and JavaScript merger and obfuscator tools.

Key Features

• Can be injected to a local web-site for testing it’s REST services.
• Support for cross-domain requests and public APIs (Twitter, Facebook, etc).
• Sleek, customizable, user-friendly and intuitive interface.
• Optional syntax highlighting for the response data object.
• Error handling for cross-origin request.

If these sound good and useful to you, you can go to the info page, check the demo or download RESTBuilder. Make sure you visit component’s help and API page to learn how to include and use the tool in your own projects.

To stay updated about Acid.JS Web.UI, please, subscribe or follow WeMakeSites.NET on Twitter.

Ribbonbar UI has everything you would expect from a ribbonbar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool Windows7 skin. And at last, but not least – deploying and configuring it is a matter of minutes.

Screenshots:

What’s New:

- JSON file instead of XML for tabs, ribbons and tools rendering.
- Rendering at lightning speed.
- Improved browser support.
- Fully CSS3 skinning mechanism with decent fallback for older browsers.
- New and easy to use client API.
- New command handling based on delegation;
- Support for external tools loaded via AJAX.
- Can be used on any server environment (default is PHP, but it can be extended to JAVA, .NET, etc).

Features:

- By far, the most successful recreation of the “real” desktop ribbonbar as a web component.
- Comprehensive and fun to use API.
- Easy to modify JSON structures for tabs, ribbons and commands.
- Imageless CSS3 skin working with all modern browsers and falling back nicely for older browsers.
- 4 types of inbuilt tools – “toolbar”, “office menu”, “split-button” and “external”.
- Ability to load external tools by loading them via AJAX and passing get/post parameters.
- Small footprint.
- Easy command handling.
- Can be used with 3-rd party WYSIWYG editors, as a navigation component, in email systems, etc.
- The retrieval for the JSON files can be done with any server runtime (however Ribbonbar is shipped with PHP routine only).

Now What?

Check the info page, go to the demo or visit the documentation page for Ribbonbar UI to learn how to integrate it into your own project. Eventually download it. As usual, the component is included in the latest version if Acid.JS Web.UI.

What it Does:

uriToJSON() is a tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).

What is new:

• The parameters are no longer in an array but in a hash map, which can be easily accessed like parameters.someParameter rather than parameters[0], parameters[1], etc.
• Automatic typecasting for strings, Boolean and Numbers for the parameters map and for the port.

Here is the demo, or you can download the example page from here:

function uriToJSON(uri) {
    "use strict";

    if(!("hostname" in document.createElement("a"))) {
        return;
    }

    var
        anchor = document.createElement("a"),
        params = {},
        data,
        param;

        anchor.setAttribute("href", uri);
        data = {
            hash: anchor.hash.replace("#", ""),
            host: anchor.host,
            hostname: anchor.hostname,
            parameters: null,
            pathname: anchor.pathname,
            port:  parseInt(anchor.port) ? parseInt(anchor.port) : anchor.port,
            protocol: anchor.protocol,
            uri: uri
        };

        if(anchor.search.split("?")[1]) {
            params = anchor.search.split("?")[1].split("&");
            data.parameters = {};
        }

        for(param in params) {
            if(params.hasOwnProperty) {
                var
                    pair = params[param].split("="),
                    key = pair[0],
                    value = pair[1] === "true" ? true : pair[1] === "false" ? false : pair[1];

                data.parameters[key] = parseInt(value) ? parseInt(value) : value;
            }
        }

        return data;
}

A few tests:

var
    data = uriToJSON("https://www.google.com:3030/search?number1=123&number2=456q=javascript&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a#somehash");

    console.log(data);
    console.log(data.hash);
    console.log(data.host);
    console.log(data.hostname);
    console.log(data.parameters);
    console.log(data.pathname);
    console.log(data.port);
    console.log(data.protocol);
    console.log(data.uri);

Related Posts

There is a newer and improved version of the class on this page.

Key Features

• Fast and reliable, with extremely small footprint compared to it’s amazing functionality.
• Lightweight admin with cool and easy to use UI, event drag-and-drop, etc.
• Venue, tickets provider, support band and country management.
• Fully customizable and localizable templates powered by Pisi Template Engine.
• Social and sharing buttons on the public page.
• Cool set of imageless CSS3 skins with fallback for older browsers.
• Drag-and-drop rearrangement of the public page columns order.
• Can be easily branded with band’s logo, etc.
• Event date-picker.
• Data backup.
• Event editor.
• CSS, templates and JavaScript are gzipped.
• Suitable for any kind of artist.
• If you are logged in, the admin can be accessed directly from the public front-end of the component
• And yet more loads of cool stuff. Just check it out…

Requirements

• Web-server with PHP support.
• Standards-compliant (HTML5, XHTML1.0, XHTML1.1) or Skinny DTD public page.
• JavaScript must be enabled.
• Cookies must be enabled.

Admin Screenshots (If accessed from the front-end public page)

And Now… What?

Want to give TourDates by Acid.JS Web.UI a try? Start by it’s info and demo pages, and if you like it, why don’t you download it and try it at home? The help and manual page is available here.

/**
* Get instance names of an object
* @param object - object name
* @param scope - window, parent, etc
*/

function getInstancesOf(object, scope) {
     "use strict";

     var
        instances = [];

    for(var v in scope) {
        if(scope.hasOwnProperty(v) && scope[v] instanceof object) {
            instances.push(v);
        }
    }
    return instances;
}

And a few tests, in which we create a couple of instances of the MyClass object:

(function() {
    "use strict";

    function MyClass(name) {
        this.name = name;
    }
    MyClass.prototype = {
        myMethod: function() {
            console.log("MyClass.prototype.myMethod(): " + this.name);
        }
    };

    window.MyClass = MyClass;
})();

var
    instance1 = new MyClass("property of instance1"),
    instance2 = new MyClass("property of instance2"),
    instance3 = new MyClass("property of instance3");

// get length of instances of MyClass
console.log(getInstancesOf(MyClass, window).length); // 3
// get the name of instance1
console.log(getInstancesOf(MyClass, window)[1]); // instance2
// get the name of instance0
console.log(getInstancesOf(MyClass, window)[0]); // instance1
// loop through all of the instances of MyClass, and call it's test() method
for(var i = 0, len = getInstancesOf(MyClass, window).length; i < len; i ++) {
    window[getInstancesOf(MyClass, window)[i]].myMethod();
}

Related Posts