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.
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;
}