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. 0 Comments 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/

Qualche soluzione per non impazzire con javascript, Internet Explorer e il DHTML

Published on May 19, 2008 in Web application and Web design. 0 Comments Tags: , , , .

Internet Explorer (da adesso IE) non supporta il DOM come Firefox (da adesso FF), ma supporto solo una parte di DOM: utilizza invece DHTML che, nell’ultima versione, ha subito dei cambiamenti importanti. Questo porta a una serie di problemi nello sviluppare funzioni cross browser in javascript, specialmente se il nostro obiettivo è implementare componenti dell’interfaccia in finestre di pop-up, dalle quali riportare un risultato nella finestra principale (un calendario, selezionare elementi, inserire valori che aggiornano una combo box, ecc.).

Per chi sviluppa web application utilizzando javascript, può capitare di dover risolvere alcuni problemini quando si tratta di far funzionare i propri script concepiti per FF (quindi seguendo lo standard DOM), in IE 6/7.

Ultimamente ho realizzato una web application per la formazione online e mi sono trovato nei guai in diverse occasioni; in particolare quando ho cercato di spostare alcune funzioni dell’interfaccia dalla finestra principale in finestre di pop-up per non affollare la prima. In questo post voglio illustrare i problemi che ho incontrato e le soluzioni che ho adottato. Non pretendo di fornire informazioni originali (anche perché molte delle soluzioni le ho trovate nei forum), quello che mi preme è raccogliere i suggerimenti e strutturarli in modo da fornire un aiuto chiaro a chi incapperà (o è incappato) negli stessi problemi.

Creare un nuovo elemento nella finestra aprente (opener) dalla finestra aperta (pop-up).

Se vogliamo creare e aggiungere un nuovo elemento nella finestre aprente (opener), dalla finestra aperta (con window.open) in IE, dobbiamo utilizzare il metodo createElement() specificando la finestra aprente, altrimenti l’oggetto creato sarà inconsistente e, quindi, inutilizzabile. es.:

document.createElement('input');  sbagliato
window.opener.document.createElement('input');  corretto

Non essendo questo necessario in FF, non saperlo potrebbe portarvi via molto tempo.

Il metodo window.opener.document.getElementById() non funziona in IE7.

In IE7, per poter recuperare un oggetto della finestra window.opener, dalla finestra aperta come pop-up, non possiamo utilizzare la funzione getElementById(), perché genererà un ‘errore. Dobbiamo, invece, impiegare le modalità definite dal DHTML, che sono le seguenti:

- window.opener.document.all[index];
- window.opener.document.all['nomeElemento'];
- window.opener.document.all.item('nomeElemento');

Per una guida esaustiva potete consultare la MSDN Library: HTML and DHTML reference (en).

In javascript, il metodo trim() per l’oggetto String non esiste: una soluzione.

L’oggetto String di javascript offre molti metodi, ma tra questi non esiste il metodo trim(). Il metodo si può rivelare utile quando dobbiamo eliminare gli spazi da stringhe provenienti dalla response di un oggetto XMLHttpRequest.

Questa è una soluzione efficace e di facile implementazione:

String.prototype.trim = function (){
	return this.replace(/^\s*/,””).replace(/\s*$/,””);
}

Una volta definito, tutti gli oggetti String avranno il metodo trim().

Spero che questi brevi e semplici appunti possano esservi utili e possano farvi risparmiare qualche ora nelle estenuanti fasi di debugging.

http://www.flatiron.it/2008/05/qualche-soluzione-per-non-impazzire-con-javascript-internet-explorer-e-il-dhtml/