HTML maps on images

So che potrà sembrare vecchio stile ma...

ecco  un comodo strumento on line per creare le mappe sulle nostre immagini!

http://www.maschek.hu/imagemap/imgmap

L'ho usato stasera per la classica mappa sull'Italia, devo aver perso almeno 2/3 diottrie ma il risultato è stato soddisfacente! ;)

IE7 slow in manipulating HTML DOM

Ma perchè ogni volta che apro la mia web application su Internet Explorer mi tocca passare per una ragazza poco fine... 

La novità di oggi è una lentezza tremenda nel manipolare gli elementi HTML della mia pagina in seguito ad una chiamata ajax che ritorna un json.

Dopo aver commentato gradualmente circa 300 righe di codice javascript, ho trovato finalmente l'istruzione che inchioda definitivamente il caro vecchio IE.

$('.'+oggetto).children(".details").append("<span>"+status+"</span><br />");

La sostituzione di append con il caro vecchio innerHTML non è servita a niente, per la cronaca.
Nemmeno evitare quella minima ricorsione che c'è ha avuto effetto:
$('.'+oggetto).children(".details").html("<span>"+status+"</span><br />");


Concatenare la stringa alla fine del ciclo e fare l'append alla fine ha ridotto abbastanza i tempi ma non in maniera sufficiente.


La soluzione? Nessuna soluzione. 
Ho cercato una via alternativa di mostrare i dati.


Thank you Mr. Internet Explorer

Central alignment solution

(function ($) {
  $.fn.ObjectAlign = function() {
      return this.each(function(i){
       
        var ah = $(this).height();
        var ph = $(this).parent().height();
        var mh = Math.ceil((ph-ah) / 2);
        var aw = $(this).width();
        var pw = $(this).parent().width();
          
        if(Math.ceil(aw)>Math.ceil(pw)){
            pw=aw;
            $(this).parent().width(aw);
        }
        var mw = Math.ceil((pw-aw) / 2);
        $(this).css('top', mh);
        $(this).css('left', mw);  
                
      });
  };
})(jQuery);


Questo è il plugin che mi ha salvata durante la spasmodica ricerca di una soluzione al mio problema: non si può centrare verticalmente un elemento TD che come attributo css "display:inline-block". (No, nemmeno vertical-align:middle!)
Questo attributo mi serviva perchè all'interno dei miei TD dovevo posizionare una immagine in alto a destra e quindi al td metto "position:relative" e all'immagine "position:absolute".
Per far questo, la proprietà "display:inline-block" è fondamentale, ma su Firefox non permette alcun tipo di allineamento verticale, nemmeno usando margin-top.


Quindi ho deciso di mettere al mio testo da centrare la proprietà "position:absolute" e ci pensa il plugin sopra a metterlo nella posizione giusta! Il plugin originale è qui, io l'ho adattato perchè faccia anche allineamento orizzontale e controllo dell'overflow del contenuto!


Wheeeew! 

Ragioniamo...
Ho una tabella che deve avere per forza 


td{
    position:relative;
    display:inline-block;
    height:55px;
    margin-right:1px;
    margin-left:1px;
    width:auto;
    min-width:75px;
    vertical-align:middle;  
}

td 1

td 2

td 3

Tutto bene se non che nella mia interfaccia vertical-align:middle non funziona!
Eppure la mia cella è definita come inline-block e secondo questo articolo dovrebbe funzionare alla perfezione!
Quindi siccome la classe è la stessa di questo esempio, il problema risiede da qualche altra parte!

Css position relative/absolute in td.

La prima cosa che devo ricordarmi assolutamente prima di strippare ancora con immagini che galleggiano per il browser è che


Firefox e Internet explorer vogliono le celle di una tabella con la proprietà

 display:block 

per interpretare correttamente le proprietà position (relative, absolute ecc)


Quindi



td.test{
   display:block;
   position:relative;
   border:1px solid blue;
   height:60px;
   width:150px;
}
td.test div{
   position:absolute;
   top:10px;
   left:20px;
   border:1px solid red;
   width:150px;
   height:30px;
}

<table>

   <tr>

     <td class="test">&nbsp;<br />

         <div>&nbsp;</div>

     </td>

   </tr>

</table>

Risulta così: