Some time ago I was trying to make a project/icons scroller, to refresh our online portfolio. The idea was having two rows of icons to scroll with a little delay and an elastic effect. Of course, I didn’t want to use Flash for this, so I went for MooTools.

I’ve never implemented this script on our site and the script itself it quite basic and unoptimized. However I thought of sharing it here, with the hope it might be helpful to someone out there.

See a working example

Download the source code (51k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

As some of you might have noticed, since last month I’ve changed the JavaScripts on this site. I’ve swtiched to MooTools. I’ve used it quite often in my latest projects and I must say I’m finding it pretty easy to use.

For all those who liked the old drop-down script, I’m now posting an updated version with a short tutorial.

————————

1. Wrap everything inside a DOM Ready Event.

window.addEvent('domready', function() {
	// CODE HERE

});
 

2. Define which Html element (”myPanel”) will be affected by the drop-down effect. You might want to hide it, so that it starts collapsed.

var mySlide = new Fx.Slide('myPanel');
mySlide.hide();
 

3. The following lines add a Click event to the “Open Panel” link and add desired effect to open the drop-down panel, fade-out the “Open Panel” link and fade in the “Close Panel” link.

var fx = new Fx.Styles($('openPanel'), {duration:500, wait:false});
$('openPanel').addEvent('click', function(e){
   mySlide.toggle();
 	fx.start({
   	'opacity': 0
   }).chain(function(){
     	$('openPanel').setStyle('display', 'none');
       $('closePanel').setStyle('display', 'block');
       $('closePanel').setStyle('opacity', '0');
       fx1.start({
           'opacity': 1
       });
   });
});
 

4. Lastly, we need some other code to handle the “Close Panel” link, which mirrors the code above.

var fx1 = new Fx.Styles($('closePanel'), {duration:500, wait:false});
$('closePanel').addEvent('click', function(e){
	mySlide.toggle();
   fx1.start({
   	'opacity': 0
  	}).chain(function(){
   	$('openPanel').setStyle('display', 'block');
      	$('closePanel').setStyle('display', 'none');
       $('openPanel').setStyle('opacity', '0');
       fx.start({
       	'opacity': 1
       });
   });
});
 

Please see also MooTools own documentation and demos for the Fx.Slide and the Fx.Styles behaviours.

Download the Source Code (24k ZIP)

————————

Updated on 22.01.2008
Today my friend Luca, who is a pro developer, emailed me a modified version of the above script, that he has kindly corrected and improved. He also has shortened the script, making it a lot easier.

window.addEvent('domready', function() {
	// Label for link
	var labelOpen='Open Panel';
	var labelClose='Close Panel';

	// Set slide and styles effects
	var mySlide = new Fx.Slide('myPanel').hide();
	var fx = new Fx.Styles($('linkPanel'), {duration:500, wait:false});
	$('linkPanel').addEvent('click', function(e){
		mySlide.toggle();
		$('linkPanel').toggleClass('openPanel');
		fx.start({
			'opacity': 0
		}).chain(function(){
			if($('linkPanel').hasClass('openPanel')) $('linkPanel').setHTML(labelClose);
			else $('linkPanel').setHTML(labelOpen);
			fx.start({'opacity': 1})
		});
	});
});
 

Below is the link to download Luca’s new version:

Download the new Source Code (24k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Many people asked for multiple drop-downs panels within one page or multiple links to open/close a single drop-down panel.

I made a little variation to the original script to cover both cases.
Hope this helps.

Download the Source Code (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

How the heck did I make the drop down panel above?
Ok, maybe it’s a kids game for some of you, but I guess there’s someone out there who might be interested. For these (few) people, here’s the tute.

This is all web standards compliant, keeping my Xhtml clean and valid, and so my Css stylesheet.
The interaction is built using some very useful (and yet very well-knowed) free Javascript libraries, released under a GPL license.
To be specific, you will need the following libraries:

• Prototype
• Script.aculo.us
• Behaviour

that you can download from their respective web sites.

So, now that we got the libraries, let’s include them in our Html document, this way:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/behaviour.js"></script>

Let’s start with the link:

<a id="open" href="javascript:void(0);" >Open</a> 
<a id="close" href="javascript:void(0);" style="display:none;">Close</a> 

<div id="contents" style="display:none;">
     bla bla bla bla bla bla
</div> 

Now, normally, to give a link a Javascript behaviour you would use the onclick tag attribute.
However, it’s a old and dirty way to manage Javascript behaviours, which might also cause validation problems.
So, we’re not gonna use it anymore!

Behaviour comes in our help, giving us a clean method to add Javascript behaviours to Html elements, using Css selectors.
We have to define some rules, as follows:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
      new Effect.Fade(this);
      Effect.Appear('close', {delay: 1});
    }
  },
  '#close' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
      new Effect.Fade(this); 
      Effect.Appear('open', {delay: 1});
    }
  }
};

