Il blog sull'informatica

Ormai il pulsante "like" di Facebook è diventato una moda ed in quanto tale sono sempre di più i siti che usufruiscono di questo gadget. L'inserimento del suddetto pulsante all'interno del codice HTML del proprio sito è praticamente un gioco da ragazzi (basta copiare ed incollare il sorgente autogenerato mediante questa interfaccia user-friendly). I problemi, però, iniziano quando si vuole customizzare pesantemente il "like" di Facebook, ad esempio implementando un evento on click oppure "nascondendo" la barra dei commenti.

Nel primo caso è sufficiente utilizzare un codice javascript simile al seguente

<!--
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
//action
});
 };
//-->

Se ad esempio si volesse implementare l'apertura di una finestra pop-up immediatamente dopo il click sul "like", il codice diventerebbe:

<!--
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
window.open('vostraurl', '_blank');
});
 };
//-->

Nel caso in cui, invece, si volesse nascondere la barra dei commenti, è necessario lavorare di CSS. Nella fattispecie, occorre attribuire un display:none alla classe .fb_edge_widget_with_comment, utilizzando la keyword !important per evitare possibili sovrascritture di tali impostazioni all'interno della pagina HTML (attraverso il tag style):

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;}

Ed il gioco è fatto.

A presto.

Ecco una semplice funzione Javascript che consente di ottenere l'invio del contenuto di un campo di input semplicemente pigiando il tasto enter:

<script type="text/javascript">
  function onEnter(evt, frm)
  {
      var keyCode = null;
   
    if( evt.which )
    {
         keyCode = evt.which;
     }
    else if( evt.keyCode )
    {
         keyCode = evt.keyCode;
     }
    
    if( 13 == keyCode )
    {
         document.searchForm.searchbutton.click();
         return false;
     }
   
     return true;
  }
  </script>

Il codice HTML ad essa associato è il seguente:

<form id="searchForm" name="searchForm" class="searchform">
                <input id="input" name="input" type="text" value="Search..." onFocus="if (this.value == 'Search...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search...';}" onKeyPress="return onEnter(event,this.form)"/>
                <input id="searchbutton" name="searchbutton" class="searchbutton" type="button" value="a" onClick="document.forms['searchForm'].submit()"/>
</form>

Alla prossima.

L'attributo z-index, utilizzato nell'ambito dei fogli di stile (CSS), consente di ordinare gli elementi grafici di una pagina Web secondo la coordinata spaziale z. Purtroppo però, quando si ha a che fare con degli *.swf e si utilizza Google Crome come browser, l'attributo z-index viene totalmente ignorato, ragion per cui il filmato sarà sempre posizionato "più in superficie" rispetto agli altri elementi.

Inutile dire che tale comportamento "anomalo" non si verifica nè con Mozilla Firefox nè con IE8 ed IE9.

Esiste tuttavia un workaround. Esso consiste, sostanzialmente, nell'uso dell'attributo wmod relativo al tag embed. Il valore associato all'attributo in questione dovrà essere transparent.

Ad esempio:

<embed wmode="transparent">

Inoltre, occorre inserire il seguente codice HTML tra i tag <object></object>:

<param name="wmode" value="transparent" />

Adesso anche Google Chrome sarà in grado di visualizzare gli elementi grafici della pagina nel giusto ordine di profondità.

A presto.