Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="mobile-web-app-capable" content="yes">
- </head>
- <body>
- <p id="toast1" role="alert"></p>
- <button onclick="showAlert1();">Show (works) Alert</button>
- <!-- Dynamically adding role="alert" doesn't work -->
- <p id="toast2">This is another alert</p>
- <button onclick="showAlert2();">Show (broken) dynamic alert</button>
- <!-- Creating the toast on the fly and inserting doesn't work -->
- <div id="toast3"></div>
- <button onclick="showAlert3();">Show (broken) created alert</button>
- <!-- Setting text to '', then setting back to original content works -->
- <p id="toast4" role="alert">This will reload its text in the DOM</p>
- <button onclick="showAlert4();">Show (works) reload alert</button>
- <!-- Doesn't work. Not sure why. Probably because region is hidden -->
- <p id="toast5" role="alert" style="visibility: hidden;">This is a timed alert</p>
- <button onclick="showAlert5();">Show (broken) timed alert</button>
- <div id="toast6" role="alert"></div>
- <button onclick="showAlert6();">Show timed alert</button>
- <script>
- var toast1 = document.querySelector('#toast1');
- function showAlert1() {
- toast1.textContent = 'This is an alert';
- }
- var toast2 = document.querySelector('#toast2');
- function showAlert2() {
- toast2.setAttribute('role', 'alert');
- }
- var toast3 = document.querySelector('#toast3');
- function showAlert3() {
- var myAlert = document.createElement('p');
- myAlert.setAttribute('role', 'alert');
- var myAlertText = document.createTextNode('yo yo yo! alert time!');
- myAlert.appendChild(myAlertText);
- toast3.appendChild(myAlert);
- }
- var toast4 = document.querySelector('#toast4');
- function showAlert4() {
- var txt = toast4.textContent;
- toast4.textContent = '';
- toast4.textContent = txt;
- }
- var toast5 = document.querySelector('#toast5');
- function showAlert5() {
- setTimeout(function() {
- var txt = toast5.textContent;
- toast5.style.visibility = 'visible';
- toast5.textContent = '';
- toast5.textContent = txt;
- }, 1000);
- }
- var toast6 = document.querySelector('#toast6');
- function showAlert6() {
- setTimeout(function() {
- var toast = document.createElement('p');
- toast.setAttribute('role', 'alert');
- var txt = document.createTextNode('this is a timed alert');
- toast.appendChild(txt);
- toast6.appendChild(toast);
- }, 1000);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement