Joomla! 1.5 JavaScript jQuery

Table of Contents

Joomla! 1.5 JavaScript jQuery

Credits

About the Author

About the Reviewers

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Let's Start Making a Better Site—Images

How Joomla! handles images by default

Inserting images into articles

Placing images in modules

Placing images in the template

Adding a jQuery-powered image slideshow module

Some other modules to try

Image pop ups

Some other modules to try

Putting images together—image galleries

Some other extensions to try

Tips and tricks

Summary

2. Site Content—Our Next Step

Basic concepts on Joomla! content

How Joomla! shows our articles to site visitors

Enhance your site content using JavaScript

Organizing our content into tabs

Some other modules to try

Article slideshows

Some other extensions worth checking

Site search

Introducing AJAX search

Some other extensions to try

Tips and tricks

Summary

3. Embedding Rich Media Features with Joomla! Plugins

Concept of plugin—what is a Joomla! plugin and how does it work?

Code highlighter plugin

Some other extensions to try

captbunzo's Flickr Album plugin

Some other plugins to try

SC jQuery

Some other plugins to try

Tips and tricks

Summary

4. One Last Look at Joomla! jQuery Modules

Limitations of Joomla! menu modules

Creating a drop-down menu with CSS alone

jQuery-powered Joomla! menu modules

Adapting the menu to suit our template

Some more extensions to try

Creative ways of placing login modules in our site

Some other extensions to try

Tips and tricks

Summary

5. Refactoring Our Site

Warning

Removing unnecessary jQuery loads

Code highlight

pPGallery plugin

Shadowbox

AJAX Header Rotator

Content Slider module

What happens with jQuery UI

c7DialogMOD

jQuery tabs module

Removing MooTools

Tips and tricks

Summary

6. Getting Our Hands on Coding JavaScript

Adding movement to our site's header—Parallax effect

Preparing the HTML necessary for our example

Adding jQuery Parallax library

Tips and tricks

jQuery library jScrollPane

Adding mouse scrolling

Adding useful tooltips

Tips and tricks

Summary

7. Creating Our Own Modules

Learning the basics of Joomla! module creation

Creating a Send us a question module

Making a better form using JavaScript

Send the form using jQuery AJAX

Tips and tricks

Validating form fields using jQuery—why validate?

Warning

What could you check?

What to do next? Packing and installing the module

Summary

8. Building Complete Solutions, Modules, and Components

Working with the news rotator module

Creating the component base

XML installer file

Why are so many files necessary?

Building our first model

How Joomla! helps us work with the database

Inserting data

Updating data

Deleting records

Reading data

loadResult

loadObject

loadObjectList

Modifying our installer to create our table

Coding a basic admin zone

Inserting, editing, and deleting records in our admin zone

Showing our data in our module

Adding jQuery to our module—refreshing data using JavaScript

Summary

9. Going Further with Our Component Development

Adding a table paginator plugin to our admin zone

Textarea autogrow plugin

Working on our component's frontpage

Equal size columns with jQuery

Paginating our contents

Going back to the admin zone

Adding tips and instructions to fill our form using JavaScript

Uploading images

Showing our images in the frontend

An interesting way to show the caption

Adding a fresh full image pop-up script

Adding a WYSIWYG editor to our component backend

Summary

10. Problems and Usability

What happens if JavaScript is disabled?

Using Firebug to help us in our development

Possible problems and solutions with jQuery

Optimizing CSS and JavaScript

Summary

Index

Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 JavaScript jQuery

Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2010

Production Reference: 1190710

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-849512-04-6

www.packtpub.com

Cover Image by Asher Wishkerman (<a.wishkerman@mpic.de>)

Credits

Author

Jose Argudo Blanco

Reviewers

Eric Brown

Tahsin Hasan

Acquisition Editor

Darshana Shinde

Development Editor

Rakesh Shejwal

Technical Editor

Hithesh Uchil

Copy Editors

Janki Mathuria

Lakshmi Menon

