Javascript

Se stai cercando approfondimenti e indicazioni utili per esplorare tutte le potenzialità del linguaggio Javascript, sei nel posto giusto!

Framework alternativi a jQuery, Prototype e Mootools

di Massimo Selva in Javascript

YUI Library e relativi esempi

KnockoutJS e relativi esempi

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 7 Marzo 2011

Corretta visualizzazione script ‘Coin-Slider’ durante caricamento

di Massimo Selva in Javascript

La momentanea visualizzazione delle immagini, utilizzata dallo script JavaScript ‘Coin-Slider’ durante il caricamento, è sicuramente uno dei problemi più fastidiosi di questo strumento jQuery.

Per risolverlo, occorre utilizzare questa accortezza: aggiungere poche, ma preziose indicazioni al momento dell’inserimento HTML.

Nello specifico:

<div id='coin-slider' style="width:1000px; height:250px; overflow:hidden; position:relative">
<a target='_blank' href='http://www.abcdef.com'><img src='/qwe/asd/zxc.jpg' /><span>Something...</span></a>
...
</div>

<a target='_blank' href='http://www.abcdef.com'><img src='/qwe/asd/zxc.jpg' /><span>Something...</span></a>

...

</div>

Aggiungete la parte di codice in corsivo, modificando i valori dimensionali a vostro piacimento. Essi determineranno quanto mostrare delle immagini prima del completo caricamento. Per esempio, indicando per entrambi il valore ‘0px’, sarà possibile nascondere completamente le immagini.

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 3 Gennaio 2011

Personalizzare i moduli con Niceform

di Massimo Selva in Javascript

nice_forms

Nel contesto di quella che oramai può essere definita “la guerra dei browser” per la conquista del WEB 2.0, avviciniamoci a questa nuova era migliorando l’aspetto dei nostri form (e non solo!) con qualche semplice passo e senza mettere mani nei CSS…

Il parser del browser, come molti di noi sappiamo, quando incontra alcuni tag HTML come <FORM …> e <input type=”submit” …>, renderizza degli oggetti che, se non definito diversamente con dei CSS, saranno quelli utilizzati dal sistema operativo (i cosiddetti “gui toolkits“).

Alcuni browser, come Safari, hanno delle librerie di render “eye-candy” per questi elementi, ma per rendere l’aspetto dei FORM di immissione esteticamente più accattivanti con la maggior parte degli internauti è necessario usare i CSS. Emblematiq però ha realizzato una facilissima libreria per rendere i form più belli in pochi semplici passi sfruttando JavaScript (la libreria NON è compatibile con IE 6).

Vediamo infatti come intervenire sulla nostra pagina web (o sul template in uso sul sito):

Scaricare l’ultima versione di “niceforms” qui, Fare l’upload sul nostro sito dei nuovi file dal file compresso appena scaricato (nf-standard-blue.psd è solo per le personalizzazioni e si può fare a meno di tenerlo sul nostro sito)

Immettere queste due semplici righe tra i tag <HEAD> e </HEAD>:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>

1 2	<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>

Cambiare il class=”niceform” dei FORM negli HTML che volete rendere “più belli”

<form …. class=”niceform” >

1	<form …. class=”niceform” >

niceforms_code

Demo: http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 28 Settembre 2010

Mappe navigabili in Javascript

di Massimo Selva in Javascript

Problema:

La richiesta di geolocalizzazione è sempre più ampia, pertanto è necessario trovare gli strumenti più semplici per ottenere mappe usabili dall’utente. Se fino ad ora si utilizzava prevalentemente Flash, le potenzialità di Javascript stanno prendendo sempre più piede.

Soluzione 1 – GoogleMap + JQuery:

L’integrazione di questi 2 strumenti consente per ora limitate possibilità al programmatore. Ho trovato in particolare 3 siti interessanti, ognuno dei quali ha sviluppato un proprio plugin grazie al quale richiamare le funzioni GMap direttamente con JQuery, alleggerendo la quantità di codice da scrivere e dando la possibilità di integrare, per quanto possibile, alcuni effetti Javascript (ancora piuttosto pochi e semplici in realtà):

