HTML5, CSS3 & JS Experiments

By Martin Ivanov

Notifications Bar

AcidJs.XNotifications is a HTML5 Web Component, built on top of Mozilla X-Tags, and using the styling approach from my "CSS3 Hello Bar" experiment.

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message>
	<acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

Demo

Observe the blue bar at the top of the page.

HTML5 Web Components enable truly encapsulated and reusable components for the web. You can browse the other examples of HTML5 Web Components on this page. More info regarding this exciting new technology: WebComponents.org, Google Polymer, Mozilla X-Tag. If you like this solution, you can also check my personal wesbite, Semtex UI Framework, Acid.JS Web.UI, my blog, follow me on Twitter or consider a donation. If you prefer a pure CSS3 solution of this example, you will find it here.

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.XNotificationsBar/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.

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

            
<p>Observe the blue bar at the top of the page.</p>

<acidjs-x-notifications-bar bgcolor="#026db9" 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>
        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&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.
    </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-NotificationsBar | HTML5 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-x-notifications-bar,
acidjs-x-notifications-bar label,
acidjs-x-notifications-bar label span
{
    display: block;
}

acidjs-x-notifications-bar,
acidjs-x-notifications-bar *
{
    margin: 0;
    padding: 0;
}

acidjs-x-notifications-bar a,
acidjs-x-notifications-bar > div,
acidjs-x-notifications-bar label span
{
    color: #fff;
}

acidjs-x-notifications-bar > div,
acidjs-x-notifications-bar label span
{
    line-height: 30px;
    text-align: center;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .25);
    -webkit-transition: all 300ms cubic-bezier(0.600, 0.040, 0.980, 0.335);
    -moz-transition: all 300ms cubic-bezier(0.600, 0.040, 0.980, 0.335);
    -o-transition: all 300ms cubic-bezier(0.600, 0.040, 0.980, 0.335);
    transition: all 300ms cubic-bezier(0.600, 0.040, 0.980, 0.335); /* easeInCirc */
}

acidjs-x-notifications-bar,
acidjs-x-notifications-bar input[type="checkbox"]
{
    display: none;
}

acidjs-x-notifications-bar
{
    position: fixed;
    z-index: 250;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    color: #000;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-x-notifications-bar > div
{
    margin-top: -37px;
    padding: 0 64px;
    border-bottom: solid 3px #fff;
    font-size: 12px;
}

acidjs-x-notifications-bar > div > div
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

acidjs-x-notifications-bar label
{
    float: right;
    margin: 0 16px 0 0;
}

acidjs-x-notifications-bar label span
{
    width: 30px;
    height: 30px;
    font-size: 27px;
    text-shadow: 0px 1px rgba(0, 0, 0, .75);
    border: solid 3px #fff;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
}

acidjs-x-notifications-bar input ~ label span:first-child
{
    border-color: transparent;
    box-shadow: none;
    background: none;
}

acidjs-x-notifications-bar input:not(:checked) ~ label span:first-child
{
    opacity: 0;
}

acidjs-x-notifications-bar input:checked ~ label span:first-child
{
    opacity: 1;
    transition: opacity 300ms 300ms ease-in-out;
}

acidjs-x-notifications-bar input:not(:checked) ~ label span:last-child
{
    margin-top: -33px;
}

acidjs-x-notifications-bar input:checked ~ label span:last-child
{
    margin-top: -70px;
}

acidjs-x-notifications-bar input:checked ~  div
{
    margin-top: 0;
}