bits4beatsIdee e pensieri di Roberto Rossi

Parlare di Firebug è ormai inutile, lo conoscono tutti.

E’ invece di qualche giorno fa (esattamente il 4 febbraio) la notizia della versione 1.3 Lite di Firebug per Chrome.
La versione Lite consente agilmente di fare debugging del codice css e html della pagina web (ma non di quello Javascript) ma senza poter intervenire direttamente e modificarla al volo.

Qui sotto potete vedere lo screenshot dell’estensione appena installata e funzionante sul mio Chrome per Linux.

Ieri mi sono dilettato nella realizzazione di una toolbar di servizio per il software CMS a cui sto lavorando da oltre un anno.

Alcuni anni fa, lavorando con Symfony, avevo trovato geniale l’idea degli sviluppatori di arricchire il framework di una debug toolbar che aiutasse il webmaster nella realizzazione e nel troubleshooting del sito stesso. Ecco un’immagine di questa toolbar presa direttamente dal sito ufficiale di Symfony.

La comodità di questa barra è quella di poter essere minimizzata o rimossa e contiene tutte le informazioni principali di cui un webmaster può avere bisogno durante il ciclo di sviluppo del sito stesso.

Così, spinto dalla necessità di averne una anche nel nostro CMS, mi sono cimentato nelle funzioni di animazione di JQuery e in qualche proprietà CSS. Il mio intento non era quello di replicare la barra di Symfony ma almeno di emularne i comportamenti base.

Ecco qui il risultato.

In realtà, dopo aver incluso correttamente la libreria jquery nell’head del vostro documento html e aver scelto una posizione per le immagini utilizzate nei link di chiusura e apertura della toolbar, il codice Javascript necessario al suo funzionamento si riduce a queste poche righe:

	<style>

		#toolbar {
			position: fixed;
			width: 100%;
			height: 60px;
			top: -40px;
			display: block;
			border-bottom: 2px solid black;
			opacity:0.9;
			background-color: #E5E5E5;
		}

		#toolbar #close {
			position:absolute;
			top: 40px;
			display:none;
		}

		#toolbar #open {
			position:absolute;
			top: 40px;
		}

		#toolbar #remove {
			position:absolute;
			top: 40px;
			left: 20px;
		}

		#toolbar img {
			border: 0px;
		}

		#toolbar #toolbar_text {
			font-size: 10px;
			font-family: 'Verdana',sans-serif;
			position:absolute;
			top: 2px;
			left: 2px;
			width: 100%;
		}

		#toolbar #toolbar_links {
			font-size: 10px;
			font-family: 'Verdana',sans-serif;
			position:absolute;
			top: 42px;
			left: 40px;
			width: 100%;
		}

	</style> 

	<div id="toolbar">
		<a href="javascript:;;" id="close" title="close"><img src="arrow_up.png"/></a>
		<a href="javascript:;;" id="open" title="open"><img src="arrow_down.png"/></a>
		<a href="javascript:;;" id="remove"  title="remove"><img src="delete.png"/></a>

		<div id="toolbar_text">
			A text <strong>inside</strong> the toolbar
		</div>

		<div id="toolbar_links">
			| <a href="javascript:;;">just a simple link</a>
		</div>
    	</div>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#close').bind('click', function() {
				$('#toolbar').animate({top:"-40px"}, 400 );
				$('#close').hide();
				$('#open').show();
			});

			$('#open').bind('click', function() {
				$('#toolbar').animate({top:"0px"}, 400 );
				$('#close').show();
				$('#open').hide();
			});

			$('#remove').bind('click', function() {
				$('#toolbar').hide();
			});
		});
	</script>

Il codice completo è disponibile a questo indirizzo per il download.

Happy Javascript a tutti!

P.S: tale toolbar è stata testata con Firefox 3.0 e Chrom 4.0 per Linux (ma ci sono buone possibilità che funzioni con quasi tutti i browser viste le caratteristiche cross-browser del framework JQuery).