Here and we can go ahead and select this text from here we can also right click over here and we can copy this and paste it somewhere so we have the option of right clicking and also selecting the.
Text in this website so in this video i'll show you how to disable both those options for your website now disabling these options will not necessarily mean that no one will be able to copy your.
Website data there is always a way in which someone can copy the content of a website anything that's displayed on a browser can be copied so disabling these options will not guarantee that your.
Website content will not be copied but it will obviously make it difficult for someone to copy the content all right now first of all i'll write the code in the code editor and we will test it out.
And then we will add the code to a blogger website so let's get started right here i have created this folder called disable right click and i just.
Javascript file i'll just name it main.js let's start with the index.html file and in vs code you have a shortcut where you can just press exclamation and press tab.
And you'll have this basic html file code and here i'll just link the css file so i'll just type link and press tab and here in the edit i'll just type style.css and in the body i'll just type.
Script colon src and press tab and here i'll just type main.js all right let's create a simple design for our website so i'll just create a division of the class of container.
And in that we will have a heading and i'll just type heading over here and here we will have some dummy text so i'll just type p and here i'll just type lorem 50 and this will give us 50 words.
Of random text i'll just copy this paragraph and paste it once more right now let's create a notification so whenever someone right clicks on our.
Website we want to display a message Wesdigital
That right click is disabled for this website so let's create a division of the class of toast notification and here i'll just type right click is.Disabled for this website all right that's it with the html now let's open this in a browser so i have this extension called live server installed in vs code so you can just go over here.
To extensions and search for live server and install that once you do that you can just right click over here in the html and click on open with live server.
And here we can see our website is being displayed over here now let's go back and let's go to the style.css file and let me just add some quick styles over here so i'll just type container.
And we will set the font family to roboto and i'll just set the max width to 700 pixels and we'll bring it to the center by.
Typing margin zero for top and bottom and auto for left and right and here we can see we have the content now let's style the heading such as type container h1.
And we'll set the font family to roboto black and we'll set the font size to 80 pixels and we'll also set the text transform to upper case.
And let's remove the margin bottom so i'll just type margin bottom and i'll just set it to zero right now let's style the paragraph so let's go back and let's type container p.
And i'll just set the font size to 18 pixels and we'll set the line height to 2 and the color of the text to dark gray.
Right now let's disable the
Functionality of selecting the text so right now we can select the text over here so for that let's go back and let's type.Body to select all the content inside the body and here you have to type user select and set it to none right now let's go back and now if we drag over here we can see that the text.
Is not being selected all right now the next thing we will do is we will style this touch notification over here so let's go back and let's type toast.
Notification and we'll give it a background color of black and the color of the text to white and we'll set a padding of 12 pixels top and bottom and 24 pixels left and right.
And we'll also set the border radius to 8 pixels and the font size to 16 pixels and we'll set the position to fixed and we'll set the bottom position to 50.
Pixels and now here we can see we have the torch notification displayed over here we'll also bring it to the center so for that let's type left and we'll.
Just set it to 50 and now it starts from the 50 mark so we have to move this element 50 of itself so for that you will type transform.
Translate x and set it to negative 50 and now we can see that it is exactly in the center and now what we're going to do is we're going to add a class called active to this dos notification when we.
Want it to be displayed and when we want it to be hidden we will remove the class active so let's go back and by default we will set the bottom position to 10.
And we'll also add an opacity of 0 and here we will type toast notification dot active and here we'll set the bottom position back to 50 pixels and we'll also set the.
Opacity to 1 and here we'll also add transition of all to 400 milliseconds is so that we will have smooth animation and now we can see that the touch.
Notification is not being displayed but if you go back to our html and here if we add a class of active we can see that it is being displayed over here so we will add and remove this.
Class active using javascript all right now let's go to our javascript file and let's do that first of all let's reference this touch notification from here.
So let's type const toast notification equals document.queryselector and here i'll just type dot toast notification and now we need to add an.
Event listener to the window so that we cannot right click over here so let's go back and let's type window dot add event listener and here we need to type context menu.
So this is the event that will be fired when we right click on the web page now for the next argument i'll just create an arrow function and the first thing we need to do is we need to.
Prevent the default behavior of right clicking so for that you have to access the event over here so i'll just type e for event you can name this variable anything you want and here you have to.
Type e dot prevent default now if we right click over here nothing happens because we have prevented the default behavior from happening over here now.
The next thing we need to do is we need to display the notification when we right click over here so for that we have to add the class active to the touch notification so i'll just create a.
Function for that so just type const show notification and here i'll just type toast notification list.
And i'll just type active over here and i'll just call the function over here so i'll just tab show notification and now let's go back to our website and let's right click over here.
And here we can see that the toast notification is displayed over here now we want to hide this storage notification after some time so let's go back and we will create a timer.
So i'll just type set timeout and here i'll just type 2000 for two seconds and here i'll just have toast notification.
Dot class list dot remove and here i'll just type active so what we are doing over here is that we are adding the class active to the touch notification over here and then we.
Are setting a timer and after two seconds we are removing the active class from the touch notification so now let's go back and let's see whether it works all right so let's right click over here.
And we can see that the torch notification was displayed and it goes back so in this way you can disable the option of selecting the text and also.
Right clicking on the webpage now the last thing we will do is we will add this to our blogger website right here is our blogger website and we have opened up this post over here right now.
We can select this text over here and we can also right click over here now let's go to the dashboard of our website and let's go to theme and here you can see i'm using this.
Theme called notable light now you have to click on this option over here and click on edit html and you need to add the html the css and the javascript.