Scarica NeoFrag
registrati

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

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

38 soggetti, 883 risposte

Hanno contribuito donatori
Messaggio non letto
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" !
ritorno
7 partecipanti
21 risposte
Pytchounn

18 soggetti, 160 risposte
Messaggio non letto
désolé mais sur le theme default ? J'ai essayé mais je peux descendre la page jusqu’à no limite
Zaekof

38 soggetti, 883 risposte

Hanno contribuito donatori
Messaggio non letto
avec un overrides tu la fait ?
"N'arrêtez jamais d'apprendre" !
Pytchounn

18 soggetti, 160 risposte
Messaggio non letto
oui mais j'imagine qu'il faut pas écrire dungeon ?
Zaekof

38 soggetti, 883 risposte

Hanno contribuito donatori
Messaggio non letto
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 soggetti, 160 risposte
Messaggio non letto
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 soggetti, 160 risposte
Messaggio non letto
Bonjour,

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

6 soggetti, 15 risposte
Messaggio non letto
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 soggetti, 883 risposte

Hanno contribuito donatori
Messaggio non letto
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 soggetto , 19 risposte
Messaggio non letto
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 soggetti, 132 risposte

donatori
Messaggio non letto
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 soggetto , 19 risposte
Messaggio non letto
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 soggetti, 875 risposte

Hanno contribuito
Messaggio non letto
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 soggetto , 19 risposte
Messaggio non letto
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 soggetti, 132 risposte

donatori
Messaggio non letto
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 soggetti, 474 risposte
Messaggio non letto
il te manque " neofrag " regarde bien le message d eResnova
Debout les morts !
ritorno