Tagboard: bottoni e textarea a scomparsa

« Older   Newer »
 
  Share  
.
  1.     +19    
     
    .
    Avatar

    Advanced Member

    Group
    M. Onorario
    Posts
    4,488
    Activity Level
    +2

    Status
    Anonymous

    Tagboard: bottoni e textarea a scomparsa
    Rendere il form della tagboard visibile solo al passaggio del mouse
    jpg
    [ANTEPRIMA]



    Installazione
    Codice CSS da inserire in Colori e Stili
    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 soltanto height: 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 modificato height: 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 pagine
    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 TagBoard
    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>



    Edited by El Gringo 89 - 28/1/2013, 01:30
     
    Top
    .
  2. Z e k
         
     
    .

    User deleted


    ottima guida. :D
     
    Top
    .
  3.      
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    40,551
    Activity Level
    0
    Location
    Trinacria

    Status
    Anonymous
    Bellissimo effetto, grazie per la guida ^^
     
    Top
    .
  4. .Genesis
         
     
    .

    User deleted


    Grazie
     
    Top
    .
  5.      
     
    .
    Avatar

    Advanced Member

    Group
    Lettore
    Posts
    1,882
    Activity Level
    0

    Status
    Anonymous
    Grazie mille! (:
     
    Top
    .
  6. Agron‚
         
     
    .

    User deleted


    Molto bell, grazie davvero :)
     
    Top
    .
  7.      
     
    .
    Avatar

    Senior Member

    Group
    Lettore
    Posts
    10,077
    Activity Level
    0
    Location
    Fano

    Status
    Offline
    Complimentoni bored :*
     
    Top
    .
  8. .opera
         
     
    .

    User deleted


    Grazie mille, complimenti a bored e a El Gringo :)
     
    Top
    .
  9. Antares‚
         
     
    .

    User deleted


    Bellissimo l'effetto *_*
    Complimenti per lo script, bored!
     
    Top
    .
  10. .Dante.
        +1    
     
    .

    User deleted


    Grazie a questi semplici ma bei scripts possiamo dare un po di freschezza ai nostri forum! Grazie ancora!
     
    Top
    .
  11. 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?
     
    Top
    .
  12. ~IÐir
         
     
    .

    User deleted


    Bello script, dà un tocco di classe alla tag :sisi:
     
    Top
    .
  13.      
     
    .
    Avatar

    Advanced Member

    Group
    M. Onorario
    Posts
    4,488
    Activity Level
    +2

    Status
    Anonymous
    Grazie a tutti ^_^
    @mirco68 potresti mettere il link del forum?
     
    Top
    .
  14.      
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    3,881
    Activity Level
    0
    Location
    Italia

    Status
    Offline
    Ottima guida davvero :flower: sicuramente lo utilizzerò (un giorno).
     
    Top
    .
  15. 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.
     
    Top
    .
39 replies since 28/11/2012, 22:19   5109 views
  Share  
.
Top