I am working on a Chrome extension using manifest 3. I have a timer in the popup HTML page which is triggered when the button is pressed. I realized that the timer resets every time the popup is opened whereas I want it to remain running in the background.
So I thought the only answer would be to tie the popup page to the background.js. I created a state for the timer called pomo_state. Then I send a message from the popup.js to the background.js which either turns the state to OFF or ON depending on the button pressed by the user in the popup page. Then I am planning to run the timer in the background and dynamically update the popup.html every time it is opened by having it retrieve the timer from the background.
But I couldn't even get past the sending and receiving of the pomo_state. I got the error in the title. And when I changed it to chrome.extensions.runtime.sendMessages, I got an error saying message was undefined or something like that. Also right now in my popup.js I have the timer code for now, but putting it in the background.js will be another problem since I got an error for background.js not registering in the manifest when I did that. Also I should say that looking at other questions that had the same error, I couldn't really find a concrete answer. And I was wondering what I am screwing up below is probably really basic.
I will attach part of my background.js, popup.html and popup.js. Hopefully it will be sufficient. Thanks!
background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) =>{
if (request.message === 'get_name'){
chrome.storage.local.get('name', data =>{
if (chrome.runtime.lastError){
sendResponse({
message: 'fail'
});
return;
}
sendResponse({
message: 'success',
payload: data.name
})
});
return true;
} else if (request.message === 'pomo_change'){
chrome.storage.local.set({
pomo:request.payload
}, () => {
if (chrome.runtime.lastError){
sendResponse({message: 'fail'});
return;
}
sendResponse({message: 'success'});
})
return true;
}
});
popup.js
const start_pom = document.getElementById("start_pom");
let colorSwitchCounter = 1;
const startingMinutes = 25;
let time = startingMinutes*60;
const countdownEl = document.getElementById("countdown-timer");
setInterval(updateCountdown,1000);
function updateCountdown(){
const minutes = Math.floor(time / 60);
let seconds = time%60;
countdownEl.innerHTML = `${minutes}: ${seconds}`;
console.log(`${minutes}: ${seconds}`);
time--;
}
start_pom.addEventListener("click", ()=>{
console.log("I was clicked", colorSwitchCounter);
colorSwitchCounter = colorSwitchCounter +1;
if(colorSwitchCounter%2 ==0){
chrome.runtime.sendMessage({
message: 'pomo_change',
payload: 'ON'
}, response =>{
if (response.message === 'success'){
start_pom.innerHTML= 'Stop Pomodoro';
start_pom.style.backgroundColor = "#de7878";
}
});
}
else{
chrome.runtime.sendMessages({
message: 'pomo_change',
payload: 'OFF'
}, response =>{
if (response.message === 'success'){
start_pom.innerHTML= 'Start Pomodoro';
start_pom.style.backgroundColor = "#de7878";
}
});
}
})
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding:0px;
height: wrap-content;
width: 255px;
background-color: whitesmoke;
}
section{
padding:10px;
margin-bottom: 5px;
}
.hero-area{
color: black;
text-align: center;
font-size: 10px;
border-bottom: 1px solid lightgrey;
}
.button{
text-align: center;
width: 50%;
height: wrap-content;
margin: auto;
padding:10px;
display: flex;
background-color: #78A3DE;
color:white;
font-weight: 200;
cursor: pointer;
border:none;
}
.button:hover{
background-color:#78a3de91;
}
.pom-area-info-timer{
text-align: center;
font-size: 20px;
}
.pom-area-info-status{
text-align: center;
font-size: 10px;
}
</style>
</head>
<body>
<section class = 'hero-area'>
<h1>Good Evening. Yuck exam season!</h1>
</section>
<section class = 'pom-area'>
<button id = "start_pom" class = "button pom-area-start-button">Start Pomodoro</button>
<div class = 'pom-area-info'>
<div class = "pom-area-info-timer">
<h1 id = countdown-timer>25:00</h1>
</div>
<div class = "pom-area-info-status">
STUDY TIME!
</div>
</div>
</section>
<section class = 'settings'>
<button id = "start_settings" class = "button settings-button">Settings</button>
</section>
<script src = "./popup_script.js"></script>
<script src="lib/easytimer/dist/easytimer.min.js"></script>
<div id="countdownExample">
<div class="values"></div>
</div>
</body>
</html>
Related
I am trying to import a function of a simple button click opening up a box from one .html file to another and for some reason it isn't working. It works perfectly fine when all the css js and html is in its own file, but when they are apart I cant get the button to open when clicked.
regions.html file
<style> #btn_region {
position: absolute; /* create a positioning context for the list items */
width: 23%;
left: 51vw;
top: 130vw;
font-size: 14px;
height: 9vw;
z-index: 1000;
}
#box_region {
position: absolute;
width: 90%;
height: 27%;
background-color: #f1f1f1;
left: 0px;
top: 138vw;
}
.regions {
width:80%;
height:60.15%;
}}
</style>
<button id='btn_region'>Region</button>
<div id='box_region' style='display:none;'>
<div id='div_region'>
<a id='neus' href='$(url)'>
<h1><span class='color-change' >Northeast</span></h1>
<img class='regions'
src='#' width='300'
height='225'>
</a>
</div>
<div id='div_region'>
<a id='usa' href='$(url)'>
<h1><span class='color-change' >USA</span></h1>
<img class='regions'
src='#' width='300'
height='225'>
</a>
</div>
</div>
script.js file
const regions = document.querySelector('.regions')
fetch('regions.html')
.then(res=>res.text())
.then(data=>{
regions.innerHTML=data
const parser = new DOMParser()
const doc = parser.parseFromString(data, 'text/html')
eval(doc.querySelector('script').textContent)
})
let mainDirectory = '#'
let neus_href = document.getElementById('neus');
neus_href.href = mainDirectory+'neus.html';
let usa_href = document.getElementById('usa');
usa_href.href = mainDirectory+'usa.html';
const btn_region = document.getElementById('btn_region');
const box_region = document.getElementById('box_region');
btn_region.addEventListener('click', function() {
if (box_region.style.display === 'block') {
box_region.style.display = 'none';
} else {
box_region.style.display = 'block';
}
});
document.addEventListener('click', function(event) {
if (event.target !== btn_region && event.target !== box_region) {
box_region.style.display = 'none';
}
});
file I'm importing into
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="regions">
</div>
<script src="script.js"></script>
</body>
</html>
Spotted a syntax error in "regions.html". I think there's an extra curly bracket in your last style rule.
.regions {
width:80%;
height:60.15%;
}} <-------
Also, I'm getting a console error: neus_href is null
I have a feeling this is because you're trying to select #neus as a generated DOM element, with:
let neus_href = document.getElementById('neus');
I imagine this would work fine if all the HTML code is together on one page, but when the HTML is split into separate files you should probably grab it from your fetch data, which it looks like you're storing in the 'doc' variable. Should probably try something like:
let neus_href = doc.querySelector('#neus');
Hope this helps.
Requirement:
User will enter "Number of Containers" and "Number of Controls"
Random input elements (numeric, checkbox, etc) will be created and equally distributed among the containers.
When user clicks on "Create" again, the input elements shown in the UI will be deleted and new set of random input elements will be populated again.
Issue:
Every time I create new set of input elements, the time taken for creating increases linearly up to a point then decreases little and increases again
I use the below code to empty the div that accommodates the containers and create input elements
Emptying the overall div
node.innerHTML = ""
Creating a numeric control with label
function createNumber(display) {
let controlWrap = document.createElement("div");
let label = document.createElement("label")
let control = document.createElement("input")
control.type = "number";
label.append("Numeric Input");
label.append(control);
controlWrap.append(label);
controlWrap.style.display = display;
controlWrap.classList.add("ctrl");
return controlWrap;
}
Find the entire code below,
//Constands
const CTRL_DISPLAY_TYPE = "block"
//Selection
const numOfContainers = document.querySelector("#numOfContainers");
const numOfControls = document.querySelector("#numOfControls");
const createContainersBtn = document.querySelector("#create");
const containerWrapper = document.querySelector(".containerWrapper");
const controlHeading = document.querySelectorAll(".ctrlHeading");
//Event Listeners
createContainersBtn.addEventListener("click",createContainers);
controlHeading.forEach(element => element.addEventListener("click"),expandControl);
//Support-functions
function createControl(newControlContainer){
let newControlWrapper = document.createElement("div")
newControlWrapper.classList.add("ctrlWrapper");
let newControl = createNumber(CTRL_DISPLAY_TYPE);
newControlWrapper.appendChild(newControl);
newControlContainer.appendChild(newControlWrapper);
}
function createNumber(display){
let controlWrap = document.createElement("div");
let label = document.createElement("label")
let control = document.createElement("input")
control.type = "number";
label.append("Numeric Input");
label.append(control);
controlWrap.append(label);
controlWrap.style.display = display;
controlWrap.classList.add("ctrl");
return controlWrap;
}
function calculateControlPerContainer(numOfContainers,numOfControls,maxLimit){
let controlsPerContainer = []
let pendingControls = numOfControls%numOfContainers
let controlPerContainerNum = Math.floor(numOfControls/numOfContainers)
for (let i=0;i<numOfContainers;i++){
if (pendingControls>0){
newControlsPerContainer=controlPerContainerNum+1;
controlsPerContainer.push(newControlsPerContainer);
--pendingControls;
}
else{
controlsPerContainer.push(controlPerContainerNum);
}
}
return controlsPerContainer
}
function expandControl(event){
const control = event.currentTarget.nextElementSibling;
if (control.style.display === "none"){
control.style.display = "block";
}
else {
control.style.display = "none"
}
}
//utility-functions
function removeChild(node){
while(node.firstChild){
node.removeChild(node.firstChild);
}
}
function clearNodeData(node){
node.innerHTML = ""
}
//main-Functions
function createContainers(event){
console.time("Deleting controls");
const controlsPerContainer = calculateControlPerContainer(parseInt(numOfContainers.value),parseInt(numOfControls.value));
clearNodeData(containerWrapper);
//removeChild(containerWrapper);
console.timeEnd("Deleting controls");
console.time("populating controls");
controlsPerContainer.forEach(num=>{
let newControlContainer = document.createElement("div")
newControlContainer.classList.add("ctrlContainer");
for(let j=0;j<num;j++){
createControl(newControlContainer);
}
containerWrapper.appendChild(newControlContainer);
})
console.timeEnd("populating controls");
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
height:100%
}
.containerWrapper{
display:flex;
flex-direction: row;
height: 90%;
}
.ctrlContainer{
/* flex-grow:1; */
flex-shrink: 0;
border-style: solid;
border-width: 0.5px;
margin:0 2px;
flex-basis: calc(25% - 4px);
align-items: stretch;
display:flex;
flex-direction: column;
overflow: auto;
}
.ctrlWrapper{
border-style: solid;
border-width: .5px;
margin:2px
}
.ctrlHeading{
display:block;
width: 100%;
text-align: left;
border: 0;
}
.ctrl{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Controls</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<label for="numOfContainers">Number of Containers</label>
<input type="number" id="numOfContainers" name="numOfContainers" min="1" max="500" value="100">
<label for="numOfControls">Number of Controls</label>
<input type="number" id="numOfControls" name="numOfControls" min="1" max="1500" value="1500"><br>
<button id="create">Create</button>
<div class="containerWrapper">
<!-- <div class="ctrlContainer">
<div class="ctrlWrapper">
<button class="ctrlHeading">Checkbox</button>
<input class="ctrl" type="checkbox">
</div>
<div class="ctrlWrapper">
<button class="ctrlHeading">Checkbox</button>
<input class="ctrl" type="checkbox">
</div>
</div>
<div class="ctrlContainer">2</div>
<div class="ctrlContainer">3</div> -->
</div>
<script type="module" src="scripts/MainBackup.js"></script>
</body>
</html>
I tried analyzing using chrome developer tools and could see "append" function is taking more total time. Please let me know if I am doing something wrong in deleting or adding controls and how to avoid this time build up with every run.
More Information after some more exploration:
I am seeing this behavior only in chrome. In firefox and edge, there is no time buildup.
Firefox:
This occurs only in my system. Others are not able to replicate.
The time build-up occurs in portion of code in which I append inputs to the label to assign it to the input without using id. If I directly append the input to container, the time buildup doesn't happen
I'm trying to make this dialog popup for the duration of the execution of the AddConclusionSlide function, but I get the exception: "TypeError: Cannot find function show in object Presentation." Is there an alternative to "show" for Google Slides Script (This works perfectly in google docs)?
function AddConclusionSlide() {
htmlApp("","");
var srcId = "1Ar9GnT8xPI3ZYum9uko_2yTm9LOp7YX3mzLCn3hDjuc";
var srcPage = 6;
var srcSlide = SlidesApp.openById(srcId);
var dstSlide = SlidesApp.getActivePresentation();
var copySlide = srcSlide.getSlides()[srcPage - 1];
dstSlide.appendSlide(copySlide);
Utilities.sleep(3000); // change this value to show the "Running script, please wait.." HTML window for longer time.
htmlApp("Finished!","");
Utilities.sleep(3000); // change this value to show the "Finished! This window will close automatically. HTML window for longer time.
htmlApp("","close"); // Automatically closes the HTML window.
}
function htmlApp (status,close) {
var ss = SlidesApp.getActivePresentation();
var htmlApp = HtmlService.createTemplateFromFile("html");
htmlApp.data = status;
htmlApp.close = close;
ss.show(htmlApp.evaluate()
.setWidth(300)
.setHeight(200));
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
}
.gap-10 {
width: 100%;
height: 20px;
}
.gap-20 {
width: 100%;
height: 40px;
}
.gap-30 {
width: 100%;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Function is running... This could take a while. It's a lot of data...</p>
</div>
<p id="status">(innerHTML).</p>
<div id="imageico"></div>
<script>
var imageContainer = document.getElementById("imageico");
if (<?= data ?> != "Finished!"){
document.getElementById("status").innerHTML = "";
} else {
document.getElementById("status").innerHTML = "";
}
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>
Unlike Spreadsheet object, Slide object doesn't have a show method. So, class ui needs to be used:
SlidesApp.getUi().showModalDialog(htmlApp.evaluate()
.setWidth(300)
.setHeight(200), "My App")
I'm building a web app in which the user can type in any key word or statement and get in return twenty results from wikipedia using the wikipedia API. AJAX works just fine. When the web app pulls data from wikipedia it should display each result in a DIV created dynamically.
What happens is that, when the click event is fired, the twenty DIVs are created five times, so one hundred in total. I don't know why but, as you can see in the snippet below, the web app creates twenty DIVs for each DOM element that has been hidden (through .hide) when the click event is fired.
Here's is the code:
function main() {
function positive() {
var bar = document.getElementById("sb").childNodes[1];
var value = bar.value;
if (!value) {
window.alert("Type in anything to start the research");
} else {
var ex = /\s+/g;
var space_count = value.match(ex);
if (space_count == null) {
var new_text = value;
} else {
new_text = value.replace(ex, "%20");
//console.log(new_text);
}
url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&continue=-%7C%7C&srsearch=" + new_text + "&srlimit=20&sroffset=20&srprop=snippet&origin=*";
var request = new XMLHttpRequest();
request.open("GET", url);
//request.setRequestHeader("Api-User-Agent", "Example/1.0");
request.onload = function() {
var data = JSON.parse(request.responseText);
render(data);
//console.log(data);
}
request.send();
}
}
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
});
}
var first_btn = document.getElementById("first_btn");
first_btn.addEventListener("click", positive, false);
}
$(document).ready(main);
html {
font-size: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;รน
}
.align {
text-align: center;
}
#first_h1 {
margin-top: 30px;
}
#first_h3 {
margin-bottom: 30px;
}
#sb {
margin-bottom: 10px;
}
#second_h1 {
margin-top: 30px;
}
#second_h3 {
margin-bottom: 30px;
}
.window {
width: 70%;
height: 150px;
border: 3px solid black;
margin: 0 auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wikipedia Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1 class="align" id="first_h1">Wikipedia Viewer</h1>
<h3 class="align" id="first_h3">Type in a key word about the topic you are after<br>and see what Wkipedia has for you..</h3>
<p class="align" id="sb">
<input type="text" name="search_box" placeholder="Write here">
<label for="search_box">Your search starts here...</label>
</p>
<p class="align" id="first_btn">
<input type="submit" value="SEND">
</p>
<h1 class="align" id="second_h1">...Or...</h1>
<h3 class="align" id="second_h3">If you just feel eager of random knowledge,<br>punch the button below and see what's next for you...</h3>
<p class="align" id="second_btn">
<input type="submit" value="Enjoy!">
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
I made the code easier to read by erasing the for loop. As you can see, even with just one result, it is displayed five times.
Do you know guys why it happens?
thanks
The line:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})
Says, for every element in this "list", hide the element and run this block of code after hidden.
This code is the culprit:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow",
function() {...});
The callback function is called five times, one for each ID listed, not once for all of them, as you might expect.
A workaround is to create a class (say, "hideme"), apply it to each element you want to hide, and write:
$('.hideme').hide("slow", function() {...});
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
}); // Finish it here..
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
// }); Move this line..
}
As described in the docs:
complete: A function to call once the animation is complete, called once per matched element.
Which means this line will call the handle function 5 times with 5 matched elements.
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
The easiest solution is moving the render codes outside of the hide event handler
In my project I need to keep notification open unless user clicks on it and if there is an update in the time between it was triggerred and the user clicks on it, i need to update the value on the toast notificaiton.
I don't find any reference on how can i update a notification. Does anyone know ?
i'm using this github repo : toastr.js
please suggest
You can keep the toast open indefinitely by setting a timeOut value of 0 on the global scope using toast.options.
Alternately, you can set it using the third argument of the toast method.
For example:
toastr.success("message body", "title", {timeOut:0})
For your second question, you can update an existing toast by capturing it's reference when it's created, and then mutating it after creation.
For example:
var myToast = toastr.success("message body", "title", {timeOut:0});
myToast.find(".toast-title").text("new title");
myToast.find(".toast-message").text("new message");
You may also want to set the extendedTimeOut to 0 too, in case the user hovers over the toast before you've finished with it, like so:
var myToast = toastr.success("message body", "title", {timeOut:0, extendedTimeOut:0});
Then when you're done you can hide the toast programmatically:
$(myToast).fadeOut();
I assume you have a unique id for each toast. This will do the job:
var t = toastr.warning("message", "title");
t.attr('id', 'your unique id');
Afterwards you can select each toastr simply like this:
t = $('#id')
There is a easy solution like this-
toastr.options.timeOut = 0;
Demo Code-
$(function() {
function Toast(type, css, msg) {
this.type = type;
this.css = css;
this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.';
}
var toasts = [
new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'),
new Toast('info', 'toast-top-full-width', 'top full width'),
new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'),
new Toast('success', 'toast-top-right', 'top right'),
new Toast('warning', 'toast-bottom-right', 'bottom right'),
new Toast('error', 'toast-bottom-left', 'bottom left')
];
toastr.options.positionClass = 'toast-top-full-width';
toastr.options.extendedTimeOut = 0; //1000;
toastr.options.timeOut = 0;
toastr.options.fadeOut = 250;
toastr.options.fadeIn = 250;
var i = 0;
$('#tryMe').click(function () {
$('#tryMe').prop('disabled', true);
delayToasts();
});
function delayToasts() {
if (i === toasts.length) { return; }
var delay = i === 0 ? 0 : 2100;
window.setTimeout(function () { showToast(); }, delay);
// re-enable the button
if (i === toasts.length-1) {
window.setTimeout(function () {
$('#tryMe').prop('disabled', false);
i = 0;
}, delay + 1000);
}
}
function showToast() {
var t = toasts[i];
toastr.options.positionClass = t.css;
toastr[t.type](t.msg);
i++;
delayToasts();
}
})
body {
margin: 5em;
}
li {
font-size: 18px;
padding: 4px;
}
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: fixed;
font-family: FontAwesome;
font-size: 24px;
line-height: 18px;
float: left;
color: #FFF;
padding-right: 0.5em;
margin: auto 0.5em auto -1.5em;
}
#toast-container > .toast-warning:before {
content: "\f003";
}
#toast-container > .toast-error:before {
content: "\f001";
}
#toast-container > .toast-info:before {
content: "\f005";
}
#toast-container > .toast-success:before {
content: "\f002";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Toastr with FontAwesome Icons</h1>
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Embedded icon using the <i> tag</li>
<li><i class="icon-li icon-ok"></i>Doesn't work with background-image</li>
<li><i class="icon-li icon-ok"></i>We can use the :before psuedo class</li>
<li><i class="icon-li icon-ok"></i>Works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers</li>
<li><i class="icon-li icon-ok"></i>See CanIUse.com for browser support</li>
</ul>
<button class="btn btn-primary" id="tryMe">Try Me</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="script.js"></script>
</body>
</html>
I needed to identify my toastr and I found a solution:
toastr["error"]("Message", "Alert", {
own_id: 666,
onCloseClick: function(a, b) {
// here you can update notification identified by own_id
console.log(this.own_id);
}
})