Louis Lazaris7 articles /

Louis Lazaris is a writer, speaker, author, and front-end web developer who's been involved in the web development industry in various forms since 2000. He blogs about code at Impressive Webs and curates the newsletters Web Tools Weekly and Tech Productivity.

Disable Right-Click (Context Menu)

There are some instances where you might want to disable right-click on a web page. For example, if you want to prevent easy downloading of video or images. Or when you want to replace the default browser right-click menu with a custom right-click menu. This is easy to do using JavaScript: In this instance, the only thing the code is doing is preventing the right-click

(read more)

Detect What Key Was Pressed by the User

In some apps and games it may be necessary to enable certain functionality when the user presses a certain key or key combination on their keyboard. You can do this in a cross-browser fashion using the following JavaScript: Here’s a brief breakdown of the code: The doWhichKey() function includes some code for older browsers like old IE The function returns a character code for the

(read more)

Make a “Download This as HTML” Link

Sometimes on a web page, you want to give the user the ability to download a particular snippet of code or text in a common format like HTML. For example, you could have a text field that allows the user to enter their own HTML: The user can enter any text they want into that <textarea> element, which can then be downloaded using the following

(read more)

Smooth Animated Scrolling with JavaScript

In the past, many plugins (e.g. jQuery) have enabled the ability to cause a page to scroll down in a smooth animated fashion, rather than the sudden jarring fashion that occurs by default. This technique is often used for same-page (local) links that jump to specific sections of longform content. The following script and demo shows how you can do smooth animated in-page scrolling with

(read more)

A Textarea Element That Autoresizes

Due to the fact that the HTML <textarea> element does not automatically grow to fit its content, many developer look for plugins and scripts to enable this feature. This bit of JavaScript will cause any applicable <textarea> elements to resize automatically to fit the content typed or pasted into it. The code has the following features: Uses a hidden clone element (a <div>) that has

(read more)

Highlighted Footnotes like Wikipedia

You may have noticed on Wikipedia when you click a footnote, the footnote is highlighted to visually indicate which one you should be looking at. This can be done using CSS’s :target pseudo-class. In your main content, you might have a paragraph of text with a footnote where the HTML looks like this: Notice the ID attribute. This will be used in the footnote so

(read more)

Pure CSS Tooltips

Here is a solution for flexible, near-bulletproof pure CSS tooltips. The code uses HTML5 data-* attributes along with attribute selectors and some CSS positioning. Here is the HTML: Here is a live demo (use the range slider to adjust the font size, which confirms that the tooltip will resize automatically based on the font size): See the Pen Bulletproof CSS Tooltips by Louis Lazaris (@impressivewebs)

(read more)
Scroll to Top