This is something we should always take care of, as most of our visitors may have JavaScript disabled in their browsers. Throughout this book we haven't had enough time to take a look at it. So I hope that in this example we can take a look at the main aspects of this problem.

For this example, we are going to use a new little module called mod_tinyphotos. You can find the mod_tinyphotos.tar.gz file in the code bundle of Chapter 10 and at this point it's more or less in the middle of its development. It will be perfect for us then because we can practice with it. But first we need to install it, and as always, we can do that in our administrator screen from Extensions | Install/Uninstall.

Once we have our module installed, we can see it as a module called Tiny Photos, with all of our other modules in Extensions | Module Manager, as shown in the following screenshot:

Of course, we need to enable the Tiny Photos module and place it in the module position we want. For this example, module_3 of our template is the position used. Once the module is enabled, it will appear on our page, using the photos introduced in our tinynews component. It will look like the following screenshot:

Of course, much work needs to be done for this module to be finished, but it will serve us as a starting point. As we can see these are the images of our news. I have put one image in each bit of news, so we have all the necessary images.

We need something more—a jQuery plugin. This time we are going to use a plugin called jCarousel from Jan Sorgalla, which can be found at:

http://sorgalla.com/projects/jcarousel/.

This plugin is going to help us create a nice carousel effect from our images. So let's download it and see how we can, in a very basic way, make it work.

Once the plugin is downloaded, we need to move some files into our module installation. The first file we are going to need is jquery.jcarousel.pack.js, which we will place in modules/mod_tinyphotos/js. Of course, we need to include it in our modules/mod_tinyphotos/mod_tinyphotos.php file, as shown in the following piece of code:

JHTML::stylesheet('styles.css','modules/mod_tinyphotos/css/'),
            $document =& JFactory::getDocument();
            $document->addScript(JURI::root(true).'modules'.DS.'mod_tinyphotos' .DS.'js'.DS.'jquery.jcarousel.pack.js'),
        

We will also need to add some CSS files. First among them is the jquery.jcarousel.css file that we will place in the modules/mod_tinyphotos/css folder. But we will also need to include it in our mod_tinyphotos.php file, just as we did before. Take a look at the code required; it is as follows:

JHTML::stylesheet('jquery.jcarousel.css','modules/ mod_tinyphotos/css/'),
        

This file has the basic necessary styles for the plugin to work, but we also need one skin CSS file and its folder. The skin will include some images and other elements to make the carousel look better. We are going to use the default one, so copy the tango folder in modules/mod_tinyphotos/css, and then include the CSS file of the skin in the mod_tinyphotos.php file:

JHTML::stylesheet('skin.css','modules/mod_tinyphotos/css/tango/'),
        

Now we only need to invoke the plugin function. We will do that at the end of the modules/mod_tinyphotos/tmpl/default_tmpl.php file:

…
            </ul>
            </div>
            <script type="text/javascript">
            jQuery(document).ready(function() {
            jQuery('#carousel').jcarousel();
            });
            </script>
        

This will result in our module looking just as shown in the following screenshot:

We still need to do some modifications, mostly style modifications, which we will be including in the modules/mod_tinyphotos/css/styles.css file as follows:

.jcarousel-skin-tango .jcarousel-container {
            -moz-border-radius: 0;
            background: transparent;
            border: 0;
            }
            .jcarousel-skin-tango .jcarousel-container-horizontal {
            width: 835px;
            padding: 10px 40px;
            }
            .jcarousel-skin-tango .jcarousel-clip-horizontal {
            width: 835px;
            height: 70px;
            }
            .jcarousel-skin-tango .jcarousel-item {
            width: 150px;
            height: 70px;
            }
            .jcarousel-skin-tango .jcarousel-next-horizontal, .jcarousel-skin-tango .jcarousel-prev-horizontal {
            top: 32px;
            }
        

With our styles added, our module will look as follows:

This looks better now, and it has been quite easy to achieve, thanks to the jCarousel plugin. But how would this look without jQuery? The answer is like the next screenshot:

This is not very useful, as our visitors won't be able to see all the images. How can we improve this? Well, in fact quite easily, thanks to the noscript HTML tag. Remember our modules/mod_tinyphotos/tmpl/default_tmpl.php file? In this file, we have the following code:

<script type="text/javascript">
            jQuery(document).ready(function() {
            jQuery('#carousel').jcarousel();
            });
            </script>
        

Just after this code we are going to place this code:

<noscript>
            <style>
            #tinyphotos{
            width: 892px;
            height: 90px;
            overflow: auto;
            }
            #tinyphotos ul{
            width: <?php echo (165 * $i); ?>px
            }
            </style>
            </noscript>
        

The code placed inside the noscript tag will be executed only when JavaScript is not enabled. This code will give our tinyphotos DIV an overflow property, which will show a scrollbar when needed.

Next our tinyphotos ul element will be given a width equivalent to that of all our images. We need to calculate this width and do it before the styles declared inside the noscript tag we have just written. It is quite easily done in our foreach loop:

<?php
            $i=0;
            foreach($news as $new){
            ?>
            <li><img src="<?php JURI::base(); ?>administrator/components/ com_tinynews/images/<?php echo $new->image; ?>" alt="<?php echo $new->caption; ?>" height="70"/></li>
            <?php
            $i++;
            }
            ?>
            </ul>
        

That way we know the width necessary, so all images are correctly placed inside our ul element. The result, while not as nice as the JavaScript version, is much better than having nothing applied at all. Take a look at the next screenshot to see the difference:

This way, even with JavaScript disabled, our visitors are able to see our images.

Remember that you can download all this code from the code bundle, except for the jQuery plugin, which you must download from its author's site:

http://sorgalla.com/projects/jcarousel/.

The folder for these changes can be found in the mod_tinyphotos_changes folder.

Another example: mod_littlecontact

mod_littlecontact is also quite easy to modify, so it can work with or without JavaScript enabled. For example, in our modules/mod_littlecontact/tmpl/default_tmpl.php file, we have the following line:

<input type="button" name="send" value="Send" class="sc_button" id="send_button"/>
        

We will replace it with the following line:

<input type="submit" name="send" value="Send" class="sc_button" id="send_button"/>
        

We were using button instead of submit so that submitting the form doesn't refresh the page, loading it again. We were using jQuery to send the form, but if JavaScript is not enabled, we won't be able to send the form.

Using submit instead will enable the form to be sent, but we still want to send it with AJAX if JavaScript is enabled. For this, we are going to modify the modules/mod_littlecontact/js/littlecontact.js file.

In that file, we have the following code:

jQuery(document).ready(function($){
            $('#send_button').click(function() {
            //First we do some validation, just to know that we have some data
        

Now, we are going to change it to the following:

jQuery(document).ready(function($){
            $('#send_button').click(function(e) {
            e.preventDefault();
            //First we do some validation, just to know that we have some data
        

We use the preventDefault method so that the submit button is prevented from working, and we can continue with our jQuery code. This way we can easily use this method to send our form using jQuery, and if JavaScript is not enabled, the form will be sent just as any other form.