Forum | Appery.io

Also.. For nice Toast style popup messages..

Make custom CSS add..
code
.toast {display: none; position: fixed; z-index: 99999; width: 100%; text-align: center; bottom: 3em;}
.toast .message {display: inline-block; color: #fff ; padding: 5px; border-radius: 5px; box-shadow: 2px 2px 2px #666 ; -webkit-box-shadow: 2px 2px 2px #666 ; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; background: #282324 ; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #554434 ), color-stop(1, #282324 ));}
/code

Then add a custom JS. And place.
code
var toastDelay = 2000;//default display time
function toast(sMessage)
{
var container = $(document.createElement("div"));
container.addClass("toast");
var message = $(document.createElement("div"));
message.addClass("message");
message.text(sMessage);
message.appendTo(container);
container.appendTo(document.body);
container.delay(100).fadeIn("slow", function()
{
$(this).delay(toastDelay).fadeOut("slow", function()
{
$(this).remove();
});
});
}
/code

To Use...
code
toastDelay = 3000;//message show time
toast('my message');
//or eg using a variable
toast('my variable is.. ' + myvar);
/code

Hi Neil,

I was trying to replicate the toast style pop message. I have created the CSS and JS as you mentioned. But I want to popup toast style popup window on a button click on Tiggzi. Can you guide me how to do this please? I have tried putting "To Use" code you mentioned on the button click event but it doesn't work. Appreciate your help.

Hi Rahul,

We've tested what Neil wrote here: https://getsatisfaction.com/tiggzi/to... - it is displayed correctly.
Did you create CSS asset and JS asset with content Neil adviced?

To display toast popup, on Click event add "Run JavaScript" action with the following code:
codetoastDelay = 3000; //message show time
toast('my message');/code

Thanks Katya.
Rahule this should work fine.

I have upgraded my toat messaging to include selecting font size and now if there are multiple messages, there placed on screen bottom to top. Instead of overwriting the previous message.
To display message..Run from anywhere..
code
toastDelay = 3000; //message show time in mili second 3000= 3 sec.
toast('my message', 12);
/code

Custom JS asset
code
var toastDelay = 2000;
function toast(sMessage,size) {

var container = $(document.createElement("div"));
container.addClass("toast");
var message = $(document.createElement("div"));
message.addClass("message");
message.text(sMessage);
message.appendTo(container);
if ($('.message').length) {
var screenSize = $(document).height();
var p = $('.message:last');
var position = p.offset();
var it = (position.top);
position = screenSize - it;
position = position + 4;
container.appendTo(document.body).css({'bottom':position,'font-size':size});
}else{
container.appendTo(document.body).css({'font-size':size});
}
container.delay(100).fadeIn("slow", function() {
$(this).delay(toastDelay).slideUp("slow", function() {
$(this).remove();
});
});

$('.message').click( function() {
$('.message:first').remove();
});

}//end function
/code

Of course include the css asset.

Hello,

Here is a small Tips for display popup :
CSS
pre
code
.ui-dialog-background {
opacity: 0.5;
display: block !important;
-webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog-background.pop.in {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog {
min-height: 80% !important;
background: transparent !important;
z-index: 3000;
}
/code
/pre

JS
pre
code
$('div[data-role="dialog"]').live('pagebeforeshow', function(e, ui) {
ui.prevPage.addClass("ui-dialog-background ");
});

$('div[data-role="dialog"]').live('pagehide', function(e, ui) {
$(".ui-dialog-background ").removeClass("ui-dialog-background ");
});
/code
/pre

Have Fun

Nicolas

Hi, thank you for posting code!