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 : http://i.imgur.com/u1xa3qk.png
Sărbători fericite!


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

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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;
}
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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
avatar
Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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;
}
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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
avatar
Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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.
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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 : http://i.imgur.com/9bcVUIM.jpg
avatar
Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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 */
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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 :
avatar
Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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.
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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
avatar
Claudiu Mazare™
Membru Forumgratuit

masculin

Mesaje : 101
Varsta : 22
Localizare : Târgu-Jiu
Data înscrierii : 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
avatar
Cosmin
Membru activ

masculin

Mesaje : 1460
Varsta : 20
Localizare : rice fields
Data înscrierii : 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