The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Dialog widget is a part of jQuery UI; it allows you to display content inside a floating window which has a title bar, content area, button bar, drag handle and close button; and it can be moved, resized and closed. The following examples demonstrate some advance uses of the dialog widget.
I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded.
I was not able to find a solution so I made a half-hearted attempt at this. My "solution":
Back in February I decided to change the address of my blog from 911-need-code-help.blogspot.com to salman-w.blogspot.com. Changing the blog address is straightforward; however, I wanted the following to happen after the change:
In short, I needed to redirect old URLs to new ones. Given that Blogger does not have an option to redirect URLs to another blog and mod-rewrite/server-side scripting is not available either; my only option was to use zero second meta refresh tag which is (claimed to be) treated as a 301/permanent redirect by Google. So, here is what I did:
The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Datepicker widget is a part of jQuery UI; it allows you to select a date from a popup/inline calendar. The following examples demonstrate some advance uses of the datepicker widget.
A PHP script that "does not work" because of an error will emit error messages such as "use of undefined variable", "an error in MySQL query", "permission denied", "parse error", etc. If you do not see an error when you should, it could mean that PHP is configured to suppress errors; a common practice in production environments. Developers who use AMP stacks unknowingly have PHP setup this way, and when they run into "does not work" problems and see no errors, they start asking silly questions.
The environment in which you develop code must be setup differently. Here is what you need to do in order to make PHP more verbose about errors.
A surprise question: what is the height of a div that contains just a 40 pixel tall image?
<div><img src="100x40.png" width="100" height="40"></div>
No. It is a little more than 40 pixels:
The YouTube JavaScript API allows you to interact with the YouTube chromeless or embedded video player programmatically. For example, it provides functions to load, play, pause and stop a video; and triggers events when a video is played or stopped by user interaction.
The events triggered by the API have a catch: they do not specify which player fired the event. So, if you have multiple JavaScript API enabled players on a page, you cannot identify them inside an event handler. This could be a problem, for example, when you have two videos on a page and want to record the number of times each video is played using Google Analytics event tracking. Here is a snippet of code to attach event listener to the videos:
document.getElementById("video-1").addEventListener("onStateChange", "onStateChange");
document.getElementById("video-2").addEventListener("onStateChange", "onStateChange");
The onStateChange function will receive the player's new state (playing, paused, stopped, etc) but not the id or reference of the video. A very simple solution for this problem is to create separate event handler for each video:
document.getElementById("video-1").addEventListener("onStateChange", "onStateChange1");
document.getElementById("video-2").addEventListener("onStateChange", "onStateChange2");
Adding a list of related posts at the end of article is a tried and tested way to keep the visitors engaged with your blog for longer duration. It gives them a reason not to click the back button, thus increasing your blog's page views and average visit duration; and decreasing bounce rate.
There are plenty of related post widgets for Blogger but I was not satisfied with them (in fact, I am never satisfied with any piece of code). Therefore, I decided to write my own, with the following features:
Relational databases represent data as rows and columns inside a table; however, this representation is not suitable for hierarchical data. Certain models are available that allow you to store hierarchical data in these databases. One such method is the Adjacency List model. This article shows you how to manipulate adjacency list implementation of hierarchical (tree) data using PHP.
Hierarchical data consists of elements that have parent-child relationships. It can be visualized as a tree-like structure where each node can have one parent and many children. A node that does not have a parent is called root node while a node that does not have any children is called leaf node. Any connecting node is called branch node.
Adjacency list model is a naive solution used (unknowingly) by majority of programmers. In this implementation, each row stores a reference to its parent. This simplifies most database operations except for SELECTing a subtree (remember that the depth of the subtree is unknown).
Since a tree is a recursively defined data structure, it can be traversed naturally using recursion. The code demonstrated in this article uses (i) one query (ii) array to store all results (iii) index for faster iteration (iv) recursion. It does not use references or multiple queries.
Almost all rating systems you come across use stars to represent the numeric information visually. There are many ways to display the star rating, some involve using six or more images, while others require an image sprite that contain two, six or even more images. However, I like the star ratings used on Google search results page because it uses very simple CSS and sprite; and it can display fractional values (e.g. 3, 3.5, 3.75) quite nicely.
To create something similar, all you need is an image sprite containing two images (gray and yellow stars for example) and some CSS. Here is the 65x26px sprite used in the following example:
The HTML/CSS markup consists of two span tags:
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
