Tips & Tutorials – Javascript

Show/Hide HTML Elements With Animation (Simple Examples)

Welcome to a tutorial on how to show/hide HTML elements with animations. So you need to toggle the visibility of an element, but with bells-and-whistles? Here is an easy example to show/hide an HTML element with a fade effect: The HTML element – <div id=”fade”>TEXT</div> The CSS classes: #fade { transition: opacity 1s; } .hide …

Show/Hide HTML Elements With Animation (Simple Examples) Read More »

Unselectable Text In HTML & JS (Very Simple Examples)

Welcome to a quick tutorial on how to make unselectable text in HTML. So you have a not-so-top-secret website that you want to protect? Stop people from highlighting and copying the text? There are 2 common ways to create unselectable text: In CSS, simply add the user-select: none property. In Javascript, document.getElementById(“TARGET”).onselectstart = () => …

Unselectable Text In HTML & JS (Very Simple Examples) Read More »

6 Ways To Abort Javascript Execution (Simple Examples)

Welcome to a tutorial on how to abort Javascript execution. Need to manually stop a piece of script for some reason? Client-side Javascript does not have a native abort function, but there are various alternatives to abort Javascript execution: In a function, simply return false or undefined. Manually throw new Error(“ERROR”) in a function. Set …

6 Ways To Abort Javascript Execution (Simple Examples) Read More »

3 Ways To Do Javascript Injection (Explained For Beginners)

Welcome to a quick tutorial on how to do Javascript injection. You may have stumbled on this “injection thing” on the Internet, and heard that plenty of people have voiced security concerns over it. In simple terms, Javascript injection happens when a user enters a piece of Javascript code into the site. It can be …

3 Ways To Do Javascript Injection (Explained For Beginners) Read More »

Set & Get HTML Data Attributes In Javascript (Simple Examples)

Welcome to a quick tutorial on how to set and get HTML data attributes in Javascript. Want to insert your own custom property or data into HTML elements? To set data attributes in HTML, we define data-KEY=”VALUE” in the start tag. E.G. <div data-color=”red”> To set data attributes in Javascript, we set the dataset property. …

Set & Get HTML Data Attributes In Javascript (Simple Examples) Read More »