Buton "Go to top"

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Mar 23 Dec - 16:45

Salutare,aș vrea un buton "Go to up" versiunea phpBB2 ca la cea de PunBB/IPB .
Imagine : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Sărbători fericite!


Ultima editare efectuata de catre Claudiu Mazare™ in Vin 26 Dec - 16:32, editata de 3 ori

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Mier 24 Dec - 13:47

Bună,

Navigați în PA > Module > Gestiunea codurilor JavaScript > Creati un nou cod Javascript, Amplasare : Toate paginile:
Cod:
$(function(){
    $("#page-footer").before("<div class=\"circle backtop\"><div class=\"triangle\"></div></div>");
    $('.backtop').click(function() {
        $('body, html').animate({scrollTop:0}, 700);
    });
});
Și apoi adăugați în foaia de stil CSS:
Cod:
.circle {
    height: 30px;
    width: 30px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}

.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 7px;
    margin: 0px auto;
    border-bottom: 12px solid #555;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Joi 25 Dec - 16:03

Salutare,

Toate sunt în regulă,doar că vreau acel "cerc" mai gros,să se vadă cât de cât . Foarte fericit
Iar triunghiul din cerc să fie mai "hd" ,cum s-ar spune...să fie în linii drepte,fără întrerupere. Foarte fericit
Iar tot butonul,să-l mai măriți cu 2px. Foarte fericit
Mulțumesc mult! Foarte fericit

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Joi 25 Dec - 17:07

Uhm...nu sunt sigur că am înțeles totul. Am mărit puțin butonul, mai trebuia să fac ceva?
Cod:
.circle {
    height: 40px;
    width: 40px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}
.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 11px;
    margin: 0px auto;
    border-bottom: 14px solid #555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Vin 26 Dec - 13:54

Mărimea acum e perfectă .
Mai vreau dor să se vadă mai mult acel cerc . (de la buton)
Să fie mai gros. Foarte fericit (dar să rămână transparent)
Mulțumesc! Fericit

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Vin 26 Dec - 14:06

Cod:
.circle {
    height: 50px;
    width: 50px;
    margin: 0 auto;
    background: #111;
    border-radius: 100px;
    box-shadow: inset 0px 1px 5px #000;
}
.triangle {
    height: 0;
    width: 0;
    position: relative;
    top: 16px;
    margin: 0px auto;
    border-bottom: 14px solid #555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
Dacă doriți să vă mai jucați cu mărimea cercului, modificați height: 50px; și width: 50px;, și apoi top: 16px; pentru a ajusta poziția acelui triunghi, pe înălțime.

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Vin 26 Dec - 15:53

Mărimea e potrivită,tot .
Dar nu-mi apare acel cerc :

Link imagine : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Vin 26 Dec - 16:00

Probabil din cauză că înainte de cod aveți o bară
Cod:
------------------------------------------------------------
Dacă doriți să adăugați, separați, comentați ceva într-un cod CSS, adăugați între /* și */
Cod:
/* conținut, comentariu orice */

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Vin 26 Dec - 16:07

Cu asta am rezolvat,dar mai vreau ca atunci când pui cursorul de la mouse să se "aprindă" Foarte fericit
EDIT :
Uite așa :
Și când pui cursorul de la mouse :

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Vin 26 Dec - 16:19

Adaugă asta:
Cod:
.circle:hover {
  background-color: #222;
}
.circle:hover .triangle {
  border-bottom-color: #999;
}
Puteți modifica culoriel cum doriți, prima e pentru cerc, a doua pentru triunghi la hover.

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ la data de Vin 26 Dec - 16:33

Rezolvat,mulțumesc de tot! Foarte fericit

Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 21
Localizare : Târgu-Jiu
Data de inscriere : 07/12/2013
Multumiri : 3
2 avertismente

http://www.scoalastanesti.toxicfarm.com

Sus In jos

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Cosmin la data de Vin 26 Dec - 17:31

Cu plăcere. A face cu ochiul
topic rezolvat

Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 19
Localizare : rice fields
Data de inscriere : 20/05/2013
Multumiri : 122
Niciun avertisment

http://help.forumgratuit.ro/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum