Menu intelligente con javascript e style
Thursday, January 24th, 2008Ecco un esempio gustoso su come creare un menu sensibile alla pagina in cui siamo. Quali tecniche ho usato?
Innanzi tutto html e css (che non metto) per la creazione di un normale menu basato su css e liste (ul/li).
Quindi un po’ di coldfusion per individurare lato server la pagina in cui il navigatore è.
Alla fine [...]
Gestiamo gli input in modo sexy
Wednesday, January 23rd, 2008Per rendere i vostri siti ed in modo particolare i vostri Content Management System (CMS) più usabili, senza ricorrere a script pesantissimi o wizard di evitor succhia risorse, spesso qualche riga di javascript può aiutare a fare un discreto lavoro. Questa volta riprendo uno script già presentato per la gestione dei tasti e aggiungo un [...]
Controllo dei tasti in javascript
Friday, January 11th, 2008Uno script veloce che permette di controllare che in un campo testo vengano inseriti solo numeri.
Il punto principale dello script è la gestione dell’evento onKeypress (event), che dalla nostra funzione possiamo richiamare per ottenere il tasto che è stato premuto e.keyCode, in formato ASCII. Convertendolo poi in carattere String.fromCharCode possiamo fare i confronti necessari.
<script type=”text/javascript”>
function [...]
Differenze di rendering tra table e tableless
Friday, January 4th, 2008Siti tableless o siti con tabelle? Potremo scrivere centinaia di righe e opinioni, ma l’hanno già fatto!
Escludendo le motivazioni di accessibilità, di facilità di programmazione, di CSS, voglio puntare il dito su uno delle fondamentali differenze tra Tabelle (<table>) e non Tabelle (<div><p><ul>…): la modalità di rendering.
Il principio è che i browser renderizzano (visualizzano) a [...]
Loop degli INPUT dentro un ID
Thursday, December 6th, 2007Mi è capitato di dover gestire (in asp…) un software per le disdette di prodotti e sottoprodotti. Mi hanno chiesto di fare in modo che nella scheda di compilazione, quando viene disdetto un prodotto, anche i sotto prodotti devono essere disdetti.
La tabella che io avevo era fatta così:
<form id="myForm">
prodotto
aggiungi
nome prodotto
- sottoprodotto
- sottoprodotto
nome prodotto
- sottoprodotto
nome prodotto
</form>
Quindi [...]
Un CAPTCHA senza javascript matematica o immagini
Thursday, November 29th, 2007Come fare un captcha facile senza javascript, un po’ di css e un po’ di server side (coldfusion): un gioco da ragazzi.
Procediamo!
Ipotizziamo che il nostro modulo (form) sia fatto nel seguente modo:
<form name=”frm_xxx” action=”reg.cfm” method=”post”>
Nome <input type=”text” name=”nome”><br />
Sito <input type=”text” name=”sito”><br />
Mail <input type=”text” name=”mail”><br />
Commento<br>
<textarea name=”commento”></textarea>
</form>
Mi sembra abbastanza standard, ok?
Mettiamoci nei panni dello [...]
Fare cambiare le immagini in JS
Tuesday, November 27th, 2007Fare ruotare delle immagini all’interno di uno stesso segna posto (images roller) è veramente un giochino da ragazzi. Qualche righetta di javascript ed è fatta, addirittura con il preload
Eccovi il codice, penso non abbia bisogno di molte spiegazioni, e poi so che siete bravissimi.
<script type="text/javascript">
var shopImgs = new Array();
var n=0;
var i = 0;
shopImgs[n] [...]
Gestire i CSS in Javascript
Wednesday, November 7th, 2007Banner ingrandili SOLO css
Thursday, October 4th, 2007All’articolo precedente abbiamo creato un banner estensibile usando JS e CSS, e associando il tutto ad un DIV.
Però si può fare di meglio, sfruttando la proprietà CSS del tag <A>: hover!
Impostando quindi il nostro <A> di altezza fissa, con overflow:hidden, possiamo dirgli di ingrandirlo in rollover!
Ecco il codicello:
<style type="text/css">
a.banner{
height: 60px;
overflow: hidden;
}
a.banner:hover{
height: auto;
}
</style>
<a class="banner" href="http://www.videomarte.com"><img src="http://blog.merlinox.com/MRX/BLOG/foto/th_melita-toniolo1.jpg" [...]
Banner ingrandibili con js e css
Thursday, October 4th, 2007 #banner{
height: 60px;
float: right;
margin: 0 0 10px 10px;
/*display: inline;*/
overflow: hidden;
/*background-color: #33FF00;*/
}
function dimensiona(i,mode){
var altezza = “”;
if (mode){
//allungo
altezza = “auto”;
}else{
//accorcio
altezza = “60px”;
}
i.style.height=altezza;
}
Vi piacerebbe fare un bel banner alto 60 pixel e quando ci si passa su con il mouse si ingrandisce, ma non sapete come farlo? Oppure qualche altro effetto simile con immagini e div?
Eccomi qua per risolvervi [...]
