Showing posts with label java script. Show all posts
Showing posts with label java script. Show all posts

Thursday, July 20, 2017

15

Desktop notification in browser using JavaScript

, ,
In most of the sites have today their own desktop notification system to connect user in a large scale. So how to create a desktop notification for your site. Its very simple to generate a new notification using JavaScript, you have to write hardly 2-3 lines of code. Lets create one to generate desktop notification.

To create a new notification for user you have to follow three steps.
  1. Is the browser supports the notification feature. If not show an appropriate message.
  2. Ask user to allow the notification feature to show.
  3. Create a new notification and a click event to fire.
First lets start with whether the browser is supportable to show notification. For this we will use JavaScript Notification object to do all the operation.
 
if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.');
    return;
}

 And when the user has opened the site prompt user with an box, saying user to allow the site to show notification. For this use follow code block.

document.addEventListener('DOMContentLoaded', function () {
    if (Notification.permission !== "granted")
        Notification.requestPermission();
});

 Now create a button in the body & by clicking on that button a notification will be shown.

<button onclick="notifyMe()">
    Notify me!
</button>

Now in the script section add the Notify() method and write the following piece of code.

function notifyMe() {
    if (!Notification) {
        alert('Desktop notifications not available in your browser. Try Chromium.');
        return;
    }
 
    if (Notification.permission !== "granted")
        Notification.requestPermission();
    else {
        var notification = new Notification('Notification title', {
            icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
            body: "Here is your notification!",
        });
 
        notification.onclick = function () {
            window.open("http://asp-arka.blogspot.in/");
        };
    }
}

Here are the full code.

<html>
<button onclick="notifyMe()">
    Notify me!
</button>
<script>
    // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (Notification.permission !== "granted")
            Notification.requestPermission();
    });
 
    function notifyMe() {
        if (!Notification) {
            alert('Desktop notifications not available in your browser.');
            return;
        }
 
        if (Notification.permission !== "granted")
            Notification.requestPermission();
        else {
            var notification = new Notification('Notification title', {
                icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
                body: "Here is your notification!",
            });
 
            notification.onclick = function () {
                window.open("http://asp-arka.blogspot.in/");
            };
        }
    }
</script>
</html>

Host the file in any server like IIS or Apache to run it. Direct running the file in browser won't work out. Click on the Notify button to get the notification. Change the text and image according to your requirement. 

Tuesday, April 11, 2017

14

Installing TypeScript in Visual Studio

, ,
In this first tutorial of TypeScript we will get to know how to install TypeScript in Visual Studio and use it in the same. Starting from the scratch Microsoft provides different extension for TypeScript for different versions of Visual Studio. So I have Visual Studio installed in my PC. So, I will go with VS 13 but for later versions it is almost same to install the TypeScript.


1. To download TypeScritpt for Visual Studio follow the below links
 Download the application and install it.


2. After installing the patch open Visual Studio and create a new web project. Right click on the solution and you can see there is a option in the menu to add TypeScript file.









3. Add the TypeScript file with extension .ts. At the time of adding this file if your project doesn't contain the TypeScript compiler DLL then it will prompt you and will redirect you to Nuget Package Manager to install that.




4. Install the Microsoft.TypeScript.Compiler using Nuget Package Manager or you can download it using Package Manager console.




PM> install-Package Microsoft.TypeScript.Compiler


5. Your TypeScript is ready for coding, Write a few lines of code and save it. after saving you will see a JavaScript file of the same name will be generated in the same domain.




Click on the Show All Files button to show the files that are not included in the project. Within that we will find the JavaScript file of the same name of TypeScript file.











Tuesday, February 14, 2017

2

NOSCRIPT tag in HTML

, ,
This <noscript> tag defines the enable of javaScript in your browser. To state whether JavaScript is enabled or not in your browser we can use this tag. This works fully independently, means no other JavaScript or JQuery library are not needed to use this facility.


First create a HTML page with JavaScript functionality and a noscript tag.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>NoScript Example</title>
</head>
<body>
    <noscript>
        Javascript is either disabled or not supported in your browser.
        Please enable it or use a Javascript enabled browser.
    </noscript>
    <div>
        This is a HTML page.
    </div>
    <script>
        alert('JavaScript is working!');
    </script>
</body>
</html>


Now run the HTML page in browser and HTML content will display followed by a pop up showing "JavaScript is working".


Notice the text within noscript is not showing in the browser. Now disable the JavaScript in browser.
For Chrome go to Advance Settings->Privacy->Content Settings->JavaScript and select "Do not allow any site to run JavaScript". Hit OK and refresh the page.




Now you can see the text within nosript tag and notice no popup will be there as you disabled the JavaScript.


For Mozilla visit this link, and for Internet Explorer visit this link


Browser Dependency:
This HTML tag supports all the front line browsers like,
  • Chrome
  • Android
  • Firefox
  • Firefox Mobile
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari
  • Safari Mobile









Sunday, April 17, 2016

1

How to prevent F12 in browser

, ,
Introduction:

Opening the console log of browser and change element value of a web page is like a headache for the developer. To prevent this situation here is the remedy.

Description:

So how to stop this kind of situation, you could get a message while user is opening the console log and take necessary step or you could prevent user from opening that. We will discuss both the situation in this article one by one.

Getting noticed while opening the console of the browser:

Create a normal HTML page and and add a div to show the status of the development tool box. And write down the code.



<body>
    status: <div id="status"></div>
</body>
 
After that write down the code within the script tag under body section.



<script>
    var checkStatus;

    var element = new Image();
    element.__defineGetter__('id', function () {
        checkStatus = 'on';
    });

    setInterval(function () {
        checkStatus = 'off';
        console.log(element);
        console.clear();
        document.querySelector('#status').innerHTML = checkStatus;
    }, 1000)
</script>


 Output:



Prevent Clicking F12 and Mouse Right Click:

This trick is not like showing status. By showing status you can do all your customization in your code but here in this example of coding user will not be able to click F12 and mouse right click. Lets see how.

Before starting add JQuery into your page. To add it add the bellow script to the top of all the JQuery code.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 
After that within a script tag write down the  bellow code.



<script>
    $(document).keydown(function (event) {
        if (event.keyCode == 123) {
            return false;
        }
        else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
            return false;
        }
    });

    $(document).on("contextmenu", function (e) {
        e.preventDefault();
    });
</script>


As you can see we have used the Key code to detect the clicking of buttons and mouse. Here 123 stands for F12 and 73 for I key. To know more visit https://msdn.microsoft.com/en-us/library/aa243025(v=vs.60).aspx.

Run both the examples and enjoy.




 
Subscribe to: Posts (Atom)

Popular Posts

Pageviews