Toast-like notification using HTML5

While working on an webapp that involves streaming music (using an audio tag) it came to my attention that when the audio needed to buffer the user had no way of knowing why the music stopped. Everyone I showed the app to acted confused any time the music unexpectedly stopped, something common if you are developing for mobile.

When working on Android I was fond of using toast notifications for this kind of thing and my first instinct was to search for something similar for HTML5. I came upon the toastr library, which works super well for simple notifications, but I soon felt frustrated by how limited I was on the background colour and ability to display/hide the notification on events rather than timed moments, something I constantly felt while working with Android target 2.3. I considered modifying the toastr library to suit my needs, but eventually dropped the idea of using an external library when I realized just how simple it would be to create my own notification for this specific purpose.

I now share with you the code I used for this for you can copy and paste into your project with ease if you need it, or modify it to suit your needs.

For the HTML I used a simple floating div with an image and text:

<div id="toast">
<img src="img/refresh.png"></img> Please wait, buffering
</div>

The best idea is to add this guy on the main document’s body. It will be hidden most of the time and will only show in an absolute position when needed.

I styled it using CSS, giving it a floating box feel with an absolute position of the top right corner of the screen and added an animation for a better “loading” feel.

@-moz-keyframes rotate {
from {
-moz-transform: rotateZ(0deg);
}
to { -moz-transform: rotateZ(-360deg);}
}

@-webkit-keyframes rotate {
from {
-webkit-transform: rotateZ(0deg);
}
to { -webkit-transform: rotateZ(-360deg);}
}

#toast{
min-height: 10%;
max-width: 40%;
padding-right: 10px;
background-color: rgba(4,4,4,0.8);
position: absolute;
right: 10px;
top: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
color: white;
box-shadow: 7px 7px 4px #888888;
}

#toast > img{
-moz-animation: rotate 1s;
-webkit-animation: rotate 1s;
-moz-animation-timing-function:linear;
-webkit-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

You can control when the notification pops or hides from JavaScript in two ways, using jQuery animations or simple class toggling.

Using jQuery animations

The better looking of the ways, you simply select the toast in jQuery and use the .fadeIn() method to make it appear and .fadeOut() to make it disappear. In my case, since I am making a buffering dialogue, I can use this when certain events trigger:

$("audio").on("waiting",function(){
$("#toast").fadeIn();
});

$("audio").on("playing",function(){
$("#toast").fadeOut();
});

Without animations

If for any reason you can’t/don’t want to use animations, you can simply toggle the hidden class to make it appear or disappear.

$("audio").on("waiting",function(){
$("#toast").removeClass("hidden");
});

$("audio").on("playing",function(){
$("#toast").addClass("hidden");
});

What if I want it to simply disappear after some time?

Like a normal toast? This is easily done with timing events

// $("#toast").removeClass("hidden");
   $("#toast").fadeIn();
   setTimeout(function(){
    // $("#toast").addClass("hidden");
       $("#toast").fadeOut();
                        },1000);

Changing the text inside the toast from JavaScript

In this example, which includes an image inside the toast, changing the text is as easy as:

$("#toast").contents()[2].nodeValue = "Some other stuff";

Likewise, we can change the image programatically:

$("#toast >img").attr("src","img/new.png");

What I like about making our own toasts is that we can easily specify the colour (so it matches our app’s palette), text, image and timing.

Demo

This notification will look like this.

What I like about making our own toasts is that we can easily specify the colour (so it matches our app’s palette), text, image and timing. Feel free to copy this into your project and modify it to suit your needs.

Advertisements

An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.

Tagged with: , , ,
Posted in developer tips
One comment on “Toast-like notification using HTML5
  1. have you played with Simple Push Notifications? I can not get started in any version of FF or FF OS Simulator as navigator.push is null, and navigator.mozPush, pushNotification, mozPushNotification are undefined. Found a shim though and will give it a try: https://github.com/frsela/pushJSlibrary
    Also some good info on this blog: http://blog.nikhilism.com/2013/04/push-notifications-for-open-web.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: