Where can I practice my HTML, CSS, and JavaScript?

Where can I practice my HTML, CSS, and JavaScript

If you think you have enough knowledge of HTML, CSS, and JavaScript you can practice it through your computer.

So what to do?

How to incorporate all the things you learned into a single project?

Simple, create an example website/webpage.

First, create a topic.

What topic would it be? Well, don’t make it complicated since you are just starting out. Maybe just a simple website where users can navigate through pages, it’s all up to you.

  1. Create localhost on your computer. This is optional only but it will you expand your knowledge on how a website and hosting works.
  2. In creating your webpage, you must decide what elements will appear on those pages. Example, we are creating a four pages website. The pages are home, about us, contact, and blog.
  3. Picture out those pages, all of the pages are the same but except for its content. The point is to code the global sections first! The header where the logo and navigation lies, and the footer.
  4. The process is normally you create your HTML markup (webpage structure). Next, design it with CSS and the JS comes after that. This doesn’t mean you can’t touch your markup once you are done with styling (CSS). You are practicing, so you can tweak whatever you want.

Where can I practice online?

Try with an online code editor like jsfiddle or codepen. You can save or share your code created in there.

What is next after I learned HTML, CSS, and JavaScript?

You can study the different libraries like Jquery, a javascript library. Or start learning about Php language.

Learn more about CSS, HTML, Javascript in 22bulbjungle.

How to add WooCommerce product categories to the WordPress menu?

How to add WooCommerce product categories to the WordPress menu?

By default, WordPress doesn’t show you the product categories to be added to the menu. You might only see the options like -Posts- or the Posts categories.

You’ll wonder how can you can your custom product categories from Woocommerce dynamically without using the custom link in WordPress menus.

So, how to add product categories to the WordPress menu?

Here are the steps:

  • Go to Appearance > Menus
  • Look for the Screen Options at the upper right corner of the dashboard. Expand through clicking on it.
  • In the boxes, you’ll see a list of checkboxes. We want “Product Categories” to show so we make sure that is checked. It will automatically show it on the edit menu options below.

Also, read:  Woocommerce Change Text on Checkout Page | Quick Tutorial

  • Now you can add the categories you want on your menu. Make sure to check what menu you are editing. To do that, check your menu name and the display location.
  • If you’re not editing the right one, look for Select a menu to edit: option then choose your menu and click on select.
  • On the product categories at the left side, select the categories you want to add and then click on the Add to the menu button. These will appear to your selected menu.
  • From there you can rearrange your menu depending on your liking by drag and drop.
  • You can also make the menu as a dropdown by dragging the menu to the right and drop – this will look indented. The menu above will automatically be the parent menu which shows the indented menu as a drop-down
  • Once done, save your menu by clicking on Save Menu button.

How to Create a CSS Glow Effect on Hover

css glow effect

The CSS Glow Effect on hover can be done by using the box-shadow styles. We also have to add transition property to the element.

Step number 1. Let’s create an anchor tag element

  1. <a href="#">glow</a>

Step 2: Add background color and other styles

In our anchor tag, let’s add a background color and change default styles.

I’m going to remove the text-decoration. Add a padding of 15px into top and bottom and 25px for left and right side.

I also add values for fonts, just look into the code below:

  1. a{
  2. background-color: orange;
  3. text-decoration:none;
  4. padding: 15px 25px;
  5. font-family: sans-serif;
  6. font-size: 25px;
  7. color: #fff;
  8. border-radius:10px;
  9. display: inline-block;
  10. }

Read also:

Step 3: Add another selector for hover state

Create another anchor tag selector with :hover state. It should look like this:

  1. a:hover{
  2.  
  3. }

Step 4. Add the box-shadow styles.

Here is where the magic happens.

Let’s add the box-shadow styles.

We can manually create it on CSS or we can also use the CSS box-shadow generator.

Box-shadow in CSS is the same with text-shadow value parameters. You can view a tutorial on CSS shadow in this video.

In this tutorial, I’m going to use the box-shadow generator.

Get this cool CSS hover effects collection here.

Step 5. Set the Blur Radius.

css shadow generator

From there, you will have to set the Horizontal Length and Vertical Length into zero to ensure that the glow would be the same on both sides of the element.

It is important to have a higher blur radius. This would create the CSS glowing effect. I set this into 100.

Set the Shadow color. I will set the color the same background color with my element.

Leave the other options and copy the code you see on the right.

Step 6. Add the box-shadow styles

That’s it, add these styles to the :hover element.

  1. a:hover{
  2. -webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  3. -moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  4. box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  5. }

If you try to hover over our element you will see that our shadow has been applied but we don’t like to make it appear real quick.

We will add a delay into the :hover state with our element so it’ll appear as if it was glowing.

I’m going to add transition: .8s ease.

Notice after you add and hover into the anchor tag, the element shows the box-shadow slowly thanks to our transition property.

But it disappears really quick when we unhover?

Simple…

Just add another transition property with value into the anchor tag.

The final CSS code should look like this:

  1. a{
  2. background-color: orange;
  3. text-decoration:none;
  4. padding: 15px 25px;
  5. font-family: sans-serif;
  6. font-size: 25px;
  7. color: #fff;
  8. border-radius:10px;
  9. display: inline-block;
  10. transition: .8s ease
  11. }
  12. a:hover{
  13. -webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  14. -moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  15. box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
  16. transition: .8s ease;
  17. }

How to Fade an Image in Photoshop Easily

How to Fade an Image in Photoshop Easily

How to fade an image in Photoshop? Fading an image in Photoshop can be done in a couple of ways. First, using the gradient tool and the other is by eraser tool.

Let’s add the image into a single document. The photo image is the one we are going to fade out and the other element is a background color (It can also be an image) where it stays below the image layer.

Fade an image using the gradient tool

We can use the gradient tool by changing its gradient color. This is the perfect tool to get an even fading effect into any areas of the image.

Since we are going to create the fading effect into nondestructive technique, we are going to use the layer mask instead.

Step 1. Select the image layer. Resize, make it smaller or as desired.

Step 2. Add a layer mask by hitting the icon below the layer’s panel.

 

Layer Mask Icon

Using the mask, we can have the control over the mistake on erasing if ever it’s going to happen. Erasing it directly into the image layer will remove our chance of editing our image back from its original composition.

The mask just means we are using the foreground color black on our brush. The black color means to remove. If ever you have erased something just replace the black color into the white one (#ffffff) and brush it over to the image so parts will start to appear.

Read also:

Try to use your brush into the image and you will see how it works.

How Layer Mask Works

Step 4. Next, select the gradient tool.

For its colors, choose the black into a transparent gradient. This is important because we are using a layer mask.

Gradient Editor

Step 5. At the bottom edge of the image, you can start masking.

Click and drag up using the gradient tool by holding the shift key.

Fade an Image using layer mask

Make sure to select the layer mask thumbnail.

Layer Mask Thumbnail

How to fade an image in Photoshop using the eraser tool

This technique gives us more freedom on the fading effect.

Step 1. First, we should set our brush into a smooth brush.

Smooth brush so it will not show clear edges upon the fade effect.

Smooth Brush Tool

Step 3. Next, make sure the foreground color is set to black or #0000 color code.

Foreground Color

Step 2. Second, we lower our brush flow enough that we can see our desired output fade effect.

The flow option can be found in the top menu after you select the eraser tool.

Put your desired flow value, for this, I am going to use 40%.

Step 3. Use larger brush size so you will get even fading effect with the image

Step 4. Start brushing into the bottom of image areas or wherever you desire.

I have added some texts into the composition and this is what I came up to:

How to Fade an Image in Photoshop Easily
How to Fade an Image in Photoshop Easily

The pink panther image source: Pixabay

Woocommerce Change Text on Checkout Page | Quick Tutorial

Woocommerce Change Text on Checkout Page tutorial will cover only how to change the texts in the woocommerce checkout page using a function. Manually changing it on the wocoommerce core files is not advisable.

Someone asked me how do they remove the words “have read and” from the Woocommerce checkout page : “I have read and accept the terms & conditions“.

woocommerce change text on checkout page
Woocommerce Change Text on Checkout Page | Radiobox

The first step that was on my mind is using the translation function in wordpress and it should remove the 3 words by replacing the whole text statement.

I am going to change the texts using the Gettext  filter hook in WordPress. I copied the whole texts and created a function, this is the one below:

  1. function woo_checkout_texts( $changed_text, $text, $domain ) {
  2.  if ( $changed_text == 'I have read and accept the terms &amp;amp;amp; conditions' ){
  3.  $changed_text = 'I accept the terms &amp;amp;amp; conditions';
  4.  }
  5.  return $changed_text;
  6. }
  7. add_filter( 'gettext', 'woo_checkout_texts', 20, 3 );

But the when I checked the website’s checkout page, it doesn’t change. I forgot that the link was composed of an anchor tag. Therefore when you translate something you should also add the static markup that is between the text you are translating/changing.

So how?

I looked into the woocommerce plugin folder and find the file containing the texts in it that we can copy and modify into our functions.php file. Yes, we just copy and modify it into our functions.php file.

Modifying and saving plugin’s core file is not a good practice. In a plugin update these changes will get lost.

So to make it professional as possible, I’ve search files inside the woocommerce plugin with a word “checkout”. There, I found the terms.php file. I’ve open it on my editor and found this content.

woocommerce change text on checkout page
Woocommerce Change Text on Checkout Page | Terms

Now I’ve got the idea of how to change texts on the checkout page in woocommerce.

I’ve copied the text and pasted it on functions.php with my function. I’ve copied it again as a translated text by removing the words’ “have read and”.

This is final function below:

  1. function woo_checkout_texts( $changed_text, $text, $domain ) {
  2.  if ( $changed_text == 'I&amp;rsquo;ve read and accept the &lt;a href=&quot;%s&quot; target=&quot;_blank&quot;&gt;terms &amp;amp; conditions&lt;/a&gt;' ){
  3.  $changed_text = 'I accept the &lt;a href=&quot;%s&quot; target=&quot;_blank&quot;&gt;terms &amp;amp; conditions&lt;/a&gt;';
  4.  }
  5.  return $changed_text;
  6. }
  7. add_filter( 'gettext', 'woo_checkout_texts', 20, 3 );

I’ve checked the checkout page, done, now it is finally translated.

This is how you customize the checkout page texts in woocommerce.

CSS Hover Effects | Fade in Text with Background Source Code

Fade in Text with Background Hover

This video is going to show you how to create a CSS Fade in text with background Hover effect. An image is covered with a solid color fades in with a text when a user hovers it.

The HTML

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;
  6.  
  7.  
  8. &lt;div class=&quot;wrapper&quot;&gt;
  9.  &lt;img src=&quot;animal.jpeg&quot;&gt;
  10.  
  11.  
  12. &lt;div class=&quot;overlay&quot;&gt;
  13.  
  14.  
  15. &lt;div class=&quot;content&quot;&gt;Fade In&lt;span&gt;Fade In text&lt;/span&gt;&lt;/div&gt;
  16.  
  17.  
  18.  &lt;/div&gt;
  19.  
  20.  
  21. &lt;/div&gt;
  22.  
  23.  
  24.  
  25. &lt;/body&gt;
  26. &lt;/html&gt;

The CSS

  1. .wrapper {
  2. font-family: sans-serif;
  3. width: 80%;
  4. margin: 0 auto;
  5. position: relative;
  6. }
  7.  
  8. img {
  9. display: block;
  10. width: 100%;
  11. height: auto;
  12. }
  13. .content {
  14. position: absolute;
  15. top: 45%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. -ms-transform: translate(-50%, -50%);
  19. color: #fff;
  20. text-transform: uppercase;
  21. font-size: 60px;
  22. }
  23.  
  24. .content span{
  25. font-size: 24px;
  26. display: block
  27. }
  28.  
  29. .overlay {
  30. position: absolute;
  31. top: 0;
  32. bottom: 0;
  33. left: 0;
  34. right: 0;
  35. height: 100%;
  36. width: 100%;
  37. opacity: 0;
  38. transition: .5s ease;
  39. background-color: #ff771d;
  40. }
  41.  
  42. .wrapper:hover .overlay {
  43. opacity: 1;
  44. }

Fade In Background Opacity(transparent) Hover

The HTML

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;CSS hover effects: Fade In Background opacity&lt;/title&gt;
  5. &lt;/head&gt;
  6.  
  7. &lt;body&gt;
  8.  
  9.  
  10.  
  11.  
  12. &lt;div class=&quot;wrapper&quot;&gt;
  13. &lt;img src=&quot;highland.jpeg&quot;&gt;
  14.  
  15.  
  16.  
  17. &lt;div class=&quot;overlay&quot;&gt;
  18.  
  19.  
  20. &lt;div class=&quot;content&quot;&gt;
  21. the title &lt;a&gt;read more&lt;/a&gt;
  22. &lt;/div&gt;
  23.  
  24.  
  25.  
  26. &lt;/div&gt;
  27.  
  28.  
  29.  
  30. &lt;/div&gt;
  31.  
  32.  
  33.  
  34.  
  35. &lt;/body&gt;
  36. &lt;/html&gt;

The CSS

  1. .wrapper{
  2. font-family:sans-serif;
  3. width: 80%;
  4. margin: 0 auto;
  5. position:relative;
  6. }
  7. img{
  8. opacity: 1;
  9. display: block;
  10. width:100%;
  11. height: auto;
  12. transition: .5s ease;
  13. }
  14. .content{
  15. position: absolute;
  16. top:45%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. -ms-transform: translate(-50%, -50%);
  20. text-transform: uppercase;
  21. font-size: 60px;
  22. color:#fff;
  23. white-space: nowrap;
  24. overflow: hidden
  25. }
  26. .content a{
  27. font-size: 24px;
  28. display: block;
  29. background-color: #ff771d;
  30. text-align: center;
  31. padding: 10px;
  32. cursor: pointer
  33. }
  34. .overlay{
  35. opacity: 0
  36. }
  37. .wrapper:hover img{
  38. opacity: .5
  39. }
  40. .wrapper:hover .overlay{
  41. opacity: 1
  42. }

How to Center an Image in CSS Very Easily

center image in css

There are few pointers to center an image in CSS.

  • First, make sure that the parent element of the image has its width set.
  • Second, the image should not be wider than its parent element, that’s pretty obvious.

See also:  How To Center A Div Inside A Div Easily

Center and Image in CSS horizontally

Images are the same as divs, you can use the text-align into its parent element but not the margin: 0 auto alone on the image.
To center image in div, set a width of the div then add margin:0 auto and display: block into the image in CSS.

The HTML code:

  1. <div class="wrapper">
  2.  <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg"></div>

The CSS styles:

  1. .wrapper{
  2. width: 100%;
  3. height: 300px;
  4. border: 2px solid #93c504;
  5. }
  6. img{
  7. max-width: 250px;
  8. display: block;
  9. margin: 0 auto
  10. }

This will result into an image centered horizontally:

center-image_margin_0_auto

 

See the jsfiddle:

Make sure you have a smaller image width than the parent element.

The margin’s first value 0 was for the top and bottom margin. While the second is for left and right margin.

You can also set margin-left: auto and margin-right: auto on the image in CSS.

Center an Image in CSS horizontally and vertically

We will going to use the span element to guide our image  making it center. Setting an image with margin and text-alignment could not make our image center align.

The HTML code:

  1. <div class="wrapper">
  2.  <span class="for-image"></span>
  3.  <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg"></div>

The CSS styles:

  1. .wrapper {
  2. width: 100%;
  3. height: 300px;
  4. border: 2px solid #93c504;
  5. text-align: center
  6. }
  7.  
  8. .for-image {
  9. height: 100%;
  10. display: inline-block;
  11. vertical-align: middle
  12. }
  13.  
  14. img {
  15. max-width: 200px;
  16. height: auto;
  17. background: #3A6F9A;
  18. vertical-align: middle
  19. }

center-image_margin_auto

Responsive design images

Creating a responsive design image is very useful for mobile devices.

Responsive image will automatically scale down and adjust to the width of the device.

To create a responsive design image, you just set a max-width: 100%; and height: auto; into the images.

The max-width: 100%; means the image’s width will cover all its parent’s width. You can also set a natural image width(full resolution width of the image) to the max-width property so it will not be basing upon its parent element’s width.

The height: auto; makes the image height and width proportional. As a result, it would not stretch.

What happens if you will not set a height: auto; is, the image’s original height will still be the same while the width is scaling according to the device’s width, so it will be non-proportional.

How to Type on a Path in Photoshop Using Shapes and Pen tool

textOnapathThumbnail

The regular left to right horizontal text direction was often used by any design graphic you have seen. Creating a custom path to the type to follow makes the texts come into life and suggests creativity. So, How to type on a path in Photoshop?

Watch the video below or continue reading.

See also:

Make a GIF from a Video Just Like in Tumblr

  • Using the Pen tool
  • Basic Shape tool

We can use the pen tool to create freedom path so we can customize whatever we want it to look. Also using the basic shape tool.

How to Type on a Path in Photoshop Using the Pen tool?

Use the pen tool to create a freedom path. It creates a straight line segment after left clicking. Use the pen tool by left clicking, it will create an anchor point which a line segment is created.

 

In this tutorial, I will create a simple custom curved path for the type to follow.

This is the final design that we will implement.

 

First, I will create a red mark so you can see what we will be creating. The red line mark indicates the path we are going to create.

mark_text_on_a_path

Next, we are going to use the pen tool to implement our line mark.
Since I am going to type on a path, I need to change the pen tool into path mode. In this mode, we cannot get the option to add fill or stroke. You can find the option in the top menu (see image below).





After we change the pen tool mode, I am going to create three points on our image. I did this to we can create a precise or at least balance within the curve path.

pen_tool_pont_text_on_a_path_kid

Notice some anchors of the path is on point, I’m going to make it curve so our text will not overlap. Using the pen tool, hover over the center point. Hold the ALT/Option key in your keyboard and you will see a triangle cursor symbol(see image below). Click and drag it to the right while holding the shift key until you find the right curved.

pen_tool_alt_point_click_and_drag_text_on_a_path_kid

Finally, by selecting the horizontal type tool I am going to hover over to the path and you will see a type on a path symbol(See image below).

 

Type on a path symbol

 

Click on it and start adding your texts.

After adding my texts, click on the check mark at the top to commit your current edit. My text was not so appealing so I will change the size, font and color.

This is what I came up with:

size_color_type_onPath

What if we want to change a position of the text starting point?

Well,  I can by using the path selection tool.

 

Using the path selection tool

 

  • Change the length path segment
  • Flip text on path photoshop

Change the length path segment

When you hover over the path, you will see a type symbol cursor with a triangle flag (See image below).

cursorpath_selection_facing_left cursorpath_selection_facing_rightl

In your freedom path, if the cursor flag faces to the left it means that it will control the end point of the segment. If it is facing to right, it will control the starting point of your text types.

Flip text on path photoshop

If you want your text to face downwards, use the path selection tool then hover over your path until you’ll see a path selection cursor having a flag symbol and click and hold down. As a result, you will see a flip text on path.

Flip_type_text_on_a_path_kid

In addition, if you are unable to see the path when selecting the path selection tool, just click on the different layer and click back again to the text layer.

This is the final image I created:

How to Type on a Path in Photoshop Using the Basic shape tool?

 

  • Rectangle tool
  • Rounded rectangle tool
  • Ellipse Tool
  • Polygon tool
  • Line tool
  • Custom shape tool

 

I am going to create a path using the ellipse tool. In the same way, make the tool mode into shape.

text on a shape path

I will be going to create the path surrounding the orange object in our image.
First, holding the shift key( to create a perfect circle ), click the center of our object and drag to expand the size of the shape.

Second, select the type tool and hover over the path you just created then click and start typing. Use the path selection tool to adjust the position.

It is pretty much the same process the only thing different is the shape of the path that is going to create.

Style your text the same as the regular horizontal align.

Here are some few examples I made:

baskets_example text on a path

cat_example text on a path
Image Credit : https://pixabay.com

In conclusion, you can create text on a path using freedom pen tool or using the basic shapes tool. The pen tool makes it more freely to create custom path while the shape tool might be useful if you want to create a perfect shape path for your text types.

Background Image Color Overlay | Create a Filter Look with CSS

css_color_filter_overlay

To add a color overlay to the background image, I am going to use CSS.

First of all, adding a CSS background image color overlay is the most dynamic way of creating tinted web page images. It became popular to many websites which appear in homepage as banners.

Example:

css-background-image-color-overlay2

The great thing about adding background image color overlay is that you can just change any image (normal image without filter) dynamically and publish it on your website with filter, thanks to CSS.

So, how to do it?

Watch the video or continue reading.

See also:

Add a background property

(Yes not a background-image or background-color).

Within the background property, I add a linear gradient and a URL to the image.  I am using a linear-gradient background with transparency.

  1. background:
  2.    linear-gradient(
  3.    rgba (255, 255, 255, 0.5),
  4.    rgba (255, 255, 255, 0.5)
  5.    ),
  6.    url(image.jpg)

In one CSS property, I need to set two backgrounds. The first one is the linear-gradient color and the second is the actual image.

Because I need to add transparency for the background color opacity, I will define RGBA inside the linear gradient.

Example:

  1. linear-gradient(
  2.    rgba (255, 255, 255, 0.5),
  3.    rgba (255, 255, 255, 0.5)
  4.    );

The RGBA is an RGB color with an alpha channel. The alpha channel must be set between 0.0 to 1.0. It is the last parameter of the RGBA. The RGBA parameters are composed of red, green, blue, alpha.

Example: rgba (255, 255, 255, 0.5)

How to choose and get a color?

To make it easier for you to choose the color, create your web page document copying the code from here. Open it in the browser.

Developer tool in your browser is your friend. Right-click and inspect your web page (or CTRL+SHIFT+I).

On your div with the background style, click on the colored square or circle and a color picker will appear. Choose your color by dragging into the palette.

color-box-22bulbjungle-css-background-image-color-overlay2

Change the opacity of the color you’ve picked, that is important so we can mimic the overlay or color filter effect in photoshop with our background image.

You can also use CSS Gradient Generator from sites like colorzillacssmatic, or cssportal.

See the jsfiddle:

Use the background-blend-mode

Are you familiar with Photoshop blend modes?

Well, I can also blend our background but with CSS.

I can also use the linear-gradient without the transparency and add a background-blend-mode: soft-light;

The CSS code should look like this:

  1. .block {
  2.  height: 350px;
  3.  background: linear-gradient(yellow, yellow), url(image.jpg);
  4.  background-size: cover;
  5.  text-align: center;
  6.  background-blend-mode: soft-light;
  7. }

As a result, the image and the color blended together in soft-light. Unlike the other way in which I can adjust the opacity.

You can experiment by adding different value into the background-blend-mode property.

background-blend-mode values include:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • saturation
  • color
  • luminosity

CSS Background image color overlay in hover

Add a background image color overlay if the user hovers over the image.

In conclusion, adding the color filter effect can be done in two ways. The first is through a background property with the linear gradient and image url.

The other is to add a solid color within the parameter of linear-gradient and add the background-blend-mode property.

Creating a Hero Image with color filter overlay on hover

Hero image is a large website banner image. It is composed of the background image, texts and even a button.

Learn how to create your hero image with CSS background image color overlay by watching the video below:

You can use either of the two techniques to add the effect into your CSS background image.

Disable Right Click with Javascript

Disable right click with javascript

Disable right click to prevent end users the capabilities to inspect, print, or copy.

I do not recommend adding this into your web-pages but here is the tutorial.

Disable right click with javascript

Disable right click and content copying

Preventing the user from copying your content may also be one of the reason why you want to disable the right click function. It may be useless because someone can manage to use the shortcut key Ctrl+C to copy. Using CSS is a better way to prevent the user from copying.

Try to look at the code below and right-click on the result tab.

Find out how to disable a user from copying your texts using CSS:

Just make sure you also disable the right-click function so a user cannot inspect through right-clicking.

Disable right click on images

The major reason to disable the right-click is to prevent the users from inspecting your code. Preventing them also disable them to download images.

Try to look at the code below and see how the JavaScript function is used to disable the right click into images.

Did you know, a user can also get your images through downloading the whole web document?

The document will have the webpage’s HTML, CSS, JS, images and other files that can be viewed without an internet connection. Images inside the downloaded document were the actual image from a live web page.

Another thing, a user can also use the page info feature in firefox browser to find the image by going to the media tab and clicking on the links to preview the image.


The only problem is, a user can disable the JavaScript in the browser. Hence, the script added would not run.

A user can disable JavaScript in Chrome by going to this path: chrome://settings/content .

chrome_content_settings

Under JavaScript, there are two radio options allow and disallow JavaScript.

In Mozilla Firefox, the user can disable JavaScript by going to this path: about:config within the browser.

firefox_about_config

Next, click the button saying “I accept the risk”. Search for JavaScript, then right-click and click on toggle.

This will turn JavaScript into false indicates that it is now disabled.

I would not recommend disabling right-click function but if for some reasons / for debugging purposes etc or even a first steps to protect your own copyright images.