Google Translate

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified by : BTF, ed. by JRD (me!)
Visualizzazione post con etichetta ajax. Mostra tutti i post
Visualizzazione post con etichetta ajax. Mostra tutti i post

venerdì 2 settembre 2011

How to center a google gadget (or ajax load it)

I came across this problem myself when trying to insert the "Directions" gadget from Google Maps into a website. Googling the problem "center google gadget on page" shows that there are a number of other people looking for a solution to this too, and no one seems to have the right answer. Well I found it. Here goes.


  1. Paste the generated script tag for the google gadget in a separate file (for example, for the directions gadget, I created a file called "directionsgadget.html").
  2. Wrap the script tag in a div tag. Look at the values sent in the script tag and find the ones that set the height and width of the gadget. In the directions script I found:
    &w=320&h=55
    Set the inline style of the div tag such that the div's width is equal to or slightly larger than the gadget's width, and you are going to center this div using the margin property, like so:
    <div style="width:325px;margin:0 auto;">
      <script .... />
    </div>
  3. On the page where you want the gadget, add an iframe where you want the gadget to appear and set the src attribute to point to the file that you have just created (the one with the div-wrapped script tag for the gadget), and set the inline style of the iframe so as to center it pretty much the same way we did with the div. Like this:
    <iframe src="path/to/directionsgadget.html" style="width:330px;margin:0 auto;text-align:center;"></iframe>
  4. Voilà! You have your gadget and you have it centered!

    LOADING VIA AJAX PROBLEM SOLVED USING THIS SAME METHOD:
  5. Have you ever tried loading via ajax contents that contain a google gadget, and you're not seeing your gadget?
    Guess what. This IFRAME method of loading the gadget fixes that.
    The reason it doesn't load when you are loading via ajax is that you can't load script tags that point to external sites via ajax because of cross-site scripting limitations in browsers (a good security measure). BUT... if you put your script tag in a separate file, and load it into your contents using an iframe... SHABAM! Your gadget is loaded even when your contents are loaded via ajax! You have overcome the cross-site scripting limitations!

giovedì 3 febbraio 2011

Flatnux 2 in arrivo!

Per il momento il mio sito personale http://johnrdorazio.altervista.org, che uso più che altro per la sperimentazione (non sono ancora arrivato ad usarlo come archivio personale), non è molto accessibile... Infatti comincio a provare le prime versioni "beta" o test di una nuova versione di Flatnux che Alessandro Vernassa sta sviluppando. Non soltanto un ultimo aggiornamento, ma una riscrittura vera e propria. Pare che questa versione sarà tutta basata sul nuovo motore (classe php) xml database scritto da Alessandro Vernassa, e dovrebbe pertanto presentare notevoli migliorie per amministratori di sito flatnux e soprattutto per sviluppatori flatnux.
La nuova versione userà di default il mod rewrite per presentare all'utente finale url più "belle" da vedere, senza tutti i parametri per le variabili php GET.
Pare che darà anche la possibilità di caricare le sezioni via ajax, scelta oculata a mio parere perché velocizza il caricamento delle sezioni evitando di ricaricare ogni volta tutta la pagina durante la navigazione. Certo che non sarà semplice implementarlo in maniera completa e affidabile quando ci sono informazioni che vengono scambiate tra sezioni e blocchi per esempio.
Altra caratteristica è che tutto il codice del CMS è diventato rispettoso del XHTML strict, e direi che questo è un ottimo passo in avanti perché gli standard del web stanno migliorando sempre e già si comincia a guardare verso l'HTML5, che non è però ancora del tutto definito. Intanto adeguarsi al XHTML strict è una scelta molto utile, soprattutto quando ci si serve di strumenti serviti da API esterni (per fare un esempio, la "barra sociale" di Google Friend Connect richiede per forza un DOCTYPE XHTML strict, e così anche le funzionalità XFBML di Facebook Connect).

Questo cambiamento potrebbe comportare per tutti i "flatnuxiani" un periodo di transizione onde aggiornare i propri siti alla nuova versione, perché non è possibile installare la versione 2 come aggiornamento dal pannello di controllo, necessita di un'installazione "pulita", ex novo. Pertanto bisognerà transizionare i contenuti dai propri siti nella nuova installazione. Ci vorrà un po' di pazienza ma credo che ne varrà la pena.

Una nota pertanto anche ai "parrocchiani" di San Lino, vorrà dire che in un prossimo futuro anche il sito parrocchiale http://www.parrocchiasanlino.org (che non ha al momento aiuti per l'aggiornamento dei contenuti!) subirà la transizione alla nuova versione del CMS, bisognerà pertanto ri-elaborare i contenuti del sito.

Anch'io da parte mia dovrò rivedere il tema "open social" che ho cominciato a sviluppare per Flatnux, per adeguarlo a Flatnux 2, considerando che anche le funzioni di base del CMS verranno ridefinite e la stessa struttura del CMS subirà delle modifiche.

Seguirò man mano lo sviluppo per aiutare Alessandro con osservazioni su eventuali errori / bug / correzioni da apportare, attendiamo speranzosi i risultati! Si possono scaricare le ultime versioni di test alla pagina http://flatnux.altervista.org/download.html.