Baixar NeoFrag
assinar em

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

198 visualizações
[Tuto] - Flèche retour en haut de la page
Zaekof

38 assuntos, 883 respostas

contribuintes doadores
Mensagem não lida
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" !
retorno
7 participantes
21 respostas
Pytchounn

18 assuntos, 160 respostas
Mensagem não lida
désolé mais sur le theme default ? J'ai essayé mais je peux descendre la page jusqu’à no limite
Zaekof

38 assuntos, 883 respostas

contribuintes doadores
Mensagem não lida
avec un overrides tu la fait ?
"N'arrêtez jamais d'apprendre" !
Pytchounn

18 assuntos, 160 respostas
Mensagem não lida
oui mais j'imagine qu'il faut pas écrire dungeon ?
Zaekof

38 assuntos, 883 respostas

contribuintes doadores
Mensagem não lida
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 assuntos, 160 respostas
Mensagem não lida
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 assuntos, 160 respostas
Mensagem não lida
Bonjour,

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

6 assuntos, 15 respostas
Mensagem não lida
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 assuntos, 883 respostas

contribuintes doadores
Mensagem não lida
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 assunto , 19 respostas
Mensagem não lida
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 assuntos, 132 respostas

doadores
Mensagem não lida
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 assunto , 19 respostas
Mensagem não lida
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 assuntos, 875 respostas

contribuintes
Mensagem não lida
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 assunto , 19 respostas
Mensagem não lida
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 assuntos, 132 respostas

doadores
Mensagem não lida
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 assuntos, 474 respostas
Mensagem não lida
il te manque " neofrag " regarde bien le message d eResnova
Debout les morts !
retorno