Télécharger NeoFrag
Connexion

[Tuto] - Flèche retour en haut de la page

198 vues
[Tuto] - Flèche retour en haut de la page
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
Bonjour à tous,
Aujourd'hui nouveau tuto pour vous montrer comment ajouter/installer une flèche qui remonte en haut du site quand on appuie dessus quand on se trouve en bas ou milieu du site.

Déjà il vous faut créer un overrides comme ceci :

./overrides/themes/dungeon/views/body.tpl.php
/overrides/themes/dungeon/css/style.css

body.tpl.php :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/easing.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/jqueryuitotop.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
$.noConflict();
jQuery(document).ready(function() {
jQuery().UItoTop({ easingType: 'easeOutQuart' });
});
//]]>
</script>

style.css :

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:20px;
right:20px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png);
background-repeat: no-repeat;
background-position: left top;

}

#toTopHover {
background:url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

archive complète :
https://mega.nz/#!Oxhz3bwL…

Screens :





Si vous avez des problème avec vos background faite comme ceci dans votre css :

body {
background-image: url('<?php echo $NeoFrag->config->dungeon_background ? path($NeoFrag->config->dungeon_background) : '/themes/dungeon/images/backgrounds/default.jpg'; ?>');
"N'arrêtez jamais d'apprendre" !
Retour
7 participants
21 réponses
Pytchounn

18 sujets, 160 réponses
Message non lu
désolé mais sur le theme default ? J'ai essayé mais je peux descendre la page jusqu’à no limite
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
avec un overrides tu la fait ?
"N'arrêtez jamais d'apprendre" !
Pytchounn

18 sujets, 160 réponses
Message non lu
oui mais j'imagine qu'il faut pas écrire dungeon ?
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
non ^^
essaye avec default, c'est pas pour te faire chier, mais @eResnova a fait un beau tuto avec :)
http://www.neofrag.fr/forum/topic/290/overrides…
"N'arrêtez jamais d'apprendre" !
Pytchounn

18 sujets, 160 réponses
Message non lu
Ok cimer

Si vous avez des problème avec vos background faite comme ceci dans votre css :

body {
background-image: url('<?php echo
$NeoFrag->config->dungeon_background ?
path($NeoFrag->config->dungeon_background) : '/themes/dungeon/images/backgrounds/default.jpg'; ?>');


Quelle genre de problème ?
Pytchounn

18 sujets, 160 réponses
Message non lu
Bonjour,

C'est possible d'avoir la même chose mais au lieu de remonter ca renvoie a l'accueil.
SkaalZealot

6 sujets, 15 réponses
Message non lu
je ne comprend pas le plus simple serai de faire une div #top vide tout en haut et ensuite tu fait le style de ton bouton et enfin viens le js

  1. $(function(){
  2. $('#top').click(function() {
  3. $('html,body').animate({scrollTop: 0}, 'slow');
  4. });
  6. $(window).scroll(function(){
  7. if($(window).scrollTop()<500){
  8. $('#btn_up').fadeOut();
  9. }else{
  10. $('#btn_up').fadeIn();
  11. }
  12. });
  13. });

en bonus tu peut aussi faire en sorte que le btn apparaît au milieu du scrolling ou un bouton flottant qui suit le scroll.
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
oui merci @neecride, j'ai peut de connaissance en js, j'ai du mal a innover encore.
Je prend en compte ton code sur mon site :).
"N'arrêtez jamais d'apprendre" !
Vic Vipers

1 sujet, 19 réponses
Message non lu
Merci pour ce p'tit tuto, c'est simple et nickel, en plus j'ai appris le concept "overrides" qui est tous simplement géniale!
amir_games

17 sujets, 132 réponses

Donateurs
Message non lu
Je pense que c'est pas compatible avec la 0.1.5.1

Chez moi sa fonctionne pas en tout cas ^^ Theme de base
Gérant de la communauté Inferia Gaming
Vic Vipers

1 sujet, 19 réponses
Message non lu
J'ai aucun soucis avec le thèmes dungeon en 0.1.5.1. j'ai créé le fichier overrides à la racine "/" comme indiqué en y mettant une copie des fichiers body.tpl.php
 et style.css puis j'ai ajouté les deux parties de script chacune dans son ficher respectif à la suite du script original.

Pour le thèmes de base, j'ai testé la même procédure comme suit: /overrides/neofrag/themes/default/views/body.tpl.php et /overrides/neofrag/themes/default/css/style.css, cela ne fonctionne effectivement pas. Sur le thème de base il y a plusieurs fichiers dans css et views, si ça ne fonctionne pas c'est surement du à ça. Il faudrait voir comment l'adapter.

Je vais essayer de bidouiller un peu, je te tien au courant si j'y arrive @amir_games ;)
eResnova

17 sujets, 875 réponses

Contributeurs Staff
Message non lu
Bonjour,

Cela marche aussi sur le thème par défaut mais votre chemin d'override est faux :)

/overrides/neofrag/

/overrides/themes/default/...
Vic Vipers

1 sujet, 19 réponses
Message non lu
J'étais en train d'essayer et je venais tout content d'avoir trouvé... C'est se qui s'appelle se faire couper l'herbe sous le pied! ^^
+1 pour la réactivité!
amir_games

17 sujets, 132 réponses

Donateurs
Message non lu
Hello,

Je viens d'essayer avec le chemin /www/overrides/themes/default/css
mais rien ne change malheureusement
Gérant de la communauté Inferia Gaming
crazy

60 sujets, 474 réponses
Message non lu
il te manque " neofrag " regarde bien le message d eResnova
Debout les morts !
Retour