Tag Archive for 'javascript'

Come nascondere menubar e status in Firefox e IE quando si usa window.open()

Published on November 13, 2008 in javascript. 0 Comments Tags: , , , .

Mi è capitato di recente di dovere creare un’applicazione che aprisse delle finestre di popup nascondendo tutto tranne la x per chiudere la window. Dopo essere impazzito alcune ore, mi sono deciso a fare una ricerca nel WWW e ho scoperto quello che già sospettavo: non è possibile nascondere menubar e status da javascript.

Quando si passano i parametri alla funzione open() di window utilizzando menubar=no e/o status=no per nascondere la barra di navigazione e quella di stato, queste non verranno nascoste. Per ragioni di sicurezza, sia FireFox (da ora FF) che Internet Explorer (da ora IE) non lo permettono, ma forzano la loro visualizzazione.

Ciò che è concesso è cambiare queste impostazioni nel proprio browser permettendo che il comando window.open() nasconda le barre. Ma come fare?

Di seguito ve lo spiego:

IE 7
Per cambiare il comportamento di questo browser si deve:
	1. Entrare in Strumenti -> Opzioni Internet -> (Tab) Protezione
	2. Cliccare su Internet e poi su Livello personalizzato
	3. Cercare, in basso, "Consenti ai siti web l'apertura di finestre senza indirizzo o barra di stato" e attivarlo.

FF
Per la barra di stato:
	1. Entrare in Strumenti -> Opzioni -> (Tab) Contenuti
	2. Cliccare su Avanzate
	3. Spuntare "Nascondere la barra di stato"

Per la barra di navigazione:
	Soluzione rapida
		1. Spuntare Visualizza -> Barre di degli strumenti -> Barra di navigazione (a me ha funzionato)

	Soluzione meno rapida
		1. Scrivere nella barra di navigazione about:config e premere invio
		2. confermare l'operazione cliccando su "farò attenzione, prometto"
		3. cercare dom.disable_window_open_feature.menubar
		4. fare doppio clic sopra e cambiarlo in true

http://www.flatiron.it/2008/11/come-nascondere-menubar-e-status-in-firefox-e-ie/

Immagini cha cambiano nell’header di Blogger

Published on October 4, 2008 in Web design and World Wide Web. 1 Comment Tags: , , .

Dopo alcuni anni ho riattivato il mio blog su blogger. Come prima cosa ho pensato di cambiare il tema facendo in modo che l’mmagine dell’header cambiasse ad ogni caricamento della pagina. Credevo che bastasse installare un widget fornito da blogger,  ma ho scoperto, purtroppo, che non è così. Quindi ho cominciato a girare per la rete alla ricerca di una soluzione e alla fine ho trovato il modo che vi descrivo di seguito.

Per fare in modo che le immagini dell’header cambino ad ogni apertura della pagina si deve:

  1. Entrare in Layout>Modifica html
  2. Premere “Espandi i modelli widget”
  3. Cercare il punto nel quale è inserita l’immagine dell’header e qui inserire il seguente codice in verde:
    <div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <!-- Start Modification. -->
    <script type='text/javascript'>
    var banner= new Array()
    banner[0]=&quot;http://url_della_tua_immagine&quot;
    banner[1]=&quot;http://url_della_tua_immagine&quot;
    banner[2]=&quot;http://url_della_tua_immagine&quot;
    banner[3]=&quot;http://url_della_tua_immagine&quot;
    /*banner[4]=&quot;http://url_della_tua_immagine&quot;*/
    var random=Math.round((banner.length-1)*Math.random());
    document.write(&quot;<img src='&quot;+banner[random]+&quot;' style='display: block'/>&quot;);
    </script>
    <noscript>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId +      &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </noscript>
    <!-- End Modification. -->
    </a>
    </div>
  4. Uploadare le immagini che volete utilizzare da qualche parte (es. Flickr) e incollare l’url di ogni immagine in un rigo come questo banner[0]=&quot;http://url_della_tua_immagine&quot; popolando così l’array delle immagini.
  5. Salvate e provate.

