PHP Ajax Cookbook

Book Image

PHP Ajax Cookbook

Book Image

PHP Ajax Cookbook

Overview of this book

PHP Ajax Cookbook

PHP Ajax Cookbook

Credits

About the Authors

About the Authors

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

AJAX Libraries

Designing simple navigation using jQuery

Creating tab navigation

Designing components using Ext JS

Event handling in MochiKit

Building a tab navigation using Dojo

Building a chart application using YUI library

Loading dynamic content using jQuery slider

Creating an AJAX shopping cart using MooTools

Building an AJAX login form using prototype.js

Basic Utilities

Basic Utilities

Validating a form using Ajax

Creating an autosuggest control

Making Form Wizards

Uploading a file using Ajax

Uploading multiple files using Ajax

Creating a five-star rating system

Building a PHP Ajax contact form with validation

Displaying a table in Ajax

Building Pagination using PHP and Ajax

Useful Tools Using jQuery

Useful Tools Using jQuery

Making tool tips using Ajax

Creating Autocomplete from a database

Building a tab navigation using jQuery

Rotating content

Creating an image slider

Creating pageless pagination

Loading images using Lightbox

Growing textarea using the jGrow plugin

HTML replacement of the select dropdown

Improving date selection with Datepicker

Drag-and-drop functionality

Ajax shopping cart

Sorting and filtering data

Adding visual effects and animations

Advanced Utilities

Advanced Utilities

Building an Ajax chat system using the Comet technique

Charting with JavaScript

Decoding CAPTCHA through canvas

Displaying data in a grid

Debugging and Troubleshooting

Debugging and Troubleshooting

Debugging with Firebug and FirePHP

Debugging with the IE developer toolbar

Avoiding the framework $ conflict

Using the anonymous function of JavaScript

Fixing memory leaks in JavaScript

Fixing memory leaks

Sequencing Ajax Requests

Cross Browser and Ajax

Beautifying JavaScript

Optimization

Caching of objects

Getting optimization tips with YSlow

Speeding up JavaScript delivery through automatic compression and browser caching

Triggering JavaScript early/on DOM load

Lazy-loading of images

Optimizing Ajax applications automagically through Apache modules/Google mod_pagespeed

Implementing Best Practices to Build Ajax Websites

Implementing Best Practices to Build Ajax Websites

Avoiding HTML markup-specific coding

Building secure Ajax websites

Building SEO-friendly Ajax websites

Preserving browser history or un-breaking the browser's back button

Implementing comet PHP and Ajax

Ajax Mashups

Creating and consuming web services using PHP

Using Flickr API with Ajax

Using Twitter API with Ajax

Translating text using Google Ajax API

Using Google Maps

Searching a location within a Google Map

Searching within XX km. radius of Google Maps with markers and Info window

Finding a city/country using IP address

Converting currencies using Ajax and PHP

iPhone and Ajax

iPhone and Ajax

Building a touch version of a website (with jQTouch)

Leveraging HTML5 features in iPhone Ajax

Building native apps with PhoneGap

Speeding up a PhoneGap project

Building a currency conversion hybrid app

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Making tool tips using Ajax

Web browsers render the contents of the title attributes in a tool tip. There are some problems with the browsers' tool tips such as:

Their appearance isn't consistent across browsers
Browser tool tips can't be styled

To solve these aesthetic UI issues, we have a number of jQuery plugins. In this recipe, we'll look into using the BeautyTips plugin to get tool tips.

Getting ready

We'll require the BeautyTips jQuery plugin from http://plugins.jquery.com/project/bt along with jQuery Core. Optionally, we may require the following:

ExplorerCanvas from http://excanvas.sourceforge.net/ to support the canvas element in Internet Explorer. Note that BeautyTips uses the canvas element for generating bubble tips.
The hoverIntent plugin from http://cherne.net/brian/resources/jquery.hoverIntent.html, as it changes the hover behavior. jQuery's default hover event fires whenever a bound element is hovered upon, and that sometimes creates poor user experience—especially when the user...