Book Image

PHP jQuery Cookbook

By : Vijay Joshi
Book Image

PHP jQuery Cookbook

By: Vijay Joshi

Overview of this book

As web technology evolves, the gap between desktop applications and web applications continues to vanish. And what better way to bridge that gap, for your own website, than using the best two open source technologies in the market: PHP and jQuery. The power-combo of these two is leading the way in revolutionizing the RIA world. Although they are easy to integrate, finding or figuring out how to do what you want to do is rather arduous.The PHP jQuery Cookbook will be your handy guide with walkthroughs of common integration tasks and problems that will help you master the possibilities available using the PHP and jQuery combo. You will learn quick solutions to necessary tasks to integrate the power of two of the best known and most widely used web technologies of today – PHP on the server side and jQuery on the client side. Glide through the basics and move to advanced topics to create dynamic and interactive web applications with this book in hand.This book covers a wide array of technical aspects of creating an interactive website. Apart from basics of PHP and jQuery, you will go through advanced topics like creating plugins, validating controls, and useful utilities that you will be able to use as stand-alone tools. AJAX, the key technique of browser-server communication is covered in detail. You will also learn to use JSON, which is becoming preferred as a mode of data interchange over XML, both in web applications and web services.The book also covers database interaction, which is an important part of any dynamic web application. You will also gain expertise in debugging JavaScript with the help of useful tools that will save you hours of tedious manual debugging.Most importantly, by using jQuery and PHP together, you will be able to develop applications that are compatible with all major browsers, with no need to write code targeted at specific browsers!
Table of Contents (17 chapters)
PHP jQuery Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Editing HTML and CSS


In a typical scenario of editing a page, you open the page in an editor, make changes in it, and then reload the web page to see the changes. If there is something wrong, or anything is not as desired, you go back to the editor and repeat the cycle.

Well, there's no need for this anymore when you have the power of Firebug. This recipe will explain how you can edit the HTML and CSS of a page or specific elements in real time using Firebug. Once all the changes are made you can implement those into your source code at once.

How to do it...

  1. Take any recipe from this book. For example Creating an accordion style menu from Chapter 7 and open it in the browser.

  2. Now using the Inspect button locate the h1 element on the page, which has jQuery written inside it. Click on the Edit button beneath the Inspect button and you will be able to edit the HTML of the h1 element. Change the text inside it to About jQuery.

  3. Now click on the DIV with class container. On the right panel you will see the container class and its CSS properties. You can edit its existing properties by clicking on the property values and then change them to the required values. For example, click on the value for background-color and change it from #F0F8FF to #ff0000. All elements with class container will now have a red background colour.

  4. To add a new property, right-click on that class name and select New Property. It will append a new line to the existing properties where you can add new properties and their values. Add two new properties color and font-weight with values #fff and bold respectively. This change will be reflected in all elements with class container.

There's more...

Changing style for a specific element

Apart from changing CSS for already defined classes, you can also specify CSS properties for individual elements. For this, right-click anywhere on the right panel and select Edit Element Style option. This will append a new row in the right-hand column for adding CSS name values that will be applicable to only the selected element.