Using Javascript Effects to enhance your Joomla! website for Visitors

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook — Save 50%

Over 60 simple but incredibly effective recipes for taking control of Joomla! templates

$23.99    $12.00
by Richard Carter | July 2010 | Joomla! Open Source

With the widespread empowering of website owners being able to manage their own website's content, there are a huge number of content management systems available. Joomla! is one of the most popular of these content management systems with a large user base and active community who are constantly working to improve Joomla! for new and future users.

In this article by Richard Carter, author of Joomla! 1.5 Templates Cookbook , we will learn :

  • Including a JavaScript file in your Joomla! template
  • Tips and tricks on minimizing page load time when using JavaScript
  • Maximizing backward compatibility with JavaScript
  • Providing Internet Explorer 6 with transparent PNG support in your Joomla! template
  • Installing the jQuery JavaScript library in Joomla!
  • Creating an image slideshow with JavaScript in Joomla!

(Read more interesting articles on Joomla! 1.5 here.)

Introduction

Joomla! is a feature-rich content management system, but there are some things it can't do out of the box. This is where JavaScript can become useful in improving the experience of your website to its visitors.

Including a JavaScript file in your Joomla! template

One of the most basic aspects of using JavaScript with your Joomla! template is including it within the page. There are two ways to do this—within the <head> element of your template, or within the <body> element of your template (best placed just above the </body> element). We'll make use of the method that uses the <head> template. (The reasons to do so are covered in another recipe of this article.)

Getting ready

Open your template's index.php template, located in your template's subdirectory within your Joomla! installation's templates directory.

How to do it...

  1. Locate the <head> element of your Joomla! template in the index.php file and insert a <script> element that references the JavaScript file(s) that you wish to use:

    <!-- some HTML omitted for brevity -->

    <script
    type="text/javascript"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->baseurl ?>/templates/rhuk_
    milkyway/js/javascript-file.js"></script>
    </head>

    Note that the base directory of your Joomla! installation is inserted automatically to help prevent any problems with changing directory paths to the JavaScript file, should you change your website's location.You will need to change the template's path if you choose to rename your template.

  2. For valid XHTML, you need to specify the type attribute, as shown:

    <script type="text/javascript"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->baseurl ?>/templates/rhuk_
    milkyway/js/javascript-file.js">
    </script>

How it works...

When a browser encounters a <script> element in your page, it loads the required behavior included in the JavaScript file, assuming that your browser has it enabled.

See also

  • Including a JavaScript file in your Joomla! template
  • Maximizing backward compatibility with JavaScript
  • Installing Google Analytics
  • Integrating AddThis social bookmarking tool with your Joomla! template

Tips and tricks for minimizing page load time when using JavaScript

While JavaScript can be used to enhance your visitors' experience of your Joomla! website, it can have a negative impact in terms of both real and envisaged loading times of pages.JavaScript slows down the loading of a page because it's a single-threaded language. This means that nothing else can occur while JavaScript is being loaded or something in JavaScript is being evaluated. As such, a single, slow-loading JavaScript file can prevent a whole website from loading quickly!

