Tag archive for: HTML

How to detect keyboard presses made to the browser screen with JavaScript

When you are building a browser-based game, being able to track key presses is helpful.

For this purpose, you can register a JavaScript function that gets called when the browser detects a key is being pressed.

After the browser detects a key press, it will send information about the key to your function.

When your function is able to get the key that is pressed, it can then use this information to update the game state.

In this post, let’s look at how we can detect keyboard presses made to the browser screen with JavaScript.


How to capture the coordinates of your mouse as it moves along a path with jQuery

When you want to move an object on your web page, you can do so by setting the top and left property of that object to several screen coordinates along a path of travel. Although you can create those coordinates by hand, it is more efficient to capture those coordinates using your mouse.

Previously, I had discussed:

In this post, we extend those ideas to build a simple mechanism that captures the coordinates of your mouse as it moves alone a path.

Flexible CSS rule-sets to keep your images within their parent element

Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.

By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger.

For example, the following screenshot shows the image at spilling over its parent element:

Example of large image overspilling the parent container

One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:

Example of small image being stretched to fill parent container

This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element.

Implementing Google Custom Search as a WordPress page without using any plugin

Creating a search engine to search content across a polyglot website is not an easy task. In order to do that, you need to either:

  • take a search query and match it across data repositories from different application processes, or
  • have a process that will maintain an index of content from the different applications and search within that content.

Since Google had indexed most of the content in the Internet, Google Custom Search can be the easiest way for us to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

In case you need it, this is how you can implement Google Custom Search as a WordPress page without using any plugin.