-
.
Tagboard: bottoni e textarea a scomparsa
Rendere il form della tagboard visibile solo al passaggio del mouse
[ANTEPRIMA]
Installazione
Codice CSS da inserire in Colori e StiliSPOILER (clicca per visualizzare)CODICE/* Input a comparsa Tagboard / Code by bored & El Gringo 89 | http://ffmagazine.forumfree.it */
.tag .mainbg {overflow: hidden; padding: 5px 0}
.tag .list {height: 160px !important; width: 102%; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
.tag:hover .list, .list.min {height: 110px !important}
.tag .list > * {background: transparent; color: #5B6068; font-family: segoe ui; font-weight: bold; font-size: 12px; line-height: 16px}
.tag form {position: relative; z-index: 1; visibility: hidden; opacity: 1; height: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
.tag:hover form, .open_form {visibility: visible !important; opacity: 1 !important; height: 50px !important}
Il codice è molto breve e le cose da modificare sono poche, cominciamo!
In.tag .list
va modificato soltantoheight: 160px
, senza togliere!important
, che andrà a modificare l'altezza della lista dei messaggi e tutti i.3
che andranno a modificare la velocità dell'animazione
In.tag:hover .list, .list.min
va modificatoheight: 110px
, senza togliere!important
, che andrà a modificare l'altezza della lista dei messaggi quando il mouse è sopra la tag o quando si sta scrivendo (è consigliato fare height .tag .list - 50 per avere un bel effetto)
In.tag .list > *
si possono modificare, in ordine, background dei messaggi, colore, font, spessore del font, dimensione del font e interlinea
In.tag form
modificate i.3
con gli stessi valori dichiarati prima
Codice HTML da inserire in Codice HTML che sarà mostrato in Fondo a tutte le pagineSPOILER (clicca per visualizzare)HTML<script type="text/javascript">
// By _Lati_ - http://ffmagazine.forumfree.it
var tag=document.tagboard.ffmsg;
tag.onfocus=function() {
document.tagboard.className = "open_form";
document.getElementById("tagObject").className = "list min"
}
tag.onblur=function() {
document.tagboard.className = "";
document.getElementById("tagObject").className = "list";
}</script>
Oppure se avete il Messaggio predefinto in TagBoardSPOILER (clicca per visualizzare)HTML<script type="text/javascript">
//By DarkStyle ©
var tagMessage = "È severamente vietato inserire link interni od esterni al forum al solo scopo di pubblicizzare una propria discussione o chiedere supporto.";
var alertTagMessage = "Non puoi inviare il messaggio predefinito!";
var tagTextInput = document.tagboard ? document.tagboard.ffmsg : 0;
var tagInput = document.tagboard ? document.tagboard.elements : 0;
if(tagTextInput) {
function modifyvalue() {
if (tagTextInput.value == "") {
tagTextInput.style.fontStyle = "italic";
tagTextInput.value = tagMessage;
tagTextInput.style.color = "808080";
} }
function resetvalue() {
if (tagTextInput.value == tagMessage) {
tagTextInput.style.fontStyle = "normal";
tagTextInput.value = "";
tagTextInput.style.color = "";
} }
modifyvalue();
tagTextInput.onfocus = function() {
document.tagboard.className = "open_form";
document.getElementById("tagObject").className = "list min"
resetvalue();
}
tagTextInput.onblur = function() {
document.tagboard.className = "";
document.getElementById("tagObject").className = "list";
modifyvalue();
}
for(i = 0; i < tagInput.length; i++) {
var ind = new function() {this.i = i;};
if(tagInput[ind.i].className == 'codebuttons' && tagInput[ind.i].type != 'submit') {tagInput[ind.i].onfocus = resetvalue;} }
for(j = 0; j < tagInput.length; j++) {
var ind1 = new function() {this.j = j;};
if(tagInput[ind1.j].type == 'submit' && tagInput[ind1.j].value != 'Aggiorna') {tagInput[ind1.j].onclick = function() {if(tagTextInput.value == tagMessage) {alertTagMessage ? alert(alertTagMessage) : void(0); return false;} } } }
}
</script>
Informazioni
Il codice è compatibile con tutti i browser.
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=64095174">Tagboard: bottoni e textarea a scomparsa</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a>ed <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Tagboard: bottoni e textarea a scomparsa" href="http://ffmagazine.forumfree.it/?t=64095174"><b>Tagboard: bottoni e textarea a scomparsa</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a> ed <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Tagboard: bottoni e textarea a scomparsa
Realizzata da bored ed El Gringo 89 del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by El Gringo 89 - 28/1/2013, 01:30. -
Z e k.
User deleted
ottima guida. . -
.
Bellissimo effetto, grazie per la guida ^^ . -
.Genesis.
User deleted
Grazie . -
Totti.
User deleted
Grazie mille! (: . -
Agron‚.
User deleted
Molto bell, grazie davvero . -
.
Complimentoni bored :* . -
.opera.
User deleted
Grazie mille, complimenti a bored e a El Gringo . -
Antares‚.
User deleted
Bellissimo l'effetto *_*
Complimenti per lo script, bored!. -
.Dante..
User deleted
Grazie a questi semplici ma bei scripts possiamo dare un po di freschezza ai nostri forum! Grazie ancora! . -
mirco68.
User deleted
Ciao bored questo è il codice della mia TAG CODICE/* TAGBOARD e CHAT */
.tag .skin_tbl {padding: 4px; background: #EDEDED}
.tag .skin_tbl_border, .tag .mainbg {padding-top: 20px; background-image:url(http://dumpshare.net/images/62277BACHECA3.jpg); background-repeat: no-repeat; background-position: center center}
.tag .chat {margin-bottom: 30px}
.tag .textinput, .side_tag .textinput {font-size: 0.95em;
padding: 4px; line-height: 100%; height: 12px !important; width: 95% !important}
.tag form table.ww button.codebuttons, .tag form table.ww select, .tag form table.ww br {display: none}
.tag .list {height: 315px !important; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
.tag:hover .list {height: 265px !important}
.tag .list, .side_tag .list {font-size: 28px; font-family: 'just another hand'; font-weight: normal; color: #FFF; padding: 5px}
.tag form {position: relative; z-index: 1; visibility: hidden; opacity: 0; height: 0; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease}
.tag:hover form, .open_form {visibility: visible !important; opacity: 1 !important; height: 50px !important}
Come vedi ho eliminato qualche bottone al tag form... ora se lascio .tag: hover form impostata con height a 50px mi sale troppo in alto lasciando molto margine di spazio in fondo alla TAG, se modifico height a meno di 50px mi fa uno strano effetto
Come posso eliminare il problema?. -
~IÐir.
User deleted
Bello script, dà un tocco di classe alla tag . -
.
Grazie a tutti
@mirco68 potresti mettere il link del forum?. -
.
Ottima guida davvero sicuramente lo utilizzerò (un giorno). . -
mirco68.
User deleted
bored ti ho mandato il link in MP.... altra cosa che ho notato è che passando il mouse sulla TAG di ffmagazine se poi clicco sullo spazio dove scrivere anche spostando il mouse lo spazio rimane visibile mentre a me sparisce. Ritorna attivo solo se rimuovo il mouse sulla TAG. .