5 jQuery UI Autocomplete Examples

The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started.

1. Using Label-Value Pairs
2. Add CSS Class to the Dropdown
3. Load Data via AJAX
4. Highlight Matched Text
5. Custom HTML in Dropdown

5 jQuery UI Dialog Examples

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.

1. Modal Dialog with Buttons
2. Open Dialog on Click
3. Hide the Close Button/Title Bar
4. Change Dialog Position
5. Load Content via AJAX
6. Size to Fit Content

Printing Wide HTML Tables

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":

• Create a fixed width div with hidden overflow
• Place a copy of the table inside this div
• Scroll the desired portion of the table into view using CSS positioning
• Repeat as many times necessary

5 jQuery UI Datepicker Examples

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.

1. Parse and Format Dates
2. Set Date on Page Load
3. Disable Specific Dates
4. Style (or Highlight) Specific Dates
5. Internationalization and Localization
6. Update Datepicker Using AJAX
7. Using Datepicker to Select Date Range

Related Posts for Blogger

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:

• Light weight vanilla JavaScript code — no JavaScript framework required
• Customizable widget layout — just about everything can be styled using CSS
• Post thumbnails support — because a thumbnail image is worth a thousand words
• Google Analytics integration — clicks are logged in Google Analytics
• Lazy-loadable — the script can be loaded asynchronously
• Easy installation — does not require editing Blogger template

Bring Google Map v3 Markers to Front by Changing Z-Index

As mentioned in my earlier article on the same subject, the Google Maps API stacks the markers on a map based on their latitude — the markers appear in front of those that are vertically above them. This means that a marker that needs to be prominent might be buried below nearby markers, especially at lower zoom levels.

Google Maps API v3 allows you to change the stacking order of a marker using the zIndex property. The API automatically assigns z-index to markers; manually assigning a value higher than google.maps.Marker.MAX_ZINDEX will ensure that the marker stays in front of all markers with auto-assigned z-index.

Zoom-to-Fit All Markers on Google Map v3

Google Maps API version 3, like its predecessor, allows you to automatically center and zoom the map around a set of coordinates. This is useful when you add markers or other overlays to a Google map programmatically; the API can center and zoom the map optimally so that all overlays are visible at once glance.

Compared to the Google Maps API v2 example, API v3 makes the process simpler and more logical via the Map.fitBounds() method.

Retrieve Title, Description and Thumbnail of a YouTube Video Using JavaScript and AJAX

The YouTube Data API allows an application to interact with YouTube and perform a variety of operations; such as searching for videos, retrieve video information and upload a video on behalf of a user. The API also provides programmatic access to the video and user information stored on YouTube. This article demonstrates how you can retrieve information of a YouTube video (e.g. title, description, thumbnail, duration, views and rating) using the YouTube Data API and jQuery.

Starting from version 3, YouTube data API requires an application key and billing information just like Google maps. However, the API offers few million requests free each day. Authentication is not required for most read-only operations.

Determine Blogger Page Type From JavaScript Using Template Codes

You can check the Blogger page type (index, item or archive) from JavaScript by adding this template code to the head section of your Blogger template:

Adding Street View Support to Google Maps

Google Maps API version 2.104 introduces new classes that allow you to integrate Google Street View into your Google Maps. Google Street View provides 360° horizontal and 290° vertical panoramic views for various streets around the world.

The following demos show how you can use the Google Maps API to integrate a Street View Panorama alongside a Google Map.

Latitude-Longitude Finder Tool

This easy-to-use, online, browser-based tool will help you find the Latitude/Longitude coordinates of any place on the world map. If you are a coder or a developer interested in using Google Maps API, you will find useful information further below.