HTML5 Desktop Notification
I have seen desktop notification on Gmail.When my friends send me any message on Gmail Chat i got a desktop notification.We have only been able to show messages inside the browser using HTML and Javascript But with HTML5 and webkit enabled browsers we can do quite a lot of cool stuff outside the browser.
Check
Check that browser supports Desktop Notification or not.if (window.web kit Notifications){
}
Permission
If your browser supports Desktop Notifcation,then userpermission needed to show the Notification.Ask the user to allow the notification.
//Definition of callback function
function requestingPopupPermission(callback){
window.webkitNotifications.requestPermission(callback);
}
Name the Function
Then we can give the name of the function to be calledonce permission is granted. In this case i am going to do it recursively.
//Definition of callback function
function showPopup(){
if(window.webkitNotifications.checkPermission() > 0){
requestingPopupPermission(showPopup);
}
else{
//Show Popup
}
}
Create Notification
3 parameters are requires to create Notification.- thumb: url of the image to be shown in the notification
- title: title of the notification
- body: text to show in the notification
var thumb = 'http://wall.shubhamtipstricks.com/
timthumb.php?src=http://wall.shubhamtipstricks
.com/img/stt-lab.png&w=60&h=60';
var title = 'Test Notification';
var body = 'Welcome Here.This is the body of the Notification. ';
var popup = window.webkitNotifications.
createNotification(thumb, title, body);
Show/Cancel the Notification
After Creating the Notification Show/Hide it.//Show the popup
popup.show();
//set timeout to hide it
setTimeout(function(){
popup.cancel();
}, '10000');
Full HTML And Javascript Code
<HTML> <HEAD> <TITLE>Desktop Notification using
Javascript and Html || Shubham Tips Tricks Demos</TITLE>
</HEAD>
<BODY>
<a href="#" class="btn" onclick="showPopup();">Notify </a>
<script>
if (window.webkitNotifications){
function requestingPopupPermission(callback){
window.webkitNotifications.requestPermission(callback);
}
function showPopup(){
if(window.webkitNotifications.checkPermission() > 0){
requestingPopupPermission(showPopup);
}
else{
var thumb = 'http://wall.shubhamtipstricks.com/
timthumb.php?src=http://wall.shubhamtipstricks.
com/img/stt-lab.png&w=60&h=60'; var title = 'Test Notification'; var body = 'Welcome Here.This is the
body of the Notification.This is the
body of the Notification.This is the
body of the Notification.This is the body of the
Notification.This is the body of the Notification.
This is the body of the Notification.This is the
body of the Notification. ';
var popup = window.webkitNotifications.
createNotification(thumb, title, body);
//Show the popup
popup.show();
//set timeout to hide it
setTimeout(function(){
popup.cancel();
}, '10000');
}
}
</script>
</BODY>
</HTML>
How to use Youtube video as Web Page Background ?
You are probably using static image as background for your webpages but this will be a little more rich experience for you if you could consider placing moving images, like an animation or a self-playing video clip, in the background of your web pages.
I am using YouTube’s IFRAME embed code to embed that video so that it occupies the entire page.Both width and height are set to 100% and the z-index is set to negative so the YouTube video layer will appear several levels below the main content.
To get started,find (Ctrl+F) <body> tag and simply paste the code below the tag. You can replace VIDEO ID with YouTube video ID that you would like to use in the background.<div style=”position: fixed; z-index: -99; width: 100%; height: 100%”>
<iframe frameborder=”0″ height=”100%” width=”100%”
src=”https://www.youtube.com/embed/VIDEO ID?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1″>
</iframe>
</div>
//Replace the VIDEO ID to actual youtube video id like WGByijP0Leo
HTML 5 Application Cache
Are you using  HTML5,then take a look at post to know that how to develop a web offline project using HTML5 Application cache. HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file.
There are many advantages of HTML5 Application cache.Such of them are:-
- Users can use the application when they are offline
- Page loads faster
- The browser will only download updated/changed resources from the server
Example of HTML5 Cache Manifest
<!DOCTYPE HTML> <html manifest="stt.appcache"> <body> The content of the document...... </body> </html>
 Basic Codes of Application Cache
To enable application cache, include the manifest attribute in the document’s <html> tag:<!DOCTYPE HTML> <html manifest="<filename>.appcache"> ... </html>
Manifest File Must Contains
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).- CACHE MANIFESTÂ - Files listed under this header will be cached after they are downloaded for the first time
- NETWORKÂ - Files listed under this header require a connection to the server, and will never be cached
- FALLBACKÂ - Files listed under this header specifies fallback pages if a page is inaccessible
CACHE MANIFEST /theme.css /logo.gif /main.js
The secong line, NETWORK
NETWORK: login.php
An asterisk can be used to indicate that all other resources/files require an internet connection:
NETWORK: *
The third line,FALLBACK
FALLBACK: offline/offline.html
Basic codes of Cache Manifest File
CACHE MANIFEST /Shubham-Tips-Tricks.png NETWORK: login.php FALLBACK: offline/offline.html
0 comments:
Post a Comment