How to create 'toast' messages on Smartphone

songdawg · ‎06-08-2011

Hello,

Has anyone implemented 'toast' style popup messages for Webworks on the smartphone? These are messages that do not need interaction from the user but appear to the user and then disappear after a time without affecting what the user is doing.

If you hae eimplemented these, how did you do it?

Thanks.

astanley · ‎07-02-2009

Suggest creating a <div> element for the toast object, and use CSS to position it & then style the animation of showing/hiding the element.

Check out the AliceJS library, which was created to enable good CSS animations. It would allow you to do something like this (note this is untested code - just wrote it out for this post)

<style>
	#toast {
		position: fixed;
		left: 100;
		top: 100;
	}
</style>
...
<div id="toast"> Hello World </div>
...
<script src="js/alice/alice-min.js"></script>
<script>
var a = alice.init();
//use the zoom effect to display the toast element with a 1/2 second ease effect:
a.zoom("toast", { from: "0%", to: "100%" }, true, "none", "500ms", "ease", "0ms", "1", "normal", "running");

//Hide the toast after 2 seconds:
setTimeout(function() { a.zoom("toast", { from: "100%", to: "0%" }, true, "none", "300ms", "ease", "0ms", "1", "normal", "running"); }, 2000);

</script>

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.

Watch the BlackBerry Jam Americas Sessions.

songdawg · ‎06-08-2011

Thanks - I will give it a shot.

songdawg · ‎06-08-2011

I created a test page and it worked in the Ripple Chrome extension but not when I deployed it to either a 9900 (OS 7) device or 9870 (OS 6) device. What am I missing?

<!DOCTYPE HTML>
<html>
	<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="en" />
		<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
        <script src="scripts/alice/alice-min.js"></script>
        <style TYPE="text/css">
        #toast{position:fixed;left:10px;background-color:#CCCCCC;border:1px solid #666666;border-radius:5px;top:400px;height:40px;width:580px;padding:10px;}
        </style>
        <script>

function testClick() {
    alert("click");
        var a = alice.init();
        var toast = document.getElementById("toast");
        if (toast) {
            toast.innerHTML = "Toast is up.";
            toast.style.display = "";
            //use the zoom effect to display the toast element with a 1/2 second ease effect:
            a.zoom(toast, { from: "0%", to: "100%" }, true, "none", "500ms", "ease", "0ms", "1", "normal", "running");
            //Hide the toast after 3 seconds:
            setTimeout(function() { a.zoom("toast", { from: "100%", to: "0%" }, true, "none", "1000ms", "ease", "0ms", "1", "normal", "running"); }, 3000);
        }
}
</script>
	</head>
    
    	<body>
            <div id="toast" style="display:none;"></div>
            <button onclick="testClick();" >Click for toast</button>
    </body>
</html>

Welcome!

Web and WebWorks Development

How to create 'toast' messages on Smartphone

Re: How to create 'toast' messages on Smartphone

Re: How to create 'toast' messages on Smartphone

Re: How to create 'toast' messages on Smartphone