Dans ton template-extension (pour footer.tpl) avant: <div id="copyright">
En démo sur ma galerie, placé dans ./template-common/images/
{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"} <style type="text/css" media="screen"> #scrolltotop {ldelim} bottom:14px; position:fixed; right:0; z-index:1000; opacity:0; } #scrolltotop a {ldelim} background-color:transparent; background-image: url({$ROOT_URL|@cat:"template-common/images/top.png"}); background-position:left top; background-repeat:no-repeat; display:block; height:50px; text-indent:-9999px; width:44px; border:0; } </style> {literal} <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ stt = $('#scrolltotop'); $(window).scroll(function(){ scrollTop = $(window).scrollTop(); $('#scrolltotop a').click(function(){ $('html,body').stop().scrollTop(0); }); if(scrollTop >= 300){ if(stt.css('opacity') == 0){ stt.stop().fadeTo(2000,1); } }else{ if(stt.css('opacity') > 0){ stt.stop().fadeTo(500,0); } } }); $(window).scroll(); }); </script> {/literal} <div id="scrolltotop"><a href="#">Top</a></div>
Hors ligne
VDigital a écrit:
Dans ton template-extension (pour footer.tpl) avant: <div id="copyright">
En démo sur ma galerie, http://www.vdigital.org/piwigo/template … es/top.png placé dans ./template-common/images/
Joli ;))
Et ça disparaît même quand on remonte !
Hors ligne
Gotcha a écrit:
tosca a écrit:
Gotcha a écrit:
L'expression du besoin n'est pas là pour faire une analyse technique poussée. Ca doit se résumé à une phrase même ^^
C'est toi qui vois ...
Alors ça c'est clarinette et pas du pipeau. Un besoin est exprimé par Monsieur tout le monde que l'on défini par l'utilisateur. L'utilisateur n'est pas censé avoir de connaissances techniques particulières et encore moins connaître LA solution à son problème. C'est là qu'intervient les bureaux d'études. Font suivre aux bureau des méthodes ainsi de suite. Le produit (solution) revient ainsi en bout de chaîne à l'utilisateur :-D
[HS]
J'arrive après la bataille... mais je m'exprime quand même :)
Pour travailler justement dans un domaine où les expressions de besoins sont ma matière première, je peux vous garantir qu'une simple phrase ne suffit pas toujours. Voir, çà suffit très rarement ;-)
Par contre l'expression de besoin ne doit jamais être technique. Elle doit se cantonner à la définition du besoin de l'utilisateur.
En l'occurence ton besoin pourrait s'exprimer ainsi :
Lorsque lors de la lecture d'une page le défilement vertical atteint un certain seuil, il faut afficher un élément interactif permettant lorsque l'on clique dessus, de repositionner la lecture au début de la page.
C'est une phrase.
Mais ce n'est pas assez, on pourrait rajouter les précisions suivantes :
- le seuil vertical à partir duquel l'élément s'affiche peut être exprimé soit en hauteur absolue - nombre de pixels, soit en hauteur relative - % de la hauteur de la fenêtre du navigateur
- la position de l'élément permettant un retour au début de la page est fixée par rapport à la fenêtre du navigateur (quelle que soit le point de défilement de la page, l'élément ne doit pas bouger sur celle-ci)
- l'élément à afficher est un texte mis en forme, ou une image
- l'élément ne s'affiche que sur les pages de type "catégorie" (ne pas l'afficher sur les pages "image", "tags", "commentaires", ...)
Sans ce type de précisions, je te fais ce que bon me semble (et çà ne répondra pas forcément à ton besoin)
La façon dont la réalisation sera effectuée importe peu à l'utilisateur (c'est le programmeur qui décide en fonction de l'environnement, des outils, de son savoir faire...)
L'utilisateur peu parfois imposer des contraintes technique dans certains cas (il veut que çà fonctionne sous linux par que le logiciel propriétaire c'est pas open, il veut du jQuery parce que sa galerie dispose déjà de jQuery et qu'il ne veut pas d'un second framework, ...)
Après sur le forum, on n'est pas obligé de s'astreindre à une telle rigueur : il n'y pas d'enjeux financiers ou humains, il n'y a rien de contractuel.
Il n'empêche que plus c'est précis dans le besoin, plus c'est facile de se comprendre ;-)
[HS]
Hors ligne
grum a écrit:
Pour travailler justement dans un domaine où les expressions de besoins sont ma matière première, je peux vous garantir qu'une simple phrase ne suffit pas toujours. Voir, çà suffit très rarement ;-)
Par contre l'expression de besoin ne doit jamais être technique. Elle doit se cantonner à la définition du besoin de l'utilisateur.
En l'occurence ton besoin pourrait s'exprimer ainsi :
Lorsque lors de la lecture d'une page le défilement vertical atteint un certain seuil, il faut afficher un élément interactif permettant lorsque l'on clique dessus, de repositionner la lecture au début de la page.
etc, etc.
Un grand merci pour ton avis sur la question, avis que je partage totalement pour avoir longtemps moi-même "sévi" dans le domaine ;)
Je n'avais pas voulu continuer ce qui semblait dériver un peu en polémique ; mais je me sens quand même un peu moins seule (même si j'étais tout à fait certaine de ma position :))
Hors ligne
Précisions:
Gotcha a la capacité d'adapter ma solution à son besoin (au moins pour la page d'accueil uniquement) bien que dans la solution je reviens à répondre à tous les cas au lieu du "au moins").
Le problème de départ se situe plus encore dans l'expression du besoin par référence sur un forum.
Si on écrit: "Je voudais faire comme sur le site ....".
Certes, nous comprenons tous dans l'instant présent mais le temps va passer et ...
Si le site de référence évolue et ne référence plus cette fonction, l'utilisateur qui voudrait obtenir le même résultat ne retrouvera pas la solution et ne comprendra pas à quoi peut bien servir le machin. (Le titre "Ajouter du code jQuery" est un simple élément du besoin ou de la solution).
Donc, sur un forum, il peut être utile d'indiquer une référence externe mais il faut commencer à expliquer de façon précise et dans sa langue le besoin réel, et le justifier (ce qui était indiqué je veux bien l'admettre "page d'accueil ... à rallonge").
Je verrais bien cette astuce au moins pour la page d'accueil de ma galerie qui est à rallonge.
Le titre devait être quelque chose comme "Pages trop longues: Un lien vers le haut".
Hors ligne
VDigital a écrit:
Le problème de départ se situe plus encore dans l'expression du besoin par référence sur un forum.
Si on écrit: "Je voudais faire comme sur le site ....".
Certes, nous comprenons tous dans l'instant présent mais le temps va passer et ...
Si le site de référence évolue et ne référence plus cette fonction, l'utilisateur qui voudrait obtenir le même résultat ne retrouvera pas la solution et ne comprendra pas à quoi peut bien servir le machin ...
+1 Très juste.
J'ajouterais cependant - et cela déborde largement le cadre de l'informatique - qu'il est rarement inutile de jeter quelques lignes sur le papier (ou l'écran) pour définir clairement ce que l'on souhaite ; ça permet déjà d'éviter de se faire fourguer/vendre n'importe quelle solution pas forcément adaptée.
Mais on est aussi souvent amener à re-travailler son besoin, ajouter quelques détails, en retirer, imposer/retirer/hiérarchiser des contraintes etc. ... bref à évoluer suffisamment pour que le besoin réel à satisfaire ne soit plus forcément celui de départ, voir à envisager des pistes de solutions tout à fait autres que celles envisagées au début ;)
Hors ligne
Salut Vincent,
Pour info j'ai voulu testé ton code sans aucune modif juste en faisant un copier coller et en gardant la même image que toi et résultat je n'ai rien :o((, bien sur j'ai créé le répertoire images dans /template-common/ et mis ton image top.png dedans.
Est ce qu'il y a une spécificité que je n'ai pas saisi ??
Merci pour ta réponse.
Seb
Edit : A première vue le code fonctionne bien puisque j'ai bien un lien en bas à droite sur mon site mais ton image n'apparait pas et "fondu enchainé" :o(
Dernière modification par SNF69 (2009-12-27 21:44:06)
Hors ligne
Je redonne mon code au cas où:
{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"} <style type="text/css" media="screen"> #scrolltotop {ldelim} bottom:14px; position:fixed; right:0; z-index:1000; opacity:0; } #scrolltotop a {ldelim} background-color:transparent; background-image: url({$ROOT_URL|@cat:"/template-common/images/top.png"}); background-position:left top; background-repeat:no-repeat; display:block; height:50px; text-indent:-9999px; width:44px; border:0; } </style> {literal} <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ stt = $('#scrolltotop'); $(window).scroll(function(){ scrollTop = $(window).scrollTop(); $('#scrolltotop a').click(function(){ $('html,body').stop().scrollTop(0); }); if(scrollTop >= 300){ if(stt.css('opacity') == 0){ stt.stop().fadeTo(2000,1); } }else{ if(stt.css('opacity') > 0){ stt.stop().fadeTo(500,0); } } }); $(window).scroll(); }); </script> {/literal} <div id="scrolltotop"><a href="#">Top</a></div> <div id="copyright"> ....
Maintenant si tu me donnes le lien vers ton .tpl, je pourrais l'examiner et avoir peut-être une idée.
;-)
Hors ligne
Je viens de refaire un test mais pas mieux :o(( mais si tu veux y jeter un coup d'œil je t'ai mis admin sur ma galerie :o))
Merci pour ton aide car cette fonction m'intéresse il faut juste que je change, à terme, l'image ;o)
Seb
Hors ligne
Evident...
En conflit avec /js/mootools.js, je vais enfin vérifier la solution... et je publierai.
;-)
Hors ligne
Merci monsieur je pensais bien que ça pouvais venir de là mais au moins tu as pu vérifier c'est pas plus mal :o)
Encore merci pour ton passage, je te laisse les droits comme ça si tu as besoins de faire des tests.
Seb
Dernière modification par SNF69 (2009-12-27 22:04:53)
Hors ligne
Du fait que le framework mootools.js
est dans le body c'est assez simple (tout est relatif disait Einstein).
Le template-extension du footer devient:
{literal} <script type="text/javascript"> jQuery(document).ready(function($){ stt = $('#scrolltotop'); $(window).scroll(function(){ scrollTop = $(window).scrollTop(); $('#scrolltotop a').click(function(){ $('html,body').stop().scrollTop(0); }); if(scrollTop >= 300){ if(stt.css('opacity') == 0){ stt.stop().fadeTo(2000,1); } }else{ if(stt.css('opacity') > 0){ stt.stop().fadeTo(500,0); } } }); $(window).scroll(); }); </script> {/literal} <div id="scrolltotop"><a href="#">Top</a></div> <div id="copyright"> ...
Mais le template-extension du header.tpl se complexifie:
... <link rel="stylesheet" type="text/css" href="template/yoga/theme/montblancxl/css/slideshow.css" media="screen" /> {* Vincent transfered from footer to header *} <style type="text/css" media="screen"> #scrolltotop {ldelim} bottom:14px; position:fixed; right:0; z-index:1000; opacity:0; } #scrolltotop a {ldelim} background-color:transparent; background-image: url({$ROOT_URL|@cat:"/template-common/images/top.png"}); background-position:left top; background-repeat:no-repeat; display:block; height:50px; text-indent:-9999px; width:44px; border:0; } </style> {known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"} <script type="text/javascript"> jQuery.noConflict(); </script> </head> ...
Moralité:
L'include du framework jQuery est bien immédiatement suivi de l'appel de jQuery.noConflict();
Ensuite bien plus tard le ready est appelé par un premier jQuery(document).ready(...
Pour les appels suivant inclus dans ready, un simple $ suffit, il n'y a plus d'ambigüité avec mootools.
;-)
Hors ligne
Tu peux changer ton image si tu veux...
Je m'enlève l'admin...
;-)
Hors ligne
Ouffff merci Vincent et bravo :o)) Puis je me permettre d'abuser encore un petit peux en te demandant s'il est possible d'avoir une info bulle sur le lien ? ;o)
Bravo à toi en tout cas je vais juste modifier l'image pour la rendre plus dans les tons de mon site et c'est tout bon :o)
Seb
Hors ligne
title="{'Scroll to top'|translate}"
<div id="scrolltotop"><a href="#" title="{'Scroll to top'|translate}">Top</a></div>
Hors ligne