P.S.

Le dimensioni delle immagini devono essere, in larghezza, grandi come la larghezza del blog. Per sapere qual è la larghezza potete guardare il valore di width dello stile #content-wrapper (almeno per alcuni temi).

http://www.flatiron.it/2008/10/immagini-cha-cambiano-nellheader-di-blogger/

I tooltip in javascript

Published on September 18, 2008 in Web design. 0 Comments Tags: , , .

Di tutti gli argomenti che ho trovato in rete ne ho trovato uno particolarmente interessant: i tooltip in javscript.

I tooltip sono i balloon, le nuvolette che appaiono quando restate sopra un elemento per qualche secondo con il vostro puntatore e vi forniscono informazioni aggiuntive sull’elemento.

Realizzarli in javascript non è complicato, ma sicuramente è antipatico. Da qui la pubblicazione di una lista di librerie/plugin che permettono di inserire un tooltip in una pagina web. Scegliete quello che preferite.

http://www.flatiron.it/2008/09/i-tooltip-in-javascript/

Per evitare i CSS hacks

Published on September 17, 2008 in Web design. 2 Comments Tags: , .

Ho letto in rete un ottimo articolo per evitare l’utilizzo dei CSS hacks. Il problema è affrontato in maniera diversa da come mi sarei immaginato, ma la soluzione è funzionale ed elegante. In pratica si tratta di aggiungere del codice javascript in modo da poter creare, successivamente, degli stili personalizzati per ogni browser, in maniera semplice ed intuitiva.

Vi posto il codice sorgente:

<script type="text/javascript">
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName(’html’)[0],[
(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(’ie ie’+RegExp.$1)
:is(’firefox/2&#8242;)?’gecko ff2&#8242;
:is(’firefox/3&#8242;)?’gecko ff3&#8242;
:is(’gecko/’)?’gecko’
:is(’opera/9&#8242;)?’opera opera9&#8242;:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11&#8242;)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>

Questo codice attiva i seguenti stile per i relativi browser.

.ie — Tutte le versioni di IE;
.ie8 — IE 8.?;
.ie7 — IE 7.x;
.ie6 — IE 6.x;
.ie5 — IE 5.x;
.gecko — Tutte le versioni di Firefox;
.ff2 — Firefox 2;
.ff3 — Firefox 3;
.opera — Tutte le versioni di Opera;
.opera8 — Opera 8.x;
.opera9 — Opera 9.x;
.konqueror — Konqueror;
.safari — Safari.

E questo è un piccolo esempio: in questo caso verrebbe visualizzato il testo in rosso in Opera.

.opera div {
    color:red;
}

http://www.flatiron.it/2008/09/per-evitare-i-css-hacks/

Librerie javascript

Published on September 16, 2008 in Web application and Web design. 0 Comments Tags: , , , , .

Oggi stanno diventando indispensabili per creare delle RIA, anche se qualcuno le critica perché creano alcuni problemi di accessibilità oltre a mettere il codice della pagina in secondo piano (a questo proposito, affronterò il problema delle tecnologie utilizzate nello sviluppo dei siti web in un prossimo post), ma le librerie javascript (o i framework come qualcuno li chiama) sono sicuramente il futuro.

Sono molti i “big” che ne hanno sviluppate di proprie e moltissime anche quelle dei meno big. Ormai sono una realtà dalla quale non è possibile prescindere. Io le ho utilizzate e rendono lo sviluppo delle interfacce più semplice, però ricordate: scegliete quelle che preferite all’inizio di un progetto e mantenetele resistendo alla tentazione di effettuare un mesh-up di librerie. Vi assicuro che c’è da impazzire.

Di seguito vi riporto i link di alcune delle più conosciute:

http://www.flatiron.it/2008/09/librerie-javascript/