#31 2009-12-23 22:40:26

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

Dans ton template-extension (pour footer.tpl) avant: <div id="copyright">
En démo sur ma galerie, http://www.vdigital.org/piwigo/template-common/images/top.png placé dans ./template-common/images/

Code:

{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>

Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#32 2009-12-23 22:43:48

tosca
Former Piwigo Team
Cévennes (Gard)
2006-09-23
3818

Re: [Résolu] Icône furtive pour remonter

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

#33 2009-12-24 00:21:38

grum
Équipe Piwigo
50% Nantes - 50% Paris
2007-09-10
2502

Re: [Résolu] Icône furtive pour remonter

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]


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#34 2009-12-24 00:29:00

tosca
Former Piwigo Team
Cévennes (Gard)
2006-09-23
3818

Re: [Résolu] Icône furtive pour remonter

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

#35 2009-12-24 08:12:00

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

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".


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#36 2009-12-24 08:23:45

tosca
Former Piwigo Team
Cévennes (Gard)
2006-09-23
3818

Re: [Résolu] Icône furtive pour remonter

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

#37 2009-12-27 21:37:58

SNF69
Membre
Lyon (69)
2009-04-10
1253

Re: [Résolu] Icône furtive pour remonter

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)


Ma galerie ?? c'est par ici : Galerie de Stephy et Seb

Hors ligne

#38 2009-12-27 21:47:54

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

Je redonne mon code au cas où:

Code:

{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.
;-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#39 2009-12-27 21:54:08

SNF69
Membre
Lyon (69)
2009-04-10
1253

Re: [Résolu] Icône furtive pour remonter

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


Ma galerie ?? c'est par ici : Galerie de Stephy et Seb

Hors ligne

#40 2009-12-27 22:01:58

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

Evident...

En conflit avec /js/mootools.js, je vais enfin vérifier la solution... et je publierai.
;-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#41 2009-12-27 22:04:12

SNF69
Membre
Lyon (69)
2009-04-10
1253

Re: [Résolu] Icône furtive pour remonter

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)


Ma galerie ?? c'est par ici : Galerie de Stephy et Seb

Hors ligne

#42 2009-12-27 22:17:31

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

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:

Code:

{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:

Code:

...
  <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.

;-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#43 2009-12-27 22:19:28

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

Tu peux changer ton image si tu veux...
Je m'enlève l'admin...
;-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#44 2009-12-27 22:22:07

SNF69
Membre
Lyon (69)
2009-04-10
1253

Re: [Résolu] Icône furtive pour remonter

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


Ma galerie ?? c'est par ici : Galerie de Stephy et Seb

Hors ligne

#45 2009-12-27 22:27:16

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
15124

Re: [Résolu] Icône furtive pour remonter

title="{'Scroll to top'|translate}"


<div id="scrolltotop"><a href="#" title="{'Scroll to top'|translate}">Top</a></div>


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

Pied de page des forums

Propulsé par FluxBB

github twitter facebook newsletter Faire un don Piwigo.org © 2002-2020 · Contact