Chrome notifications test

Developer
Gabriel
Size
3,589 Kb
Views
22,264
  1. Chrome notifications test Previews
  2. Chrome notifications test HTML Codes
  3. Chrome notifications test CSS Codes
  4. Chrome notifications test JS Codes

How do I make an chrome notifications test?

(updated on 14th Dec). What is a chrome notifications test? How do you make a chrome notifications test? This script and codes were developed by Gabriel on 18 July 2022, Monday.

Chrome notifications test Previews
IQ Test

Chrome notifications test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>chrome notifications test</title> <link rel='stylesheet prefetch' href='http://bootswatch.com/flatly/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ input.form-control {max-width: 300px;margin: 0 0 10px;}
.alert {display: none;}
.notice {color: #888;) </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>HTML5 Notification - Chrome only! <small>just a test...</small></h1> <hr> <div class="well"><strong>Info</strong>: Outdated in newer Chromes...API has changed.</div> <div class="alert alert-info" id="clicked">You clicked on the notification at</div> <div class="alert alert-success" id="ischrome">You're using Chrome - you can run this test.</div> <div class="alert alert-danger" id="isntchrome">To use this, you need to use Google Chrome.</div> <input type="text" id="title" placeholder="notification title" class="form-control"> <input type="text" id="msg" placeholder="notification message" class="form-control"> <button id="notify" class="btn btn-primary">Notify!</button> <br> <br> <small class="notice"><b>Note:</b> try a click on the notification! :)</small>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Chrome notifications test - Script Codes CSS Codes

input.form-control {max-width: 300px;margin: 0 0 10px;}
.alert {display: none;}
.notice {color: #888;)

Chrome notifications test - Script Codes JS Codes

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome) { $('#ischrome').fadeIn('fast'); $('#notify').click(function(){ notify(); });
} else { $('#isntchrome').fadeIn('fast'); $('input, button').attr('disabled','disabled');
}
function notify() { var allowed = 0;//window.webkitNotifications.checkPermission(); if (allowed == 0) { var note = window.webkitNotifications.createNotification( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/79086/codepen.jpg', $('#title').val(), $('#msg').val() ); note.onclick = function () { time = new Date().getTime(); time /= 1000; $('#clicked').fadeIn('fast'); $('#clicked').append(date(' H:m:s ...',time)); note.close(); } note.show(); } else { window.webkitNotifications.requestPermission(); }
}
/* * PHP date() function in JS (minified) * phpjs.org/functions/date/ */
function date(e,t){var n=this,r,i,s=["Sun","Mon","Tues","Wednes","Thurs","Fri","Satur","January","February","March","April","May","June","July","August","September","October","November","December"],o=/\\?(.?)/gi,u=function(e,t){return i[e]?i[e]():t},a=function(e,t){e=String(e);while(e.length<t){e="0"+e}return e};i={d:function(){return a(i.j(),2)},D:function(){return i.l().slice(0,3)},j:function(){return r.getDate()},l:function(){return s[i.w()]+"day"},N:function(){return i.w()||7},S:function(){var e=i.j(),t=e%10;if(t<=3&&parseInt(e%100/10,10)==1){t=0}return["st","nd","rd"][t-1]||"th"},w:function(){return r.getDay()},z:function(){var e=new Date(i.Y(),i.n()-1,i.j()),t=new Date(i.Y(),0,1);return Math.round((e-t)/864e5)},W:function(){var e=new Date(i.Y(),i.n()-1,i.j()-i.N()+3),t=new Date(e.getFullYear(),0,4);return a(1+Math.round((e-t)/864e5/7),2)},F:function(){return s[6+i.n()]},m:function(){return a(i.n(),2)},M:function(){return i.F().slice(0,3)},n:function(){return r.getMonth()+1},t:function(){return(new Date(i.Y(),i.n(),0)).getDate()},L:function(){var e=i.Y();return e%4===0&e%100!==0|e%400===0},o:function(){var e=i.n(),t=i.W(),n=i.Y();return n+(e===12&&t<9?1:e===1&&t>9?-1:0)},Y:function(){return r.getFullYear()},y:function(){return i.Y().toString().slice(-2)},a:function(){return r.getHours()>11?"pm":"am"},A:function(){return i.a().toUpperCase()},B:function(){var e=r.getUTCHours()*3600,t=r.getUTCMinutes()*60,n=r.getUTCSeconds();return a(Math.floor((e+t+n+3600)/86.4)%1e3,3)},g:function(){return i.G()%12||12},G:function(){return r.getHours()},h:function(){return a(i.g(),2)},H:function(){return a(i.G(),2)},i:function(){return a(r.getMinutes(),2)},s:function(){return a(r.getSeconds(),2)},u:function(){return a(r.getMilliseconds()*1e3,6)},e:function(){throw"Not supported (see source code of date() for timezone on how to add support)"},I:function(){var e=new Date(i.Y(),0),t=Date.UTC(i.Y(),0),n=new Date(i.Y(),6),r=Date.UTC(i.Y(),6);return e-t!==n-r?1:0},O:function(){var e=r.getTimezoneOffset(),t=Math.abs(e);return(e>0?"-":"+")+a(Math.floor(t/60)*100+t%60,4)},P:function(){var e=i.O();return e.substr(0,3)+":"+e.substr(3,2)},T:function(){return"UTC"},Z:function(){return-r.getTimezoneOffset()*60},c:function(){return"Y-m-d\\TH:i:sP".replace(o,u)},r:function(){return"D, d M Y H:i:s O".replace(o,u)},U:function(){return r/1e3|0}};this.date=function(e,t){n=this;r=t===undefined?new Date:t instanceof Date?new Date(t):new Date(t*1e3);return e.replace(o,u)};return this.date(e,t)}
Chrome notifications test - Script Codes
Chrome notifications test - Script Codes
Home Page Home
Developer Gabriel
Username gab
Uploaded July 18, 2022
Rating 3
Size 3,589 Kb
Views 22,264
Do you need developer help for Chrome notifications test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gabriel (gab) Script Codes
Name
Vcard dev
Font awesome Hamburger-Menu-Toggle
Animated Trash Icon pure CSS
Inline editing with jquery
Loggy.js - CSS formatted JS console logs
Picture overlay
A Pen by Gabriel
LocalStorage Test
HINT.css - just a little test
Image rendering
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!