JQuery and Joomla

Out of the box, Joomla supports the Mootools Javascript framework.
You can, however, very simply add jQuery.
N.B. The following is for Joomla 1.7.
For this particular application i need both the 'core' framework and jQueryUI.
I downloaded the libraries and put them into 'JOOMLA_HOME/media/system/js'.
Then, in the my custom component's Admin views I referenced them and initialised them like this:

pop-uptext

$document = &JFactory::getDocument();
$document->addScript( '../media/system/js/jquery-1.7.1.js' );
$document->addScript( '../media/system/js/jquery-ui-1.8.17.custom.min.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

$document = &JFactory::getDocument();
$document->addScript( '../media/system/js/jquery-1.7.1.js' );
$document->addScript( '../media/system/js/jquery-ui-1.8.17.custom.min.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

Then, when ever you need to execute any jQuery functions (e.g. in document.ready) use the following syntax:

pop-uptext

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

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

Note, the '$' is replaced with an explicit 'jQuery' reference (to avoid conflict wit Mootools.
For the non-admin screens, its exactly same but the path to the jQuery files in the 'addScript' doesn't have a leading '../'.

Syntax Highlighting

I've added Syntax Highlighting to my template:

pop-uptext

$document = &JFactory::getDocument();
$document->addScript( '../media/system/js/jquery-1.7.1.js' );
$document->addScript( '../media/system/js/jquery-ui-1.8.17.custom.min.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

$document = &JFactory::getDocument();
$document->addScript( '../media/system/js/jquery-1.7.1.js' );
$document->addScript( '../media/system/js/jquery-ui-1.8.17.custom.min.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

To do this follow the instructions on the site but with one gotcha. When you add the javascript to the template, enclose the JS in a CDATA block:

pop-uptext

<script type='text/javascript'>
//<![CDATA[
PASTE THE JAVASCRIPT CODE HERE
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
PASTE THE JAVASCRIPT CODE HERE
//]]>
</script>

Adding Flickr to Blogger

Having started a bit of blogging again, i noticed my Flickr stream was broken with a message about invalid API key.

A quick 'Google' revealed that the gadget was out of date and essentially broken.

A bit more Googling got a solution:

1. go to the Flickr HTML badge generator and follow 'Step One' in this blog. 
2. Once you have the code, go to the [new] 'Layout' section and add a Gadget.
3. Select an HTML/Javascript gadget, give it a title and post in the code generated in 1.

Its that easy.

jQuery Accordian

Just a quick post on how i implemented a simple Accordian type effect.

Now, given the prevalance of plugins for jQuery etc, why write my own.

Well, firstly the jQuery UI accordian works on divs and i need one which works on 'fieldsets'. Second, I felt like it!

Actually, thats not completely true; as part of a wider framework, i needed 3 behaviours to be easily switchable in pages where forms are layed out in fieldsets:

1. No behviour; all fieldsets are displayed fully and uncollapsed.
2. Optional collapsing; all fieldsets are collapsed on page load, but we can expand more than one at a time.
3. Accordian; all fieldsets are collapsed on page load and only one can be expanded at any one time; i.e. open one, close all others.

So, lets take case 2 (case 1 needs no work!)

Optional Collapsing

Heres a simple snippet of HTML for a page with 3 fieldsets:

   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  
   
   ...  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 1</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 2</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 3</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   

So, we include the jQuery library from Google's CDN and then in the body, create 3 fieldsets. All we want to do, is collapse the fieldset when we click on the legend. All we need is a simple bit of JS:

 <script>  
       $(document).ready(function() {  
             $('.optcollapse').each(function(){  
                   $(this).siblings().slideToggle("fast");  
                   $(this).click(function(){  
                         $(this).siblings().slideToggle("slow");  
                   });  
             });  
       });  
 </script>  

Whats this code doing? Firstly, it finds every element with the 'optcollapse' class and a) executes the "slideToggle('fast')" jQuery function on all siblings of the legend and b) sets an "onclick" event handler on each of them to do the same again. "slideToggle" simply expands and collapses an element based on it's state which is just what we need. One thing i could do is futher qualify the selector to be 'legend.optcollapse' just in case but its fine for now. So, why execute "slideToggle" on all the legends siblings? Essentially, the legend is out clickable 'switch' so we need everything in the fieldset collapsed apart from the legend. if we collapsed the legend we'd not have anything to click on to expand the fieldset again.
Having got the above working, we can now move on to the Accordian:

Accordian

This is an extension of above really. as well as controlling the fieldset who's legend we click on we also need to manipulate the other fieldsets inline with the state of the 'clicked on' fieldset. Here's a snippet of our HTML:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  
 ...  
 <fieldset class="collapsed">  
       <legend class="collapsible">Fieldset 1</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  
 <fieldset >  
       <legend class="collapsible">Fieldset 2 - Open at page load</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  
 <fieldset class="collapsed">  
       <legend class="collapsible">Fieldset 3</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  

Ok, so similar to the 'optional' case except the fieldsets have a class and the legend has a slightly different class. And here's our JS:

 <script>  
       $(document).ready(function() {  
             $('.collapsible').each(function(){  
                   $(this).click(function(){  
                         doAccordian($(this).parent());  
                   });  
             });  
             $('.collapsed').children('legend.collapsible').each(function(){  
                   $(this).siblings().slideToggle("fast");  
             });  
       });  
       function doAccordian(fset){  
             if ($(fset).hasClass('collapsed')) {  
                   // open me up..  
                   $(fset).children('legend.collapsible').each(function(){  
                         $(this).siblings().slideToggle("fast");  
                   });  
                   $(fset).removeClass('collapsed');  
                   // close all others ..  
                   $(fset).siblings('fieldset').each(function(){  
                         if (!$(this).hasClass('collapsed')) {  
                               $(this).children('legend.collapsible').siblings().slideToggle("fast");  
                               $(this).addClass('collapsed');  
                         }  
                   });  
             }  
             else {  
                   // close me down..  
                   $(fset).children('legend.collapsible').each(function(){  
                         $(this).siblings().slideToggle("fast");  
                   });  
                   $(fset).addClass('collapsed');  
             }  
       }  
 </script>  

So, what does all this do? On page load, we register an on click event handler to call the 'doAccordian' function, passing the fieldset (the click is on the legend remember). Then, we collapse all the fieldsets marked (by class) as collapsed. Given our HTML above, 'Fieldset 2' will remain expanded as if we were setting a 'default' expanded fieldset.


So, we can now look at 'doAccordian'; this takes the fieldset Object and executes one of two paths

1. Fieldset has a class of 'collapsed', i.e. its already in a collapsed state.Therefore we want to expand it and collapse all other expanded fieldsets. we do this, as above, by using "slideToggle" on the legend's siblings (within the fieldset). Then we remove this fieldsets 'collapsed' class. Finally we look for the fieldset's sibling fieldsets and for those without the 'collapsed' class we collapse them and then add the 'collapsed' class.
2. Fieldset is has no 'collapsed' class (i.e. already open) therefore all we need to do is simply close it

One aside; the reason I used a different class for the legend in each of the 2 behaviours is so that i scould use the 2 side by side in the same site, i.e. some pages will use Accordian behaviour and some will use 'Optional Collapse' behaviour.

Mobile Test

Some mobile content

That Syncing Feeling

sorry for the terrible pun, but having got the new HTC One X i needed to get all my contacts from my existing Desire.

Now, HTC have their own HTC Sync app which is fine if all you use is Outlook. It wont (as far as i can tell) sync down all your SIM, Phone etc contacts. Why would you want to do that??

Oh yes, and when using HTC Sync on Windows Vista (yes, i know) it will misbehave. if you plug you phone in but it doesn't find your PC, unmount the phone, stop Sync and kill the 'adb' process via Task Manager, then restart Sync and connect the phone.

The other option is to use the 'Transfer' app. This option is available when you set up your phone or any time later on. Basically, after selecting the other make/model of the other phone it connects to it via Bluetooth and imports contacts. Oddly, it didnt pull over SIM contacts.

So, the alternative is a little more manual; Export/Import.

Export

To export, go to the Phone dialler bring up the menu, select manage contacts and export. export all your phone, SIM etc contacts to their own VCFs. Copy those VCFs to your computer.

Import

To import to the new phone copy the VCFs to the root of the phone's drive. Next, unmount and disconnect the phone (this isn't written down anywhere but came from a nice man at HTC).

Go to the dialler, and go to 'People', select the menu, manage contacts and import. You can then import the VCFs individually or en-masse.

New One-X

Ok, just got a new One-X through from Vodafone. As a couple of years ago I got bang-on service from thier Twitter support service. Top marks. Phone's arrived on time.

Things i must do:

1. Charge the phone
2. get all my old contacts etc off the old phone (HTC Sync)
3. protect the new phone.

One thing didn't do with the last phone is look after it; i added a screen protector and that was it. The result? Knackered camera and scratched to h*ll.

So this time i've got a 'bumper', screen protector and even a wallet to put it in.

Now to get the stuff off the Desire using Sync...

Repairing a MySQL Table

*this applies only to a MyISAM type table*

This is from the MySQL Manual.

To repair table X:

1. Lock the table
Ref: MySQL Manual

lock tables X as read;

2. flush the table

Ref: MySQL Manual

flush tables X;

3. backup the table

Copy the 3 table data files to a suitable place.

4. Repair the table

Ref: MySQL Manual

repair table X quick;

(generally, its the index which is kaput so the above QUICK is sufficient. see the link for other options).

5. Unlock the table

Ref: MySQL Manual

unlock tables;

Done (hopefully).

Good Customer Services and Twitter

I've been waiting for a while now to change my phone; my old brick (a scratched and battered Nokia which has to be dismembered to be turned on or off) is well past it's sell by date and my Vodafone contracrt ran out in October.

So, i've been beating off the iPhone peer-pressure and waiting to get a decent Android phone. The one i've been waiting for is the HTC Desire.

Anyway, got an email from Vodafone on Thursday (1st April as it happens!) with a link to upgrade; the phone was FREE and the data plan was about £30 Brilliant. Ordered the upgrade straight away and got some emails from Vodafone confirming my order.

Weekend passes, during which i'd been charged for the new plan (which i can't really take advantage of with my current brick), but no dispatch emails.

Tuesday morning, email in my inbox. Apologies, but due to high demand, we're out of stock, and it'll take 7-10 days. Balls.

Tried calling Vodafone; busy; no operators.

So, having recently seen Vodafone's latest twitter accounts in action I tweeted VodafoneUKDeals. Short time later I got some replies expressing their dismay.

Another short time later, I got a phone call. They'd tracked down my order from their 'system' and rang to see if they could help. Two conversations later and my previous upgrade is cancelled, with excess charge refunded, a new order placed, and a shiny new Desire is being sent (with confirmation text). Due tomorrow!

I have to say; truly unbelievable service. Gobsmacked.