gMap: creazione, settaggio, visualizzazione e semplice alterazione di una google map; nessun effetto grafico particolarmente interessante;
Google Maps JQuery: come il precedente, ma le possibili funzioni sono molte di più; da segnalare la possibilità di aggiungere layer, linee ed aree;
jMapping: utilizza una procedura più complessa, a partire dall’installazione del plugin; un interessante funzionalità è sicuramente quella della paginazione delle mappe, visibile qui.

Soluzione 2 – Immagini mappali + JQuery:

Un altro strumento, più simile a come opera Flash, potrebbe essere l’utilizzo di puro codice Javascript, affiancato da immagini presenti direttamente sul server locale. Un esempio vale più di mille parole: http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps

Questo gruppo di programmatori ha sfruttato JQuery per creare una mappa con zoom, punti di interesse cliccabili con pop-up alla quale aggiungere testo, link, etc.

Conclusioni personali:

In conclusione posso affermare che JQuery e Google Map sono ancora agli inizi del loro viaggio insieme; purtroppo la complessità ela scarsa accessibilità dei dati gestiti da Google Map, soprattutto i layer contenenti le immagini geografiche, non consentiranno di sfruttare appieno le potenzialità del framework Javascript. Ritengo invece la seconda soluzione davvero molto bella e piena di potenzialità; certo, non usa Google Maps, ma può essere molto utile per siti dove è richiesta una geolocalizzazione limitata, come visibile negli esempi sul sito di riferimento. Ho letto tutta la spiegazione su come implementare lo script e commenti entusiasti di utenti in grado di utilizzare un loro CMS per inserire via back-end i punti sulla mappa, sfruttando HTML, XML o altro per recuperare tali dati. Credo che questo si avvicini maggiormente alla richiesta iniziale.

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 7 Luglio 2010

Esempi di Accordion

di Massimo Selva in Javascript

Accordion Samples

Questa pagina fornisce esempi di come modificare il comportamento e lo stile di accordions.

Comportamento di default e Stile
Impostazione del Pannello di Default
Attivare la navigazione da tastiera
Cambiare tasti di navigazione
Attivare i collegamenti con la navigazione da tastiera
Regolare la durata dell’animazione e FPS
Scegliere la transizione dell’Animazione
Disabilitare l’Animazione
Pannelli ad altezza variabile
Partenza con tutti i pannelli chiusi
Apertura e chiusura dei pannelli programmata
Uso di blocchi diversi dai div
Stilizzare con diversi nomi di classi CSS
Stampare il contenuto di un Accordion
Generare un Accordion con dati Spry xml

Most of the examples use this basic markup structure and JavaScript:

&lt;script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"&gt;&lt;/script&gt;

&lt;link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /&gt;

...

&lt;div id="Acc1" class="Accordion"&gt;

  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;Panel 1&lt;/div&gt;
    &lt;div class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;

  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;Panel 2&lt;/div&gt;
    &lt;div class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;Panel 3&lt;/div&gt;

    &lt;div class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;Panel 4&lt;/div&gt;

    &lt;div class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

var acc1 = new Spry.Widget.Accordion("Acc1");
&lt;/script&gt;

...

<div class="AccordionPanelTab">Panel 1</div>

...

</div>

<div class="AccordionPanelTab">Panel 2</div>

...

</div>

<div class="AccordionPanelTab">Panel 3</div>

...

</div>

<div class="AccordionPanelTab">Panel 4</div>

...

</div>

var acc1 = new Spry.Widget.Accordion("Acc1");

</script>

Each example will show only the set of changes to the markup and JS above, that were necessary to enable the behavior.

Default Behavior and Style

This is an example of what an accordion with the markup above would look like using the default styles from SpryAccordion.css. By default, the accordion will expand horizontally to fit its parent container, unless you use CSS to constrain the width of the top-level element (div) of the Accordion. Animation is enabled by default, and the heights of all the Accordion content panels are the same.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

Setting the Default Panel

This is an example of how to create an accordion that has its 3rd panel open by default.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

This is accomplished by passing the zero-based index of the panel into the Accordion’s constructor with the “defaultPanel” option:

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: 2 });
&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: 2 });

</script>

Enabling Keyboard Navigation with tabindex

This is an example of an Accordion which has the ability to gain focus and has keyboard navigation enabled.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To enable the ability for the accordion to gain keyboard focus and open panels via the keyboard, place a tabindex attribute on the top-level accordion div element. You can give the accordion focus by tabbing to it, or by clicking on a panel tab. After the accordion has keyboard focus, you can use the Up and Down arrow keys to switch between the different panels.

