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 [...]
Inserire dinamicamente un .js
Wednesday, September 5th, 2007Un esempio veloce veloce su come richiamare dinamicamente un js esterno in una pagina.
Questo potrebbe risolvervi il problema nel caso di un blog, in cui avete adsense in loop sotto ogni titolo e volete evitare più di 3 chiamate (vero Napolux e K76…).
<head>
</head>
<div id="mio1">mio1</div>
<div id="mio2">
mio2
<script>
//dichiaro il sorgente
var jsSorgente = "file:///C:/Inetpub/wwwroot/mrx/blog/tmp.js";
//dichiaro la posizione
var jsWhere = document.getElementById("mio2");
//creo [...]
Le iniezioni di Google nel c***… del tuo sito!
Tuesday, August 28th, 2007Ottimizzando un po’ i miei siti mi sono accorto che il sig. Google, vestito da AdSense, inietta nel template del mio sito del codice particolare.
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<iframe name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?
client=ca-pub-0000000000000000&dt=0000000000000000&lmt=0000000000000000&
format=468×60_as&output=html&correlator=00000000&
channel=0000000000&url=http%3A%2F%2Fblog.merlinox.com%2FMrX%2FBlog%2F&
color_bg=FFFFFF&color_text=333333&color_link=1461BE&color_url=4A80B5&
color_border=FFFFFF&ad_type=text_image&cc=100&
ga_vid=1090994865.1178307277&ga_sid=1188334945&ga_hid=1907438633&
ga_fc=true&flash=9&u_h=768&u_w=1280&u_ah=738&u_aw=1165&
u_cd=32&u_tz=120&u_his=10&u_java=true&u_nplug=29&u_nmime=112" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0"
height="60" scrolling="no" width="468"></iframe>
Ora io capisco tutto. Capisco che richiamando un .js, con la potenza del DOM mischiata al genio [...]
Simulare onKeyDown su un Input
Thursday, July 19th, 2007Come agganciare via JS ad un oggetto INPUT l’evento keypress, che in javascript non esiste.
Cioè come faccio a verificare che un utente sta scrivendo qualcosa in un determinato input senza scrivere la gestione evento direttamente sull’HTML ma in un HTML separato???
O meglio: se mettiamo <input onKeypress="…" /> funziona, ma se vogliamo tenere separati HTML e [...]
10 cose da evitare sviluppando siti
Tuesday, July 3rd, 2007Le dieci cose che secondo me sono da evitare (come la peste) per sviluppare un sito web decente sono:
usare come database access, se non in casi di siti da 2 visite al giorno senza registrazioni di informazioni di navigazione in tempo reale
scrivere montagne di stili online con l’attributo STYLE
inserire i CSS nel file con <style> [...]
Tabella scrollabili orizzontalmente con i CSS
Thursday, June 21st, 2007Un breve tutorial per creare delle tabelle facilmente navigabili, stile excel, mantenendo alcune colonne fisse.
Facciamo subito vedere il risultato finale prima che qualcuno si lamenti.
ID
NICKNAME
001
k76
002
merlinox
003
gidibao
004
mavero
datoA
datoB
datoC
datoD
datoE
datoF
datoG
datoH
datoI
datoL
000
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
Il funzionamento è basato su due distinte tabelle: quella base (id, nickname) e quella con tutti i dati da far scrollare orizzontalmente.
Entrambe le tabelle sono inserite in due rispettivi DIV flottanti [...]
Tabbed Menu con CSS e HTML (anche tondi)
Thursday, June 14th, 2007Ecco un semplice menù, fatto con CSS e HTML. In realtà c’è anche un pizzico di coldfusion per implementare anche lo stile per il TAB relativo alla sezione di navigazione. Partiamo con vedere come è fatto il codice HTML: <div id="menu"> <cfset pagina = listLast(cgi.SCRIPT_NAME,"/")> <a href="prodotti.cfm" <cfif pagina is "prodotti.cfm"> [...]
Clear di elementi flottanti via CSS (after)
Tuesday, June 12th, 2007***annuncioVideo***
Uno dei problemi che più assilla chi lavora con i CSS e controllare l’altezza dei Box in float (right o left) o meglio controllare quando il box termina.
Ci sono varie soluzioni a questo problema. Da codice HTML si può semplicemente usare un <br /> con attributo clear:
<br clear("right|left|all|none") />
Oppure qualsiasi elemento HTML con style [...]
