DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Android Toast-like Alerts in HTML using CSS

Android Toast-like Alerts in HTML using CSS

Terrence Ryan user avatar by
Terrence Ryan
·
Dec. 26, 11 · Interview
Like (1)
Save
Tweet
Share
12.78K Views

Join the DZone community and get the full member experience.

Join For Free

One of the little things I like about Android is the "toast." If you are not familiar with the toast, it is the little transparent notice you get that operations are done. The best example is the toast that tells you how long you will have to sleep before your alarm goes off. (Pictured here.)


I really like the concept. It usually short-circuits the whole item editing process.

Without toasts:

  1. Click save button.
  2. Get feedback that item has been saved.
  3. Manually go back to previous screen.


With toasts:

  1. Click save button & go back & get feedback.


I wanted to implement toasts in an HTML PhoneGap application. Now I know I could do this with just JavaScript, or with jQuery, but I really wanted to give CSS transitions a try. CSS transitions allow you to alter a CSS property over a set period of time. They work really well for this sort of case.

So the first thing I have to do is apply the transition.

You'll notice a couple of things here. One, the syntax for the transform is pretty simple:

Toast CSS Definition

    #toast{
    position: fixed;
    top: 20px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    border: 1px solid #666;
    background-color: #B1BCCF;
    padding: 10px 0 ;
    text-align:center;
    opacity: .9;
     
    /*The good stuff */
    -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
    -moz-transition: opacity 0.5s ease-out; /* FF4+ */
    -ms-transition: opacity 0.5s ease-out; /* IE10? */
    -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
    transition: opacity 0.5s ease-out;
     
    }

 

[browser css keyword]: [property to animate] [duration] [easing method]

 

Once you do that, the rest is really simple. Basically, all you have to do is change the value for the property you have added a transform to, and the browser takes care of the rest. So to fade out my toast, I set the opacity to 0. That's it.

Toast Javascript Off Definition

function hideToast(){
    var alert = document.getElementById("toast");
    alert.style.opacity = 0;
     
}

See the demo.

Why do I like this:

  • I always prefer doing visual things in CSS.
  • This seems to me to be simpler than using JavaScript animations
  • CSS transitions will be hardware accelerated on environments that support doing so.

 

Now, I have to tell you there are caveats:

  • It doesn't work in IE
  • I'm sure someone who knows more than I will put more in the comments

But it does work within the mobile browsers I tested on iOS and Android, which means I'm free to use this in my PhoneGap application.

 

Source: http://www.terrenceryan.com/blog/post.cfm/android-toast-like-alerts-in-html-using-css

CSS HTML Android (robot)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Exploring the Benefits of Cloud Computing: From IaaS, PaaS, SaaS to Google Cloud, AWS, and Microsoft
  • Public Cloud-to-Cloud Repatriation Trend
  • Project Hygiene
  • Unleashing the Power of JavaScript Modules: A Beginner’s Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: