balise haut de page (affichage persistant) [Réglé]
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
J'ai réussit à positionner ma balise .scroll-to-top mais elle reste visible même quand on est en haut de la page.
Par exemple vous voyez sur <a href="http://easy-design.net/">http://easy-design.net/</a> la balise n’apparaît qu'après avoir déroulé un peu la page et je voudrai faire la même chose.
Code TPL :
Code CSS :
/* --- Scroll to Top --- */ .scroll-to { position: fixed; z-index: 9000000; display: none; background-color: none; overflow: hidden; } #scroll-to-top { right: 25px; bottom: 16px; /*padding: 9px 11px 11px 10px;*/ } .scroll-to i { font-size: 2.8em; color: #CCCCCC; transition: 0.2s; } .scroll-to:hover i { color: #8AE234; transition: 0.5s; }
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Allez, je vais être sympa , je vous donne le lien : | UItoTop jQuery Plugin 1.2 by Matt Varone

Swan
Édité par Swan Le 06/10/2016 à 09h00

babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Dans le frame.tpl de ton thème avant la fermeture de la balise head tu rajoutes ceci :
Code TPL :
Note : Moi les tous les js en ajout sont dans un dossier "JS" à la racine du thème.
La partie css tu la places dans le design.css:
Code CSS :
/*########################### Revenir en haut : Top ###########################*/ #toTop { display:none; text-decoration:none; position:fixed; bottom:20px; right:20px; overflow:hidden; width:28px; height:28px; border:none; text-indent:-999px; background-image: url(images/uitotop.png); background-repeat: no-repeat; background-position: left top; z-index: 900000; } #toTopHover { background:url(images/uitotop.png) no-repeat left -51px; width:28px; height:28px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; }
et on place l"image : "uitotop.png" dans le dossier "images".
Rien de plus simple en regardant le code source de la dite page de démo

@Babso : ok
Édité par Swan Le 06/10/2016 à 14h48

smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Code TPL :
dans body.tpl après le chevron fermant body
a part le problème de padding tout s’affiche mais ça reste persistant malgré tout :S
Citation:
Note : Moi les tous les js en ajout sont dans un dossier "JS" à la racine du thème.
C'est aussi ce que j'ai fait mais ça ne marche pas.
TU as ajouté aussi le bower.json à la racine de ton thème ?
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Merci swan !
Édité par smaj Le 06/10/2016 à 15h50
Swan Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
TU as ajouté aussi le bower.json à la racine de ton thème ?
Non, voici ce que j'ai dans mon head , je suis en PBT V3, donc j'ai du importer le jquery

Code TPL :
<script src="{PATH_TO_ROOT}/templates/{THEME}/js/jquery.min.js" type="text/javascript"></script> <script src="{PATH_TO_ROOT}/templates/{THEME}/js/easing.js" type="text/javascript"></script> <script src="{PATH_TO_ROOT}/templates/{THEME}/js/jqueryuitotop.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $.noConflict(); jQuery(document).ready(function() { jQuery().UItoTop({ easingType: 'easeOutQuart' }); }); //]]> </script> </head>
Swan.

smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Je n'ai plus qu'à adapter ! Merci pour ce coup de main !
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Code TPL :
# INCLUDE JS_TOP # <script src="{PATH_TO_ROOT}/templates/{THEME}/js/easing.js" type="text/javascript"></script> <script src="{PATH_TO_ROOT}/templates/{THEME}/js/jqueryuitotop.js"></script> <script type="text/javascript"> //<![CDATA[ $.noConflict(); jQuery(document).ready(function() { jQuery().UItoTop({ easingType: 'easeOutQuart' }); }); //]]> </script> </head>
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Swan a répondu sur le sujet:
Mais vu que PBt embarque déjà le Jquery, je pense qu'il ne faut pas inclure celui du tuto.
Mais vu que PBt embarque déjà le Jquery, je pense qu'il ne faut pas inclure celui du tuto.
?
Pour le moment la balise ne fonctionne pas donc je vais faire avec ça jusqu'à ce que la 5.0 sorte mais je suis patient. Le principale c'est que ça fonctionne même si c'est du bricolage.
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Pour le moment la balise ne fonctionne pas donc je vais faire avec ça jusqu'à ce que la 5.0 sorte mais je suis patient. Le principale c'est que ça fonctionne même si c'est du bricolage.
Bonjour smaj,
La v5.0.10 est sortie depuis quelques jours déjà et le jQuery est embarqué depuis la v5.0.1 il me semble

Olivier.
Olivier


janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
Depuis la v5.0.0 même.
Cordialement, janus57
smaj Membre non connecté
Booster Roquette
-
Booster Roquette
- Voir le profil du membre smaj
- Inscrit le : 17/01/2016
- Groupes :
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
