In this short tutorial, I will tell about creating elements and using it differently on different places. Elements are special files that generally adds value to parameters. For this tutorial, I will create a color element that  can be used in different components, modules, plugins where color selection is done through a color picker. I will use moorainbow as web color picker.
Also note, I am creating this element for my adsensebingo module. Hence this code has been tested and used.

Creating Color Element File

Element file are generally single php file that has element class that extends JElement base class. The class overrides fetchElement method of JElement Base class to provide color picker.
Let us create a folder that will hold all files necessary for color element.  Let us call this folder “element”. Download the latest moorainbow library and place it in a subfolder directly below the elements folder. Now create a color.php file . This file is the element file and has a class JElementColor that extends JElement base class.
Now override fetchElement method of JElement base class. The important part of element is the fetchElement method. This method actually returns data that can be used by parameters.

A little explanation about fetchElement is necessary. method fetchElement requires 4 arguments namely
$name – is the unique name of the parameter, from the name argument.
$value – is the current value of the parameter.
$node – is a JSimpleXMLElement object representing the <param> element.
$control_name – is the parameter type from the type argument (eg. ‘category’ or ‘color’).

The fetchElement method for Color element is as below

function fetchElement($name, $value, &$node, $control_name)
{
        ob_start();
        $img=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/images/rainbow.png";
        $imgx=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/images/";
        static $embedded;
                if(!$embedded)
        {
            $css2=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/css/mooRainbow.css";
            $jspath=JUri::root()."modules/mod_adsensebingo/elements/moorainbow/js/mooRainbow.js";
             ?>
<link
    href="<?php echo $css2;?>" type="text/css" rel="stylesheet" />
<script src="<?php echo $jspath;?>"></script>

            <?php
            $embedded=true;

        ?>
<script>

            window.addEvent('domready',function(){
//Get sibling function from http://www.sanjeevshrestha.com.np
                Element.extend({
                    getSiblings: function() {
                        return this.getParent().getChildren().remove(this);
                    }
                });
            $('.rainbowbtn').each(function(item){

         item.color=new MooRainbow(item.id, {
                    startColor: [58, 142, 246],
                    wheel: true,
                    id:item.id+'x',
                    onChange: function(color) {

                    item.getSiblings()[0].value = color.hex;
                    },
                    onComplete: function(color) {

                    item.getSiblings()[0].value = color.hex;
                    },

                    imgPath: '<?php echo $imgx;?>'

                });

                });
            });
            </script>
            <?php
        }
            ?>
            <label>
<input
    name="<?php echo $control_name;?////>[<?php echo $name;?>]" type="text"
    class="inputbox" id="<?php echo  $control_name.$name ?>"
    value="<?php echo $value;?>" size="10" />
<img
    src="<?php echo $img;? />" id="img<?php echo $name; ?>" alt="[r]"
    class="rainbowbtn" width="16" height="16" /></label>
        <?php

        $content=ob_get_contents();

        ob_end_clean();
        return $content;

    }

That is it.

Using it in Module Parameters.

Now let us use this in module parameter. Parameters are generally written in
element block. For these params block to render our color element we need to specify path to our elements folder in this params element node as below

<params addpath="[path]/elements"> </param>
--- list of <param> elements ---
</params>

In our case this is written as

<params addpath="/modules/mod_adsensebingo/elements"> </param>
<param name="foreground" type="color" default="#CC0000" label="Foreground Color" description="Select foreground color for your google ad" > </param>
-- other <param> elements
</params>

Now this block is aware of new elment type and knows where to find the element rendering code. The parameter section of module setting page now correctly shows a color picker.
You can create any kind of elments, from a simple integer list to a complex color element or elements that shows records from your component. The usage is limitless.

That is all for color element. More to come on element tutorials till then happy reading.

I have written a post about how to use jQuery with Joomla earlier. This tutorial is just a slight modification of the codes from the earlier post.
To use mootools 1.2.x with Joomla 1.5.x, follow the following steps.

1. Download the mootools core from the mootools core builder site
2. Also Download the additional plugins you will use with your installation from more builder. I recommend downloading both compressed and uncompressed files from the mootools builder. We may need uncompressed files in debuggin mode.
3. Copy these files in a folder that can be accessed by Joomla. I recommend media->system->js folder of joomla installation. The choice is yours!

I copied four files mootools-1.2.3-core.js, mootools-1.2.3-core-compressed.js, mootools-1.2.3.1-more.js and mootools-1.2.3.1-more-compressed.js to media->system->js folder. Now locate and open a file named behavior.php which is inside libraries->joomla->html->html folder. Now find a method named mootools($debug=null) and modify it as below.

function mootools($debug = null)
{
static $loaded;
$mainframe=&JFactory::getApplication();
// Only load once
if ($loaded) {
return;
}

// If no debugging value is set, use the configuration setting
if ($debug === null) {
$config = &JFactory::getConfig();
$debug = $config->getValue(‘config.debug’);
}

$konkcheck = isset($_SERVER['HTTP_USER_AGENT']) ? strpos(strtolower($_SERVER['HTTP_USER_AGENT']), “konqueror”) : null;

if($mainframe->isSite())
{
if ($debug || $konkcheck)
{
JHTML::script(‘mootools-1.2.3-core.js’, ‘media/system/js/’, false);
JHTML::script(‘mootools-1.2.3.1-more.js’, ‘media/system/js/’, false);
}
else
{
JHTML::script(‘mootools-1.2.3-core-compressed.js’, ‘media/system/js/’, false);
JHTML::script(‘mootools-1.2.3.1-more-compressed.js’, ‘media/system/js/’, false);
}
$loaded = true;
return;

}
else
{

if ($debug || $konkcheck)
{
JHTML::script(‘mootools-uncompressed.js’, ‘media/system/js/’, false);
}
else
{
JHTML::script(‘mootools.js’, ‘media/system/js/’, false);
}
$loaded = true;
return;
}
}

This modified mootools behavior checks if the site is accessed from frontend or is it admin. if it is frontend it loads the mootools 1.2.x depending upon the debug mode. It will load uncompressed files in debug mode. This will load both core and more files in frontend. The admin still uses mootools 1.1.x as it heavily depends on it.

This is all! It worked for me. Let me know if it did or not for you. Happy reading!

Element.extend({
    getSiblings: function() {
        return this.getParent().getChildren().remove(this);
    }
});

Yes, this small code gathers all the siblings of the element except for itself. Isn’t it simple?

Have you ever wanted to automatically ajaxify joomla links? This is to say if you ever wished that all the links would open with ajax request in your main component area! If yes, then read on! This small tutorial will teach you how to automatically implement ajax requests in every link on a joomla page.

To implement Ajax request in every link in a joomla page you need to modify index.php of joomla template.

Add the code below in index.php

<script>