...

&lt;div id="Acc1" class="Accordion" tabindex="0"&gt;

...

&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1");
&lt;/script&gt;

...

...

</div>

var acc1 = new Spry.Widget.Accordion("Acc1");

</script>

Changing Navigation Keys

This is an example of how to override the default up/down arrow key codes used for navigating. The accordion below uses the ‘n’ and ‘p’ keys to open the next or previous panel.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To override the default key codes, specify the new keycodes with the “nextPanelKeyCode” and “previousPanelKeyCode” Accordion constructor options:

...


&lt;script type="text/javascript"&gt;

// Keycode for 'n' is 78
// Keycode for 'p' is 80

var acc1 = new Spry.Widget.Accordion("Acc1", { nextPanelKeyCode: 78, previousPanelKeyCode: 80 });


&lt;/script&gt;

...

// Keycode for 'n' is 78

// Keycode for 'p' is 80

var acc1 = new Spry.Widget.Accordion("Acc1", { nextPanelKeyCode: 78, previousPanelKeyCode: 80 });

</script>

Enabling Keyboard Navigation with Links

This is an example of an Accordion that uses <a> tags within its AccordionPanelTab elements to enable keyboard navigation via the tab key. To open a tab, use the tab key until the link in the panel tab is selected, then hit the return key to activate it.

Panel 2 Content

Panel 3 Content

Panel 4 Content

To enable this behavior, remove any tabindex attribute that may be on the top-level Accordion element, and simply embed your <a> tags in the panel tab:

...

&lt;style type="text/css"&gt;

.AccordionPanelTab a {
	display: block;
	color: black;
	text-decoration: none;
}

&lt;/style&gt;

...

&lt;div id="Acc1" class="Accordion"&gt;

  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;&lt;a href="#p1"&gt;Panel 1&lt;/a&gt;&lt;/div&gt;
    &lt;div id="p1" class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;&lt;a href="#p2"&gt;Panel 2&lt;/a&gt;&lt;/div&gt;

    &lt;div id="p2" class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;

    &lt;div class="AccordionPanelTab"&gt;&lt;a href="#p3"&gt;Panel 3&lt;/a&gt;&lt;/div&gt;
    &lt;div id="p3" class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;div class="AccordionPanelTab"&gt;&lt;a href="#p4"&gt;Panel 4&lt;/a&gt;&lt;/div&gt;

    &lt;div id="p4" class="AccordionPanelContent"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { enableKeyboardNavigation: false });
&lt;/script&gt;

...

.AccordionPanelTab a {

display: block;

color: black;

text-decoration: none;

}

</style>

...

<div class="AccordionPanelTab"><a href="#p1">Panel 1</a></div>

...

</div>

<div class="AccordionPanelTab"><a href="#p2">Panel 2</a></div>

...

</div>

<div class="AccordionPanelTab"><a href="#p3">Panel 3</a></div>

...

</div>

<div class="AccordionPanelTab"><a href="#p4">Panel 4</a></div>

...

</div>

var acc1 = new Spry.Widget.Accordion("Acc1", { enableKeyboardNavigation: false });

</script>

The “enableKeyboardNavigation: false” constructor option is necessary to get around the problem in IE where querying for the presence of the tabindex attribute, via the DOM API, always reports that one exists, even if it is not in the markup.

Note that the example above is setup so that clicking on the links when JavaScript is disabled, takes you to the AccordionPanelContent immediately below the AccordionPanelTab.

Adjusting Animation Duration and FPS

This is an example of how to change the duration and/or the frames per second (fps) of the Accordion’s open/close panel animation.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

You can pass the duration of the animation in milliseconds using the “duration” constructor. You can also adjust the frame rate (fps) by specifying the number of frames per second:

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { duration: 250, fps: 90 });

&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { duration: 250, fps: 90 });

</script>

Setting the Transition/Easing of the Animation

The Accordion’s panel animation code uses a transition function to calculate the size of the panel at each frame of the open/close animation. The signature of this function matches the signature of the transition functions defined in SpryEffects.js and in Robert Penner’s Easing Library. This means that it is possible to use a transition function from either of those libraries to animate the Accordion panels.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

To change the transition function, you simply include the JS file that defines the function and pass the function into the Accordion’s constructor with the “transition” option:

