Toast In JavaScript

-

Toast In JavaScript

✪ Luminous Organisation

2nd August, 2021 AD


Toast is a kind of simplified popup message which appears for 2—4 seconds. For the purpose of application or website designing, toast is the users-side temporary debug or console log. It popups important message to users. JavaScript has alert() method, but using alert() instead of showing toast is messy at all. But toasting in JavaScript is not easy as there is no scope to toast directly. There is no toast method like alert() for toasting in JavaScript.

Any developer looking for a solution of toast method probably fails to find a better solution because blogs in websites about JavaScript Toast are totally uncompleted or complicated. However the given solution here is the best solution as we use line break after 20 characters. Write once, use anywhere this codes. HTML, CSS and JavaScript Codes are given below respectively with step by step explanation.

Use Test This Yourself to test your code.


HTML

Add this red code within body tag of your HTML once.

<div id="orgLuminous_snackbar">✪ Luminous Organisation</div>

CSS

Add the red code below within the style tag of your HTML once only.

#orgLuminous_snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#orgLuminous_snackbar.orgLuminous_show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

JavaScript (i)

Add this red coded function within script tag.

function orgLuminous_Toast(myVal) {

var orgLuminous_nn = myVal.length /20;
if (orgLuminous_nn == Math.trunc(orgLuminous_nn)) {
orgLuminous_nn = Math.trunc(orgLuminous_nn);
} else {
orgLuminous_nn = Math.trunc(orgLuminous_nn) + 1;
}
var orgLuminous_sB = "";
for (var orgLuminous_ni = 0; orgLuminous_ni < orgLuminous_nn; orgLuminous_ni++) {
if ((orgLuminous_ni + 1) == orgLuminous_nn) {
orgLuminous_sB = orgLuminous_sB+myVal.slice(0, myVal.length)+"<br>";
} else {
orgLuminous_sB = orgLuminous_sB+ myVal.slice(0, 20)+"<br>";
myVal = myVal.slice(20, myVal.length);
}}
orgLuminous_sB = orgLuminous_sB.slice(0, (orgLuminous_sB.length)-4);
  document.getElementById("orgLuminous_snackbar").innerHTML = orgLuminous_sB;
  document.getElementById("orgLuminous_snackbar").className = "orgLuminous_show";
  setTimeout(function(){ document.getElementById("orgLuminous_snackbar").className = document.getElementById("orgLuminous_snackbar").className.replace("orgLuminous_show", ""); }, 3000);
}

JavaScript (ii)

Use this block wherever you want to Toast.

function orgLuminous_Toast(toastString);

The purple code above is changeable, replace it with your own variable or quoted value.

➤ Instance with variable:
var toastString = "Luminous Organisation";
function orgLuminous_Toast(toastString);

➤ Instance with quoted value:
function orgLuminous_Toast("Luminous Organisation");

Full Code Example

<!DOCTYPE html>
<html>
<head><title>Toast In JavaScript</title></head>
<body>
<input type="text" id="textId" value="" placeholder="Write popup message here">
<button onclick="orgLuminous_Toast(document.getElementById('textId').value);">Show Toast</button>
<div id="orgLuminous_snackbar">✪ Luminous Organisation</div>
<style>
#orgLuminous_snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#orgLuminous_snackbar.orgLuminous_show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
</style>
<script>
function orgLuminous_Toast(myVal) {

var orgLuminous_nn = myVal.length /20;
if (orgLuminous_nn == Math.trunc(orgLuminous_nn)) {
orgLuminous_nn = Math.trunc(orgLuminous_nn);
} else {
orgLuminous_nn = Math.trunc(orgLuminous_nn) + 1;
}
var orgLuminous_sB = "";
for (var orgLuminous_ni = 0; orgLuminous_ni < orgLuminous_nn; orgLuminous_ni++) {
if ((orgLuminous_ni + 1) == orgLuminous_nn) {
orgLuminous_sB = orgLuminous_sB+myVal.slice(0, myVal.length)+"<br>";
} else {
orgLuminous_sB = orgLuminous_sB+ myVal.slice(0, 20)+"<br>";
myVal = myVal.slice(20, myVal.length);
}}
orgLuminous_sB = orgLuminous_sB.slice(0, (orgLuminous_sB.length)-4);
  document.getElementById("orgLuminous_snackbar").innerHTML = orgLuminous_sB;
  document.getElementById("orgLuminous_snackbar").className = "orgLuminous_show";
  setTimeout(function(){ document.getElementById("orgLuminous_snackbar").className = document.getElementById("orgLuminous_snackbar").className.replace("orgLuminous_show", ""); }, 3000);
}
</script>
</body>
</html>


Happy Implementation.



Hope you'll face no difficulties. Comment if you have any problem related with this code(s).

Comments

Post a Comment

Popular posts from this blog

SeekBar JavaScript (I)

-
Image
✪ Luminous Organisation JavaScript SeekBar (I) Contents Chapter I What is SeekBar Calling a default SeekBar Setting minimum, maximum and value Getting progress Chapter II Setting progress programmatically Important lifecycle event: On Touch End Importance of SeekBar Wait a minute 1. What is SeekBar ❝A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level❞ — Android Developers. You all know about ProgressBar which displays the current progress of any event. Usually ProgressBar displays progress at a percentage value, such as — downloading (87%) . Like ProgressBar, SeekBar has its current value, minimum and maximum range. We can say ProgressBar an output element, whereas SeekBar is an input element, where user can alter the value within a preset range. Here is an example of SeekBar. Its range is between 80 to 100 and value is 85 by default. Get Progress S...
Read more

Image Editing / Element Filtering | JavaScript Block Editor

-
Image
Image Editing / Element Filtering | JavaScript Block Editor You can add either an ImageView or any other elements such as Button, TextView etc. We have added a Button to edit. 🏞️ 🏞️ The first one is real and the second one is edited by the filtering property of JavaScript. Let's know about it. Prerequisites Download   JavaScript Block Editor  App  HTML Add either an ImageView or any other element such as Button, TextView etc . Hence we can say that this property is not only for an ImageView. Make sure you provide a unique id for that element. Optionally add CSS to that element. For instance you can enlarge the size of that element for a better vision. JS Click ImageView > Edit Image . Provide element id properly. Edit the element in your own way by enhancing filtering effects: Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate, Sepia. Understanding subspecs (!important) Filter effects Effect Default Value Values...
Read more

YouTube Embedding In HTML

-
Image
YouTube Embedding In HTML YouTube Embedding Tutorial Using JavaScript Block Editor Android Application YouTube is one of the most useful tool in the world of technology. If you publish a website, it will be incomplete if you don't link it with your own YouTube channel. Imagine, if anyone leaves your website for watching your video(s) and does not come back to your website, or forgets your context — then what's the opportunity of linking "a href" for YouTube? The solution is — YouTube Embedding . You can embed your video(s) and/or playlist(s) in your website! Users/readers do not have to leave your website. It is a tool provided by Google ; and you, now, can use this tool in JavaScript Block Editor app, too. We also used "YouTube Embedding" in this website! Let's learn how to embed!! Prerequisites YouTube Channel YouTube Public Video(s) or Playlist(s) Allow Embedding from YT Studio Copied Link of Video/Playlist JavaScript Block Editor App St...
Read more