Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
songdawg
Posts: 59
Registered: ‎06-08-2011
My Device: n/a

How to create 'toast' messages on Smartphone

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.

Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: How to create 'toast' messages on Smartphone

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.
Developer
songdawg
Posts: 59
Registered: ‎06-08-2011
My Device: n/a

Re: How to create 'toast' messages on Smartphone

Thanks - I will give it a shot.

Developer
songdawg
Posts: 59
Registered: ‎06-08-2011
My Device: n/a

Re: How to create 'toast' messages on Smartphone

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>