Tag archive for: HTML

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.

How to create a custom page template in WordPress

We use pages in WordPress to hold content of our website that are not specifically time-dependent.

Examples of such content at Techcoil include the about page, disclaimer page and Raspbian Stretch Lite project ideas.

When you want to show content in different page layouts, you can create different customized page templates to show content in different ways.

In case you need a reference, this post describes how to create a custom page template in WordPress.