Download NeoFrag
Connection

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

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

38 subjects, 883 replies

Contributors donors
Unread message
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" !
Return
7 participants
21 replies
Pytchounn

18 subjects, 160 replies
Unread message
désolé mais sur le theme default ? J'ai essayé mais je peux descendre la page jusqu’à no limite
Zaekof

38 subjects, 883 replies

Contributors donors
Unread message
avec un overrides tu la fait ?
"N'arrêtez jamais d'apprendre" !
Pytchounn

18 subjects, 160 replies
Unread message
oui mais j'imagine qu'il faut pas écrire dungeon ?
Zaekof

38 subjects, 883 replies

Contributors donors
Unread message
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 subjects, 160 replies
Unread message
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 subjects, 160 replies
Unread message
Bonjour,

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

6 subjects, 15 replies
Unread message
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 subjects, 883 replies

Contributors donors
Unread message
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 subject , 19 replies
Unread message
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 subjects, 132 replies

donors
Unread message
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 subject , 19 replies
Unread message
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 subjects, 875 replies

Contributors
Unread message
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 subject , 19 replies
Unread message
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 subjects, 132 replies

donors
Unread message
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 subjects, 474 replies
Unread message
il te manque " neofrag " regarde bien le message d eResnova
Debout les morts !
Return