<script type="text/javascript" src="/js/rules.js"></script>

Now, Behaviour requires us to insert the following code, in order to run correctly and apply the rules:

  <script type="text/javascript">
   // <![CDATA[
     // Behaviour Rules
    Behaviour.register(myrules);
   // ]]>
   </script>

So, is it working?

The result should look like the drop down above (obviously, you have to add you own Css to spice it up and make it look cool!!).

Well, you’ve seen how a bunch of lines of code can help you create very nice effects, easiliy and in a standard compliant way (you don’t always need Flash).

Good coding to all of you!!

—————————
Updated 16.07.2006:
Download the Source Code (28k ZIP).

—————————
Updated 20.12.2006:

Many people asked for multiple drop-downs panels within one page or multiple links to open/close a single drop-down panel.

I made a little variation to the original script to cover both cases.
Hope this helps.
Download the Source Code (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Circa due o tre settimane fa, ho scritto un piccolo script Javascript per realizzare slideshow di immagini, senza ricorrere a Flash.
Le ragioni, e i vantaggi, sono molteplici: dimensioni ridotte, conformità agli standard xhtml e css, funziona senza alcun plugin, facile da modificare al volo, integrabile in siti html esistenti, ecc…

Dopodichè, me ne sono dimenticato e ho lasciato i files là da qualche parte sul server.

Oggi, spinto dalla richiesta di un cliente, ho rispolverato quello script e, visto che avevo un’oretta da spendere, l’ho messo a posto, commentando il codice e ripulendolo un po’.

Dato che lo trovo abbastanza utile, ho deciso di dargli un nome, di confezionarlo e distribuirlo su Jek2k.com, nella speranza (o illusione) che possa essere utile anche a qualcuno di voi là fuori.

Ho anche pubblicato online una demo e una paginetta dedicata, da cui è possibile scaricare i files.

E’ certamente perfezionabile, magari ha anche qualche bug, ma lo scopo è semplicemente condividere una cosa su cui ho speso del tempo, perchè possiate trarne beneficio e da là sviluppare quacosa di vostro. E magari anche migliore.
Spero che vorrete condividere con me le vostre creazioni…

ciao

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

For those of you out there who still don’t know Lightbox, this is a powerful and very functional Javascript utility to display your images. Clean, light-weight, but yet very effective.
The only fault of Lightbox is that its Css stylesheet doesn’t validate, because of some proprietary rules for Explorer and Mozilla. However, if you’re not obsessed about standards or addicted to validation, I believe you will find Lightbox very useful and be using it in many of your projects.
You can get the 2.0 release on huddletogether.com.

Hemingway is a quite a popular WordPress theme. This site is also based on the Hemingway theme, obviously spiced up and changed to meet my needs.
You can download Hemingway from warpspire.com/hemingway.

So, now let’s see hot to make them work together.
Please note that this tutorial assumes that you have WordPress installed in the /wordpress/ folder on your server. If you installed it in another directory, keep in mind that you have to change folder and file paths to match your specific configuration.

First, you need to install the Hemingway theme.
All you need to do is following the instructions included in the package.

Quick recap:
1. unzip the package,
2. upload the hemingway folder to your server with an FTP client,
3. put it in the /wordpress/wp-content/themes/ folder,
4. go to your WP admin panel,
5. in the Presentation section, select and activate the Hemingwat theme,
6. go back to your blog, take a look around and congrat yourself: you made it!

If these few instrucions don’t solve your problem, please don’t email: I’ m a WP and Hemingway user just like you. You can get quality support at discuss.warpspire.com.

Next step is getting Lighbox to work with Hemingway.
And this is a little more complicated.

Let’s go step by step:
1. unzip the package,
2. upload the js folder to you server with an FTP client,
3. put it inside your /wordpress/wp-content/themes/hemingway/ folder,

4. in the Lightbox package you have an images folder.
Upload the content of this folder to the already existing /wordpress/wp-content/themes/hemingway/images/ folder.
This will add the required Lightbox images to the Hemingway standard installation.

5. Same thing with the css folder.
Pick the lightbox.css file inside it and upload it to your /wordpress/wp-content/themes/hemingway/styles/ folder.
Using this folder structure, you don’t need to change anything in the Lightbox stylesheet.

Unfortunately, you will still need to change a couple of lines in the main lightbox.js file.
6. open the lightbox.js file with a text editor or with Dreamweaver,
7. at lines 62 and 63 you need to change

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

to this

var fileLoadingImage = "/wordpress/wp-content/themes/hemingway/images/loading.gif";
var fileBottomNavCloseImage = "/wordpress/wp-content/themes/hemingway/images/closelabel.gif";

This will adapt Lightbox to the Hemingway folder structure.

Now we need to integrate Lightbox,
8. in the /wordpress/wp-content/themes/hemingway/ locate the header.php file ,
9. open it in a text editor or in Dreamweaver,
10. in the head of the document, add these lines:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/scriptaculous.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/lightbox.js"></script>

11. always in the head of the header.php file add this line:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/lightbox.css" type="text/css" media="screen" /> 

Now, let’s try it!
12. open your WP admin panel and write a new post,
13. insert a link to an uploaded image, using this sintax:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Obviously you need to change this line of code to match your image path.

14. Go to the newly posted artcicle and test the link. Is it working?
If yes, then you made it!
If it’s not working, either you messed up something or my tutorial is wrong.
Remember to run the test with a modern browser, don’t even try to do it with IE or older browsers!

Please refer to this site to get Lightbox-specific help.
For Hemingway and Lightbox integration issues, you can comment this post, email me or simply analyze and copy the source code of my WordPress pages!

Hope you will find this helpful. Bye.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Innanzitutto ho sfruttato esclusivamente gli standard, mantenendo il mio codice Xhtml pulito e valido, così come il mio Css.
L’interazione è stata realizzata sfruttando alcune (ormai molto note) librerie Javascript gratuite e distribuite sotto licenze di tipo GPL.
In particolare, vi serviranno le librerie di:

• Prototype
• Script.aculo.us
• Behaviour

che potete tranquillamente scaricare dai rispettivi siti web.

Prima di tutto, ora che abbiamo le librerie, includiamole nel nostro documento Html, così:

<script src="/js/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/scriptaculous.js" type="text/javascript"><!--mce:1--></script>
<script src="/js/behaviour.js" type="text/javascript"><!--mce:2--></script>

Partiamo dal link:

<a id="open" href="javascript:void(0);">Open</a>
<a id="close" style="display:none;" href="javascript:void(0);">Close</a>

<div id="contents" style="display:none;">
     bla bla bla bla bla bla</div>

Qui ci viene in aiuto Behaviour, che ci dà la possibilità di abbinare dei comportamenti (appunto) agli elementi Html utilizzando i selettori Css, attraverso la definizione di regole (rules).In questo caso le nostre regole saranno:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
    }
  },
  '#close : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
    }
  }
};

<script src="/js/rules.js" type="text/javascript"><!--mce:3--></script>

Ora, Behaviour richiede che venga inserito il seguente codice, affinchè le regole scritte in precedenza vengano applicate:

  <script type="text/javascript"><!--mce:4--></script>

Il risultato dovrebbe essere simile al drop down che vedete su questo sito (ovviamente dopo dovrete metterci del vostro e aggiungere un po’ di Css!!).

Beh, è evidente che con queste poche righe di codice potete realizzare effetti molto gradevoli e dare un po’ di pepe alle vostre pagine Html (Flash non è sempre l’unica soluzione…).

—————————
Updated 16.06.2006:
Scarica il sorgente (28k ZIP).

—————————
Updated 20.12.2006:

In molti avete chiesto come fare per inserire più drop-down nella stessa pagina o come fare per avere più link che “comandano” lo stesso drop-down.

Ho fatto una variante dello script originale per coprire entrambe le esigenze.
Spero che vi sia di aiuto.

Scarica il sorgente (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.