&lt;script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryEffects.js"&gt;&lt;/script&gt;
&lt;script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"&gt;&lt;/script&gt;

&lt;link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /&gt;

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { transition: Spry.circleTransition });

&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { transition: Spry.circleTransition });

</script>

Turning Animation Off

This is an example of an accordion with panel animations turned off.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

This is accomplished by passing a false value for the “enableAnimation” constructor option. :

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { enableAnimation: false });
&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { enableAnimation: false });

</script>

Variable Panel Heights

This is an example of how to create an accordion with varying panel heights.

Panel 1

Panel 2

Panel 3

Panel 4

You enable variable height panels by passing a false as the value of the “useFixedPanelHeights” constructor option:

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });

</script>

In this mode, the Accordion automatically sizes the height of each content panel to fit all of the content within it.

Starting with All Panels Closed

This is an example of how to create an accordion that is initially closed.

Panel 1

Panel 2

Panel 3

Panel 4

This feature is only supported when using variable height panels, so you must pass a false into the Accordion’s constructor for the “useFixedPanelHeights” constructor option, and a -1 for the “defaultPanel” option:

...

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
&lt;/script&gt;

...

var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });

</script>

Programatically Opening and Closing Panels

This is an example of how to programatically open or close the panels of an Accordion. Click on the links below to manipulate the accordion below:

Open by Simple Navigation: First | Previous | Next | Last

Open by Panel Index: 0 | 1 | 2 | 3

Open by Panel ID: panel1 | panel2 | panel3 | panel4

Close: Current Panel

Panel 1

Panel 2

Panel 3

Panel 4

Note that the programatic closing of the current panel is only supported when using variable height panels. Here’s the code for the example above:

...

&lt;p&gt;Open by Simple Navigation:
  &lt;a href="#" onclick="acc1.openFirstPanel(); return false;"&gt;First&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPreviousPanel(); return false;"&gt;Previous&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openNextPanel(); return false;"&gt;Next&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openLastPanel(); return false;"&gt;Last&lt;/a&gt;

&lt;/p&gt;

&lt;p&gt;Open by Panel Index:
  &lt;a href="#" onclick="acc1.openPanel(0); return false;"&gt;0&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel(1); return false;"&gt;1&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel(2); return false;"&gt;2&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel(3); return false;"&gt;3&lt;/a&gt;

&lt;/p&gt;

&lt;p&gt;Open by Panel ID:
  &lt;a href="#" onclick="acc1.openPanel('panel1'); return false;"&gt;panel1&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel('panel2'); return false;"&gt;panel2&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel('panel3'); return false;"&gt;panel3&lt;/a&gt; |
  &lt;a href="#" onclick="acc1.openPanel('panel4'); return false;"&gt;panel4&lt;/a&gt;

&lt;/p&gt;

&lt;p&gt;Close:
  &lt;a href="#" onclick="acc1.closePanel(); return false;"&gt;Current Panel&lt;/a&gt;
&lt;/p&gt;

&lt;div id="Acc1" class="Accordion" tabindex="0"&gt;

  &lt;div id="panel1" class="AccordionPanel"&gt;

  ...

  &lt;/div&gt;
  &lt;div id="panel2" class="AccordionPanel"&gt;

  ...

  &lt;/div&gt;
  &lt;div id="panel3" class="AccordionPanel"&gt;

  ...

  &lt;/div&gt;

  &lt;div id="panel4" class="AccordionPanel"&gt;

  ...

  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
&lt;/script&gt;

...

<p>Open by Simple Navigation:

<a href="#" onclick="acc1.openFirstPanel(); return false;">First</a> |

<a href="#" onclick="acc1.openPreviousPanel(); return false;">Previous</a> |

<a href="#" onclick="acc1.openNextPanel(); return false;">Next</a> |

</p>

<p>Open by Panel Index:

<a href="#" onclick="acc1.openPanel(0); return false;">0</a> |

<a href="#" onclick="acc1.openPanel(1); return false;">1</a> |

<a href="#" onclick="acc1.openPanel(2); return false;">2</a> |

</p>

<p>Open by Panel ID:

<a href="#" onclick="acc1.openPanel('panel1'); return false;">panel1</a> |

<a href="#" onclick="acc1.openPanel('panel2'); return false;">panel2</a> |

