HTML5, CSS3 & JS Experiments

By Martin Ivanov

Loading Overlay

X-Overlay - native loading overlays on any element on the page as custom HTML5 tags and powerful JavaScript API:

<acidjs-xoverlay 
    id="overlay-01" 
    spinner="AcidJs.XOverlay/styles/images/loading-02.gif" 
    parent=".ajax-updating-box-01" 
    hidden>
</acidjs-xoverlay>

Demo

Box 1

Imagine this box loads it's content via AJAX, so during the AJAX call it is blocked.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XOverlay/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XOverlay/classes/XOverlay.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <acidjs-xoverlay 
                id="overlay-01" 
                spinner="pages/x-overlay-html5-web-component/example/AcidJs.XOverlay/styles/images/loading-02.gif" 
                parent=".ajax-updating-box-01" 
                hidden></acidjs-xoverlay>
            <acidjs-xoverlay 
                id="overlay-02"
                spinner="pages/x-overlay-html5-web-component/example/AcidJs.XOverlay/styles/images/loading-01.gif">
            </acidjs-xoverlay>
            
            <div class="ajax-updating-box-01">
                <h4>Box 1</h4>
                <p>Imagine this box loads it's content via AJAX, so 
                    during the AJAX call it is blocked.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
                    irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.</p>
            </div>
            <p> </p>
            <div>
                <ul class="overlay-tester inline-list">
                    <li><button name="ajax-box-1">Simulate AJAX Call on Box 1 and block it</button></li>
                    <li><button name="ajax-body">Simulate AJAX call and block the entire page</button></li>
                </ul>
            </div>
        
/*
 * X-Overlay Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

acidjs-xoverlay,
acidjs-xoverlay img
{
    display: block;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xoverlay
{
    z-index: 1000;
    background: rgba(255, 255, 255, .5);
    cursor: wait;
    overflow: hidden;
}

acidjs-xoverlay.acidjs-xoverlay-body
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

acidjs-xoverlay[hidden]
{
    display: none;
}

acidjs-xoverlay > img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
    width: 64px;
    height: 64px;
}