Supporto volontario e collaborativo per Joomla!® in italiano

JPane compatibile con IE7

Joomla! ha una procedura interna molto utile per creare elementi composti da "sliders" oppure da "tab". In quest'ultimo caso, purtroppo, il risultato non è perfettamente visualizzato in IE7. In questo articolo vi mostrerò come effettuare alcune modifiche per avere un risultato compatibile con i browser più moderni.


Subito prima di iniziare faccio una piccolissima precisazione: i test sono stati effettuati su piattaforma Windows con i seguenti browser:
  • Mozilla Firefox
  • Chrome
  • IE7 - IE8
  • Opera
  • Safari

Come avrete già intuito è stato volutamente ignorato IE6: è un browser datato, per cui è impensabile continuare a sviluppare per degli strumenti creati quasi 10 anni fa.
La piattaforma Mac non è stata testata perchè il computer su cui lavoro è un PC: se qualcuno può aiutare con altri test, è benvenuto :)

Detto questo, partiamo subito con la situazione. In alto potete vedere come si dovrebbero presentare i tab, mentre più sotto si trova la visualizzazione in IE7:



I problemi, a ben vedere, in realtà sono due:


1. Le "linguette" appaiono "staccate" dal loro contenuto
2. Il contenuto appare "indentato"

Andiamo con ordine.
Per "riattaccare" le due parti è sufficiente aggiungere questa regola CSS in un foglio di stile specifico per IE7 (in questo esempio chiamato iefix.css)

div.current {margin: -4px 0px 0px 0px;}

Ora dovete creare una regola condizionale per caricare il foglio di stile (maggiori info sulle regole condizionali).
Passiamo al secondo problema: il testo indentato.
Per risolvere il tutto sarebbe sufficiente aggiungere la proprietà "display: inline"; purtroppo lo script di Joomla! aggiunge già la proprietà "display: block" direttamente sull'elemento (inline), per cui anche se scrivessimo una regola ad hoc non verrebbe mai applicata: l'elemento ha una priorità maggiore sulla regola CSS.

var JTabs = new Class({

getOptions: function(){
return {

display: 0,

onActive: function(title, description){
description.setStyle('display', 'block');
title.addClass('open').removeClass('closed');
},

onBackground: function(title, description){
description.setStyle('display', 'none');
title.addClass('closed').removeClass('open');
}
};
},

...
...
Il colpevole si trova nella dichiarazione onActive: è in quel momento che viene applicata la proprietà block.

Ma non tutto è perduto!
Infatti è possibile richiamare l'istanza JPane con dei parametri, che verranno utilizzati nella creazione del codice Javascript.
Per cui aggiungete questo codice e POI richiamate l'istanza:

$params = array("onActive" => "function(title, description){
description.setStyle('display', 'inline');
title.addClass('open').removeClass('closed');}");

$overviewpane    =& JPane::getInstance('Tabs', $params);

Et voilà! Tutto è magicamente al suo posto!

Fabbrica Binaria - Soluzioni originali ad esigenze quotidiane

commentaCommenta questo articolo sul forum