<a href="#" onclick="acc1.openPanel('panel3'); return false;">panel3</a> |

<a href="#" onclick="acc1.openPanel('panel4'); return false;">panel4</a>

</p>

<p>Close:

<a href="#" onclick="acc1.closePanel(); return false;">Current Panel</a>

</p>

...

</div>

...

</div>

...

</div>

...

</div>

var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });

</script>

Using Other Block Level Elements

This example demonstrates the ability to use other block level elements, other than divs, to build the structure of an Accordion. It dosen’t matter what tags are used to build up the structure of the Accordion. What does matter is that the elements that make up the structure are styled as block elements, and that they are properly nested.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4

one
two
three

&lt;script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"&gt;&lt;/script&gt;

&lt;link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /&gt;

&lt;style type="text/css"&gt;

span.AccordionPanelContent {
  display: block;
}


&lt;/style&gt;

...

&lt;div id="Acc1" class="Accordion" tabindex="0"&gt;
  &lt;div class="AccordionPanel"&gt;

    &lt;h3 class="AccordionPanelTab"&gt;Panel 1&lt;/h3&gt;
    &lt;span class="AccordionPanelContent"&gt;

    ...

    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div class="AccordionPanel"&gt;
    &lt;h2 class="AccordionPanelTab"&gt;Panel 2&lt;/h2&gt;
    &lt;p class="AccordionPanelContent"&gt;

    ...

  &lt;/p&gt;

  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;p class="AccordionPanelTab"&gt;Panel 3&lt;/p&gt;
    &lt;p class="AccordionPanelContent"&gt;

    ...

    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="AccordionPanel"&gt;
    &lt;pre class="AccordionPanelTab"&gt;Panel 4&lt;/pre&gt;

    &lt;ol class="AccordionPanelContent"&gt;
      &lt;li&gt;

      ...

      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;

&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var acc1 = new Spry.Widget.Accordion("Acc1");
&lt;/script&gt;

span.AccordionPanelContent {

display: block;

}

</style>

...

<h3 class="AccordionPanelTab">Panel 1</h3>

...

</span>

</div>

<h2 class="AccordionPanelTab">Panel 2</h2>

...

</p>

</div>

<p class="AccordionPanelTab">Panel 3</p>

...

</p>

</div>

<pre class="AccordionPanelTab">Panel 4</pre>

<li>

...

</li>

</ol>

</div>

var acc1 = new Spry.Widget.Accordion("Acc1");

</script>

Styling With Different CSS Class Names

This is an example of styling an accordion using totally different class names than the ones specified in SpryAccordion.css. This example also shows how to override the built-in CSS class names used by the hover, panel open, panel closed, and accordion focused behaviors.

Panel 1

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

Panel 4

Panel 4 Content

The code for this (minus the panel content) looks like this:

&lt;script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"&gt;&lt;/script&gt;

&lt;link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /&gt;

&lt;style type="text/css"&gt;

.AquaAccordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
}

.AquaAccordion .Tab {
	height: 24px;
	background-image: url(images/aqua-gradient.gif);
	background-repeat: repeat-x;
	background-color: #6dc1fc;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	text-align: center;
}

.AquaAccordion .Content {
	overflow: auto;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background-image: url(images/gray-gradient.gif);
	background-repeat: repeat-x;
}

.AquaAccordion .hover {
	background-image: none;
	background-color: #33CCFF;
}

.AquaAccordion .open {
	/* Add properties here. */
}

.AquaAccordion .closed {
	/* Add properties here. */
}

.AquaAccordion .focused {
	/* Add properties here. */
}


&lt;/style&gt;

...

&lt;div id="Acc9" class="AquaAccordion" tabindex="0"&gt;
  &lt;div class="Panel"&gt;

    &lt;div class="Tab"&gt;
      &lt;div class="Label"&gt;Panel 1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Content"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="Panel"&gt;
    &lt;div class="Tab"&gt;Panel 2&lt;/div&gt;

    &lt;div class="Content"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="Panel"&gt;
    &lt;div class="Tab"&gt;Panel 3&lt;/div&gt;

    &lt;div class="Content"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="Panel"&gt;
    &lt;div class="Tab"&gt;Panel 4&lt;/div&gt;

    &lt;div class="Content"&gt;

    ...

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

var acc1 = new Spry.Widget.Accordion("Acc1", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
&lt;/script&gt;

100

101

102

103

104

105

106

.AquaAccordion {

border-left: solid 1px gray;

border-right: solid 1px black;

border-bottom: solid 1px gray;

overflow: hidden;

font-family: "Times New Roman", Times, serif;

font-size: 16px;

}

.AquaAccordion .Tab {

height: 24px;

background-repeat: repeat-x;

background-color: #6dc1fc;

border-top: solid 1px black;

border-bottom: solid 1px gray;

margin: 0px;

padding: 2px;

cursor: pointer;

-moz-user-select: none;

-khtml-user-select: none;

text-align: center;

}

.AquaAccordion .Content {

overflow: auto;

height: 300px;

margin: 0px;

padding: 0px;

background-repeat: repeat-x;

}

.AquaAccordion .hover {

background-color: #33CCFF;

}

.AquaAccordion .open {

/* Add properties here. */

}

.AquaAccordion .closed {

/* Add properties here. */

}

.AquaAccordion .focused {

/* Add properties here. */

}

</style>

...

<div class="Label">Panel 1</div>

</div>

...

</div>

<div class="Tab">Panel 2</div>

...

</div>

<div class="Tab">Panel 3</div>

...

</div>

<div class="Tab">Panel 4</div>

...

</div>

var acc1 = new Spry.Widget.Accordion("Acc1", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });

</script>

Printing the Contents of an Accordion

When printing a document that contains an Accordion, it may sometimes be desireable to print the content in content panels that are currently closed on screen. To do this, you need to add some CSS print media style rules which force the Accordion panels to show all their content:

&lt;link href="../../css/samples.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /&gt;

&lt;style type="text/css" media="print"&gt;

.Accordion {
  overflow: visible !important;
}

.AccordionPanelContent {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}

&lt;/style&gt;

.Accordion {

overflow: visible !important;

}

.AccordionPanelContent {

display: block !important;

overflow: visible !important;

height: auto !important;

}

</style>

The “!important” on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, “!important” is necessary to “trump” the inline styles.

Generating Accordion Markup with Spry Data

To see an example of how to build an accordion from XML data using Spry’s Data Set and Dynamic Region support, click here.

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 23 Ottobre 2009

Rendere l’attributo target=”blank” valido

di Massimo Selva in Javascript, SEO

L’attributo per aprire pagine esterne al nostro sito, in una nuova finestra è il

target=”blank”

da usare all’interno del tag <a>.

Tale tag però non risulta valido secondo i criteri del w3c, e quando inserito invalida la pagina.

Esiste però un modo per mantenere la pagina valida, e aprire contemporaneamente una pagina esterna in una nuova finestra.

Al posto del target=”_blank” nel tag <a> va inserito il seguente codice javascript.

onclick=”this.target=’_blank'”

Il quale sfrutta l’evento javascript onclick, che intercetta il click dell’utente, e forza l’apertura della pagina in una nuova finestra.

Questo metodo è tollerato dal w3c, che non segnala come errore l’utilizzo del javascript, e nello stesso tempo produce lo stesso identico risultato del target=”_blank”

Massimo Selva

1stonthenet è la discarica dei miei deliri digitali.
(cit. Paolo Attivissimo)

Leggi tutto • 20 Ottobre 2009

1stonthenet, primi nei motori di ricerca

Blog aziendale di Magicnet soluzioni web

Javascript

Framework alternativi a jQuery, Prototype e Mootools

Corretta visualizzazione script ‘Coin-Slider’ durante caricamento

Personalizzare i moduli con Niceform

Mappe navigabili in Javascript

Esempi di Accordion

Accordion Samples

Default Behavior and Style

Setting the Default Panel

Enabling Keyboard Navigation with tabindex

Changing Navigation Keys

Enabling Keyboard Navigation with Links

Adjusting Animation Duration and FPS

Setting the Transition/Easing of the Animation

Turning Animation Off

Variable Panel Heights

Starting with All Panels Closed

Programatically Opening and Closing Panels

Using Other Block Level Elements

Panel 1

Panel 2

Styling With Different CSS Class Names

Printing the Contents of an Accordion

Generating Accordion Markup with Spry Data

Rendere l’attributo target=”blank” valido

Blog aziendale di Magicnet
soluzioni web