How to do it...

  1. The most obvious thing that you can do to make your Joomla! template load more efficiently is to compress any JavaScript you do use. As such, there are a number of online compression tools that you can use, including the JavaScript Compressor (http://javascriptcompressor.com):

    Using Javascript Effects to enhance your Joomla! website for Visitors

  2. Once you've inserted your JavaScript into the Paste your code input area, click on Compress. In this example, we've used a function that creates a slideshow with the use of the jQuery library:

    // Requires jQuery to run

    $(document).ready(function() {
    $('#slideshow-wrapper').cycle({
    fx: 'fade',
    speed: 'normal',
    timeout: 0,
    next: '#next',
    prev: '#prev'
    });

    $('#slidie').cycle({
    fx: 'fade'
    });
    });

    Using Javascript Effects to enhance your Joomla! website for Visitors

  3. As you can see, quite a compression is noticeable even with a relatively compact piece of JavaScript, around half the size of the original in terms of memory required to store it (and thus, resources required to load it for a visitor visiting your website).

    $(document).ready(function()
    {$('#slideshow-wrapper').cycle({fx:'fade',speed:'normal',timeout
    :0,next:'#next',prev:'#prev'});$('#slidie').cycle({fx:'fade'})});

Many JavaScript libraries (such as jQuery and MooTools) and features are available in a compressed format already. There is also a Joomla! extension called JCH Optimize that you can use. You can download it from http://extensions.joomla.org/extensions/site-management/site-performance/12088.

How it works...

As you've seen, JavaScript is a single-threaded language, so one technique to minimize its impact on your Joomla! website's loading times for visitors is to make the JavaScript the last possible item in the page to load. Additionally, compressing JavaScript can greatly reduce page-loading times with larger JavaScript files. It's also worth keeping a backup of the uncompressed JavaScript file, as this makes it easier to change and recompress in the future.

There's more...

Another way to minimize your Joomla! template's page load time is to reference JavaScript and other template files from different hostnames. Browsers including Internet Explorer and Firefox have been known to limit the number of simultaneous connections to a hostname, slowing down the loading of the page.

Moving <script>tags to the bottom of the page

The other major factor that can slow down the page load times for visitors to your Joomla! website is the necessity for their browser to have to stop while it deals with any JavaScript included in your page. You can overcome this by reordering the HTML elements in your Joomla! template's index.php file to move the <script> elements to the bottom of the page where they appear inline.

See also

  • Maximizing backward compatibility with JavaScript
  • Installing Google Analytics
Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(Read more interesting articles on Joomla! 1.5 here.)

Maximizing backward compatibility with JavaScript

JavaScript can be used to get older browsers such as Internet Explorer 6 to behave like more modern browsers, to some extent. The ie7-js.js library uses JavaScript targeted at older versions of Internet Explorer to fix many of the common issues with these older versions of the browser.

Getting ready

As usual, you'll need to open your Joomla! template's index.php file and locate the <head> element.

How to do it...

  1. Insert a conditional comment targeted at versions of Internet Explorer less than 7:

    <head>

    <!—some HTML omitted for brevity -->

    <!--[if lt IE 7]>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://ie7-js.googlecode.com/svn/version
    /2.1(beta3)/IE7.js">
    </script>
    <![endif]-->

    </head>

    Note that the file is hosted externally from your Joomla! website on googlecode.com.

You may find a more recent version of the files you required link from at http://code.google.com/p/ie7-js/.

How it works...

The JavaScript changes Internet Explorer's behavior to allow its support for CSS as it would behave in later versions of the browser. Additionally, the IE7-JS.jsfile also provides a fix for the lack of transparent PNG support in the browser.

See also

  • Maximizing backward compatibility with JavaScript
  • Providing Internet Explorer 6 with transparent PNG support in your Joomla! template

Providing Internet Explorer 6 with transparent PNG support in your Joomla! template

One major letdown of older browsers is their lack of support for alpha-channel transparency in Portable Network Graphics (PNGs). This means that more modern designs may not display as intended in older browsers, but there is a fix in the form of the IE PNG fix.

Getting ready

  1. Locate the <head> element of your Joomla! template's index.php file. You'll also need the IE PNG Fix behavior file, which you can find at http://www.twinhelix.com/css/iepngfix/demo/. Save this file in the css directory of your template's directory (use the rhuk_milkyway template in the following example).

    <!-- HTML omitted for brevity -->

    <style type="text/css">
    img, div, a, input { behavior: url(<?php echo $this->baseurl
    ?>/templates/rhuk_milkyway/css/iepngfix.htc) }
    </style>

    </head>

    If you no longer have access to Internet Explorer 6, you could make use of a remote access service such as BrowserShots (http://browsershots.org). There's also a tool called IETester available online athttp://www.my-debugbar.com/wiki/IETester/HomePage and http://www.spoon.nethas a Browser Sandbox service a vailable to allow for easier cross-browser testing.

  2. Without the fix, Internet Explorer displays the transparency as a gray block around the image, as follows:

  3. Once you've uploaded your Joomla! template's index.php file, Internet Explorer should now display the transparency as modern browsers do:

How it works...

Rather than displaying transparency, Internet Explorer 6 in particular displays a gray box in place of the transparency. The .htc file changes Internet Explorer's behavior to support the transparency.

There's more...

For more generalized support of Internet Explorer 6 in your Joomla! template, you can make use of IE7-JS.js, which is detailed in another recipe of this article.

See also

Installing the jQuery JavaScript library in Joomla!

There are a number of JavaScript libraries available that allow quicker development of JavaScript behavior for your website. We'll use the jQuery library, as this is one of the more popular JavaScript libraries.

Getting ready

Firstly, download jQuery from the jQuery website at http://docs.jquery.com/Downloading_jQuery.

How to do it..

  1. Save the jQuery JavaScript file as jquery.js in the templates\rhuk_milkyway\js\ directory. You may need to create the js directory yourself. Now open your template's index.php file and locate the <head> element within the template:

    <head>
    <!-- omitted content -->
    <script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->
    baseurl ?>/templates/rhuk_milkyway/js/jquery.js"></script>
    </head>

    That's it! Your Joomla! template now includes the jQuery library, meaning you can make use of it!

How it works...

There are many extensions to jQuery for specific features, from slideshows, container-toggling of contents, through to validating form input.

There's more...

Alternatively, you can install the jQuery library in your Joomla! template by editing your template's index.php file and placing a link to the library in the <head> element of your website:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://ajax.googleapis.com
/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>

jQuery from Google—an alternative

Another way you can include jQuery in your Joomla! template is by adding the following code to the <head> of your Joomla! template:

 

<head>
<!-- omitted content -->
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.google.com/jsapi
"></script>
<script>
google.load
("jquery", "1.4.2");
</script>
</head>

This method of including jQuery allows you to configure which version of the library is loaded. The most recent stable release is currently 1.4.2.

See also

Creating an image slideshow with JavaScript in Joomla!

A common feature for many websites is an image slideshow that allows multiple images to be displayed in turn. Typically for Joomla!, there's an extension that provides this feature for us! The extension is called Flash-Style jQuery Slideshow.

Getting ready

Download the extension from http://extensions.joomla.org/extensions/photosa-images/images-slideshow/12135.

Using Javascript Effects to enhance your Joomla! website for Visitors

How to do it...

  1. Log in to your Joomla! website's administrator panel and navigate to Extensions | Install/Uninstall.

    Using Javascript Effects to enhance your Joomla! website for Visitors

  2. Select the extension from your computer in the Upload Package File field and click on Upload File & Install.

    Using Javascript Effects to enhance your Joomla! website for Visitors

  3. The extension is now installed! You can configure the extension by navigating to Extensions | Module Manager.

  4. Locate the extension in the list (named as Flash-Style jQuery Slideshow v2.0.2) and enable it by clicking on the red cross icon to the right-hand side of the extension's name.

    Using Javascript Effects to enhance your Joomla! website for Visitors

  5. Next, configure the extension itself, moving it to display in the "top" module position of your template, and disable the title from displaying.

  6. If you now look towards the right of this, there are more configuration options, as shown in the following screenshot:

    Using Javascript Effects to enhance your Joomla! website for Visitors

  7. Add a class name to the Module CSS Class field to make it easier to style (if you wish to do so in the future). Once you've applied this change, the HTML generated for the module then becomes:

    <div class="images-slideshow">
    <div id="fhwflashy58" class="fhwflashytrans">
    <img
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://richard.peacockcarter.co.uk/joomla/images
    /banners/shop-ad.png"
    width="300" height="150" alt="" /><br />
    </div>
    </div>

    The path to the image itself will change depending on which directory of images you have selected for the Select Images Folder file. Lastly, you need to change the Slideshow Height and Slideshow Width fields to match the dimensions of the banner images. We'll be using 60 and 468 respectively.

  8. If you now visit the frontend of your Joomla! website after saving these changes, you'll see that the images appear.

    Using Javascript Effects to enhance your Joomla! website for Visitors

  9. The image will change depending on the images you have in the directory you set earlier.

How it works...

The extension allows you to add a slideshow of images to your Joomla! website. JavaScript is then used to add a transition between the different images displayed in rotation.

See also

  • Including a JavaScript file in your Joomla! template
  • Installing the jQuery JavaScript library in Joomla!

Summary

In this article we have learned:

  • Including a JavaScript file in your Joomla! template
  • Tips and tricks on minimizing page load time when using JavaScript
  • Maximizing backward compatibility with JavaScript
  • Providing Internet Explorer 6 with transparent PNG support in your Joomla! template
  • Installing the jQuery JavaScript library in Joomla!
  • Creating an image slideshow with JavaScript in Joomla!

If you have read this article you may be interested to view:


Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Mastering Joomla! 1.5 Extension and Framework Development
Mastering Joomla! 1.5 Extension and Framework Development

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Site Blueprints
Joomla! 1.5 Site Blueprints

Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Spring Python 1.1
Spring Python 1.1

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
g
4
P
g
q
b
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software