Indexer

Hemangini Bari

Editorial Team Leader

Akshara Aware

Project Team Leader

Lata Basantani

Project Coordinator

Srimoyee Ghoshal

Proofreader

Aaron Nash

Graphics

Geetanjali Sawant

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Jose Argudo Blanco is a web developer from Valencia, Spain. After completing his studies, he started working for a web design company. Then, six years later, he decided to freelance.

Now that some years have passed as a freelancer, he thinks it's the best decision he has ever taken because it let him work with the tools that he likes, such as Joomla!, CodeIgniter, CakePHP, jQuery, and other well-known open source technologies.

His desire to learn and share his knowledge has led to him being a regular reviewer of books from Packt Publishing, including Magento 1.3 Sales Tactics, Openx Ad Server, Drupal E-commerce, Joomla! With Flash, Joomla! 1.5 SEO, and Magento Theme Design.

Recently, he published his own book, CodeIgniter 1.7, which you can also find on Packt's site. And since then he has been working on this Joomla! book, putting all his effort into it.

To Silvia, my brother, my family, Packt's team, and, of course, to you, the reader. I hope this book is useful to you.

About the Reviewers

Eric Brown, born and raised in California, joined the US Navy at 17 and became a Preventive Medicine Technician. Upon exiting military service, he left the medical field behind and moved to Nebraska and entered college to study art and design, which resulted in a Bachelor's of Science in Graphic Design from Wayne State College in Nebraska. Eric has since branched out by teaching himself (or learning from others) various aspects of HTML, CSS, and PHP as well as a variety of other code languages and web marketing strategies and tools. He currently owns his own design and development business located in Curtis, Nebraska, where he lives with his wife and pets.

Over the years Eric has worked for a local design and development firm in Nebraska on such projects as the Golden Spike Tower website, aimed at tourist traffic centered on the Union Pacific's Bailey Yard, and with a premier pet industry design and development firm as a project manager. He has also written for such prestigious publications as Trafficology (a purchased print publication on web marketing read by over 80,000 worldwide), CMSWire.com (a leader in content management news), Revenews (a highly rated site on various aspects of marketing), and Gadgetell (a well-known gadget news site).

Eric has been involved in other books as well, providing editing, image touch-up, and custom hand-drawn maps for Tagging Along (a Neville Family retrospective) as well as editing, layout, cover art, and image touch-up for My Life and Community (autobiography of Ken Huebner).

I would like to thank any and all who have helped to bring my career to this point, but most of all I would like to thank my wife Jaime and two children Ariel and Autumn for all their patience and understanding as my career and business underwent their developmental stages.

Tahsin Hasan is the 16th Zend PHP 5 certified programmer from Bangladesh. He is a tech enthusiast and has more than five years of web development experience. He has proficiency in LAMP environment. Tahsin Hasan is deft in both client-side and server-side programming techniques. He has worked with several PHP frameworks, such as CodeIgniter, Symphony, and CakePHP. He has contributed several libraries to the CodeIgniter community. He has also worked on several jQuery plugins. He has professional experience on software development lifecycle.

