Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Buton "Go to top"

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Mar Dec 23, 2014 4:45 pm

Salutare,aş vrea un buton "Go to up" versiunea phpBB2 ca la cea de PunBB/IPB .
Imagine : https://i.imgur.com/u1xa3qk.png
Sărbători fericite!


Ultima editare efectuata de catre Claudiu Mazare™ in Vin Dec 26, 2014 4:32 pm, editata de 3 ori
Claudiu Mazare™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Mier Dec 24, 2014 1:47 pm

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;
}
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Joi Dec 25, 2014 4:03 pm

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™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Joi Dec 25, 2014 5:07 pm

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;
}
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Vin Dec 26, 2014 1:54 pm

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™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Vin Dec 26, 2014 2:06 pm

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.
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Vin Dec 26, 2014 3:53 pm

Mărimea e potrivită,tot .
Dar nu-mi apare acel cerc :
Buton "Go to top" 9bcVUIM
Link imagine : https://i.imgur.com/9bcVUIM.jpg
Claudiu Mazare™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Vin Dec 26, 2014 4:00 pm

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 */
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Vin Dec 26, 2014 4:07 pm

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 : Buton "Go to top" DJkOhXS
Şi când pui cursorul de la mouse :
Buton "Go to top" Se0lQf5
Claudiu Mazare™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Vin Dec 26, 2014 4:19 pm

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.
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Claudiu Mazare™ Vin Dec 26, 2014 4:33 pm

Rezolvat,mulţumesc de tot! Foarte fericit
Claudiu Mazare™

Claudiu Mazare™
Membru Forumgratuit

Mesaje : 101
Varsta : 29
Localizare : Târgu-Jiu
Data înscrierii : 07/12/2013
Mulțumiri : 3
Internet Explorer phpBB2

http://www.scoalastanesti.toxicfarm.com
Claudiu Mazare™ a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Buton "Go to top"

Mesaj Scris de Vizitator Vin Dec 26, 2014 5:31 pm

Cu plăcere. A face cu ochiul
topic rezolvat
Anonymous

Vizitator
Vizitator


Vizitator a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum