Tag archive for: HTML

How to allow arbitrary Widget content to be added to sections of your WordPress theme

When you use WordPress to house your thoughts, you get the flexibility to update sections of your WordPress site through the WordPress dashboard.

For example, I can change the content within the sticky portion of my sidebar as and when I need to. Such content can be provided through the various WordPress Widgets that are available in my WordPress installation.

So how can we mark sections of our WordPress themes for displaying Widget content?

With this in mind, let us look at how we can allow arbitrary Widget content to be added to sections of our WordPress theme via the WordPress dashboard.

How to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles

You want a portion of your sidebar to stick as you scroll down your web page.

When you reach the footer of your web page, you want that portion to stop just above the footer of your web page.

In this case, you can use jQuery to help you achieve this behaviour.

Given that, this post shows how to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles.

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 https://commons.wikimedia.org/wiki/File:LARGE_elevation.jpg 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.

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Techcoil search box as at 20180616

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.