Warning: strpos(): needle is not a string or an integer in /membri2/drudo/blog-r/index.php on line 31

Warning: strpos(): needle is not a string or an integer in /membri2/drudo/blog-r/index.php on line 37

Warning: strpos(): needle is not a string or an integer in /membri2/drudo/blog-r/index.php on line 43
blog ¦ drudo (-rw-r--r--)
 
Cancellare campo input al click del mouse
Mi sono sempre chiesto come implementare la scomparsa del valore di default (value) di un campo input in un form, cioè il classico "cerca nel sito..." che scompare una volta che si è sul campo!

A naso sapevo si trattava di semplice JavaScript, ma la pigrizia mi ha sempre tenuto ben lontanto dal leggere eventuali soluzioni. Ma suvvia il 2008 è iniziato da 8 giorni e mi sento rinvigorito :D

Veniamo al dunque, prima di scrivere codice vediamo l'esempio per capire di cosa stiamo parlando.
Bene ora passiamo ad un esempio d'uso andando a considerare un semplice form così fatto:
<form action="" method="post">
<p>
<input type="text" id="search" name="search" value="cerca nel sito..."
onfocus="delDefaultValue('search')" onblur="checkEmptyValue('search')" style="color: #bbb" />
<input type="submit" value="Vai!" />
</p>
</form>

Da notare sono i valori onfocus e onblur, che non fanno altro che richiamare le funzioni scritte quando serve!
Ecco infine il codice delle due funzioni JS da mettere dove preferite:
function delDefaultValue(elem) {
elemChange = document.getElementById(elem);
if (elemChange.value == elemChange.defaultValue) {
elemChange.value='';
}
elemChange.style.color = '#000';
}

function checkEmptyValue(elem) {
elemChange = document.getElementById(elem);
if (elemChange.value == '') {
elemChange.style.color = '#bbb';
elemChange.value = elemChange.defaultValue;
}
}
Ecco spero di aver aiutato qualche anima in pena :)

Problemi noti:

In caso di Javascript non attivo, il form funzionerà lo stesso (ovviamente), ma il "value" non verrà azzerato automaticamente ed inoltre il colore del testo rimarra' quello specificato in "style" all'interno della definizione dell' input.

Blogroll in javascript per S.P.B. e non solo...
Era da un po' che cercavo di rendere casuale l' ordine di una lista di link tramite JavaScript, cioè realizzare un così detto blogroll come quello che implementa il blasonato WordPress.

La scelta di scriverlo in JavaScript non è del tutto sconsiderata come molti potranno pensare :-P ma è stata dettata dal fatto che Simple PHP Blog non ha la possibilità di usare "plug-in" quindi realizzare il blogroll in PHP avrebbe reso necessario la modifica di file sorgenti, cosa che ho voluto appunto evitare; oltretutto è possibile inserire codice JS all' interno di un "blocco" di S.P.B., cosa molto comoda per chi questo blog.

Ora non essendo affatto capace di scrivere in JS sono andato alla ricerca di porzioni di codice in giro per il web, finchè mi sono imbattutto nel fornitissimo forum di Html.it dove un utente ha scritto due righe veloci... mi perdoni l' autore ma non riesco più a trovare il thread originale!

Ad ogni modo ecco il codice di esempio (non molto elegante direi, ma ohibò funiona) da inserire in un blocco dentro ai tag [ html]:

<script type="text/javascript" language="javascript">
<!--
function blog_roll() {
var links = new Array();
links[0]="<a href=\"http://sito1.com\" title=\"titolo1\">Link sito 1</a>";
links[1]="<a href=\"http://sito2.com\" title=\"titolo2\">Link sito 2</a>";
links[2]="<a href=\"http://sito3.com\" title=\"titolo3\">Link sito 3</a>";
links[3]="<a href=\"http://sito4.com\" title=\"titolo4\">Link sito 4</a>";

var lgt = links.length;
var rndArr = new Array(lgt);

for (n=0;n<lgt;n++) {
var x = Math.floor(((Math.random())*lgt));
if(rndArr[x] == undefined) {
document.write(links[x]+"<br />");
rndArr[x] = " ";
}
else n--;
}
}
blog_roll();
//-->
</script>
<noscript>
<a href=\"http://sito1.com\" title=\"titolo1\">Link sito 1</a>
<br />
<a href=\"http://sito2.com\" title=\"titolo2\">Link sito 2</a>
<br />
<a href=\"http://sito3.com\" title=\"titolo3\">Link sito 3</a>
<br />
<a href=\"http://sito4.com\" title=\"titolo4\">Link sito 4</a>
</noscript>


Ad ogni refresh della pagina i link verranno mescolati in modo casuale, mentre nel caso in cui il supporto JavaScript del browser fosse disabilitato lo script visualizzarà lo stesso la lista, ma nell' ordine stabilito nel tag <noscript>.

Se qualcuno più avezzo di me nello scrivere JS stesse leggendo il codice inorridito, lo pregherei di dare qualche suggerimento :-)

Un esempio d' uso lo potete vedere nella colonna quì a fianco in "Trattano di S.P.B.".

IE7 versione 0.8 alpha
Dean Edwards ha rilasciato una nuova versione alpha del suo progetto ie7, una raccolta di JavaScript che sopperisce, o cerca di farlo, alle gravi lacune del browser di casa m$ nel supporto dei CSS.

Usarlo è oltremodo semplice: una volta uppato tutto, basta inserire nell' head della pagina web una cosa del tipo:
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Per maggiori info date un'occhio alla home del progetto:
http://dean.edwards.name/IE7/


Altre notizie