Tahsin Hasan always contributes to technical discussions on cutting edge technologies on his blog (http://newdailyblog.blogspot.com). You can reach him at .

I would like to thank my parents and my siblings for their encouragement while reviewing this book. And I would like to give special thanks to Srimoyee Ghoshal, Project Coordinator at Packt Publishing.

Preface

To date, Joomla! has been well known as a great content management system (CMS). There are many sites using it throughout the world, some of them having great features that impress their visitors. Most of the time, these appealing and powerful features work thanks to JavaScript. In this book, we are going to see how to enhance our site with these features, using another powerful open source tool—the jQuery JavaScript library.

Do you want to have a full-featured site? And more importantly, do you want to know how to develop jQuery-powered extensions? Just keep reading!

What this book covers

Chapter 1, Let's Start Making a Better Site Images, shows how Joomla! works with images by default. It then moves on to explain some image slideshows, pop ups, and image galleries—all using some interesting Joomla! extensions, which are jQuery-powered.

Chapter 2, Site Content Our Next Step, as its name suggests, is all about the content of our site and the different ways in which we can organize it. Not only does it show the basic ways, but also the use of tabs and article slideshows. It also includes a bit of site search, even AJAX site search.

Chapter 3, Embedding Rich Media Features with Joomla! Plugins, shows some interesting plugins, such as the code highlighter and Flickr plugins. We will also see the SC jQuery plugin—a plugin that will be of help in the future chapters of the book.

Chapter 4, One Last Look at Joomla! jQuery Modules, is where we will stop and see some interesting modules before proceeding to more complex chapters. For example, we will build drop-down menus, first with CSS and then with a Joomla! module. We will also see how to interestingly place the login module.

Chapter 5, Refactoring Our Site, is the last chapter before we start coding ourselves. Here we will stop and see how to make fewer jQuery library loads, and also some tips and warnings—it may not be the easiest chapter, but is an important one.

Chapter 6, Getting Our Hands on Coding JavaScript, shows us how to, instead of using Joomla! extensions, make use of some jQuery plugins to add some interesting effects to our template. This will involve some coding, but the results will be quite nice, including a Parallax effect, tooltips, and the always useful jScrollPane plugin.

Chapter 7, Creating Our Own Modules, shows us that it's much better to create our own modules so that our hard work of development can be easily used in any Joomla! site. In this chapter, we will see how to create our own modules with a small example: a quick, AJAX-powered contact form.

Chapter 8, Building Complete Solutions, Modules, and Components, will help us dive further and start working on a component. By the end of the chapter, we will not only have a working component backend, but also a module on the frontend to show our data—of course, with some interesting jQuery effects.

Chapter 9, Going Further with Our Component Development, continues work on our previous component to give it a frontend. However, we will also add some interesting features to the backend, such as textarea autogrow, equal size columns, pagination with JavaScript, and many more.

Chapter 10, Problems and Usability, is a chapter centered on solving some problems, and gives some interesting tips that we can apply to all the work we have seen throughout the book. It will cover topics such as JavaScript being unavailable and a failed AJAX request.

What you need for this book

Basic knowledge on Joomla! will help you follow the book. We try to make all explanations as easy to follow as possible. Basic HTML, PHP, and JavaScript knowledge is a prerequisite for the book. But don't worry, you will be provided with step-by-step explanations throughout the book. You will find this book very easy to follow. Also, in order to make the book even more easier to follow, you can download the code bundle from Packt’s site. In the code bundle given on the site, you will find all the code that are given as examples in the book.

Who this book is for

This book is mostly for PHP developers who work with Joomla! and web designers who want to add JavaScript and jQuery elements to their Joomla! themes and modules. However, it will also be useful to those who are interested in building their own jQuery-powered Joomla! extensions.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: After we create an instance of the controller class, we call the execute method.

A block of code is set as follows:

defined( '_JEXEC' ) or die( 'Restricted access' );

jimport('joomla.application.component.controller');

class TinynewsController extends JController{

function display(){

parent::display();

}

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

class TinynewsController extends JController{ var $_name='viewtoload';

function display(){

parent::display();

}

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: Then go to Extensions | Install/Uninstall. Here, after selecting the file, click on the Upload file & install button.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <feedback@packtpub.com>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Tip

Downloading the example code for the book

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

You can contact us at <questions@packtpub.com> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Let's Start Making a Better Site—Images

Pictures are worth a thousand words; images are one of the best ways to make our site interesting and grab our visitors' attention.

Although some people will agree with this statement more than others, the truth is that images have been one of the most important aspects of websites to date. From images incorporated into the layout to images used in content, they all help to make our site look interesting and appealing. And that's very, very important. We can have the best content, products, and articles; however, if our site is not appealing enough, our visitors will leave before we can even show them all of our site's great features.

If you stop to think