balise haut de page (affichage persistant)

balise haut de page (affichage persistant) [Réglé]

smaj Membre non connecté

Booster Roquette

Le 06/10/2016 à 08h38

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Bonjour

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 :

<a style="display: inline" href="#" id="scroll-to-top" class="scroll-to" >
    <i class="fa fa-chevron-circle-up"></i>
</a>

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

Le 06/10/2016 à 09h00

#154420

Booster Mortier
Voir le profil du membre Swan
Inscrit le : 31/05/2013
Site internet

Bonjour,

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

swan_signature

babsolune Membre non connecté

Equipe Développement Administrateur

Le 06/10/2016 à 09h27

#154421

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :
Equipe Développement

Ce sera natif sur le thème Base en 5.1

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

smaj Membre non connecté

Booster Roquette

Le 06/10/2016 à 10h41

#154422

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Merci pour le lien mais pour le moment je ne comprend pas comment le faire fonctionner.

Swan Membre non connecté

Booster Mortier

Le 06/10/2016 à 14h47

#154429

Booster Mortier
Voir le profil du membre Swan
Inscrit le : 31/05/2013
Site internet

Re,

Dans le frame.tpl de ton thème avant la fermeture de la balise head tu rajoutes ceci :

Code TPL :

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

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

swan_signature

smaj Membre non connecté

Booster Roquette

Le 06/10/2016 à 15h32

#154432

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Il doit manquer quelque chose j'ai bien ajouté le script comme dit juste au dessus ainsi que ceci:

Code TPL :

<a style="display: inline;" href="#" id="toTop"><span style="opacity: 0;" id="toTopHover"></span>To Top</a>

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

Le 06/10/2016 à 15h50

#154433

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Ha bah si c'est tout bon t'avais renommé les scripts dans {theme}/js/*.js

Merci swan !

Édité par smaj Le 06/10/2016 à 15h50

Swan Membre non connecté

Booster Mortier

Le 06/10/2016 à 16h36

#154434

Booster Mortier
Voir le profil du membre Swan
Inscrit le : 31/05/2013
Site internet

Citation:

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.

swan_signature

smaj Membre non connecté

Booster Roquette

Le 06/10/2016 à 18h42

#154441

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Génial! Quelle classe !

Je n'ai plus qu'à adapter ! Merci pour ce coup de main !

smaj Membre non connecté

Booster Roquette

Le 06/10/2016 à 18h53

#154443

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Par contre le bug tracker v5 ne semble pas apprécier la présence du jquery-1.7.2.min.js. Le menu sur les petits écran en prend un coup il disparaît littéralement ainsi que le script qui affiche le diagramme des stats donc j'ai gardé que ça:

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

Le 06/10/2016 à 23h43

#154451

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Citation:

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.

?

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é

Equipe Assistance Modérateur

Le 07/10/2016 à 15h12

#154456

Modérateur
Voir le profil du membre olivierb
Inscrit le : 07/02/2014
Site internet
Groupes :
Equipe Assistance

smaj:

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é

Equipe Assistance Booster Fusée

Le 07/10/2016 à 15h29

#154457

Booster Fusée
Voir le profil du membre janus57
Inscrit le : 07/12/2007
Groupes :
Equipe Assistance

Bonjour,

Depuis la v5.0.0 même.

Cordialement, janus57

smaj Membre non connecté

Booster Roquette

Le 07/10/2016 à 15h35

#154458

Booster Roquette
Voir le profil du membre smaj
Inscrit le : 17/01/2016
Groupes :

Oui j'ai vu la balise dans body.tpl mais ça marche pas en tout cas chez moi rien ne s'affiche même pas le chevron sauf si je modifie un peu la ligne mai il reste persistant.

Créations de Modules

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie