"Retour haut de page" masquable

"Retour haut de page" masquable - HTML/CSS - Programmation

Marsh Posté le 06-01-2006 à 18:56:26    

Voilà, je suis en train de terminer un site perso en PHP.
 
Comme ce site contient plusieurs pages, des longues (où il faut scroller la fenetre du navigateur) comme des petites (qui ne nécéssitent pas la scrollbar du navigateur), je voudrais donc faire un lien "retour vers le haut" du type ancre tout simple :
 

Code :
  1. <a href="#top">Retour en haut</a>


 
Mais mon pb, c que je voudrais que ce lien s'affiche si la page est longue, et ne s'affiche pas si la page est courte car ça ferait con sinon (pourquoi afficher un lien "retour en haut" alors que ce n'est pas nécessaire !!).
 
Donc forcément, ça sera du code Javascript puisque cette détection (afficher le lien "Retour en haut" ) est à faire coté client (sur son navigateur à lui).
Alors j'ai déjà testé pas mal de truc, ça fait une journée que je rame :whistle: , j'en ai marre ! :kaola: Si vous avez une solution... :jap:  
 

<script language="javascript">
var coderetour = '';
if(document.height > window.innerHeight)
/* J'ai essayé aussi avec :
if(window.scrollbars.visible) */
{
 coderetour = '<a href="#top">Retour haut de page</a>';
 document.write(coderetour);
}
</script>


 
Ou encore ça par exemple par un inner.HTML :
 

<script language="javascript">
function retourhaut()
{
 var coderetour = '';
 if(window.style.overflow)
 {
  coderetour = '<a href="#top">Retour haut de page</a>';
  retourh.innerHTML = coderetour;
 }
}
window.onload = function() { retourhaut(); }
</script>
<div id="retourh" align="center"></div>

Reply

Marsh Posté le 06-01-2006 à 18:56:26   

Reply

Marsh Posté le 06-01-2006 à 20:09:41    

Ta detection pour les tailles sont bonnes mais seulement pour Firefox et autres vrais navigateurs, pour IE tu l'auras dans le cul.
 
alors je te propose une solution qui se base sur une technique toute conne avec les CSS
si la hauteur du document est inférieur à la hauteur de la fenetre alors on applique une classe au body
 
cette classe est définie comme suit :  
 
.notoplink .toplinks{ display:none}
du coup tous les liens de type toplink seront cachés systématiquement.
 
Pour pouvoir avoir la hauteur du document sous IE j'ai du feinter, en gros pour la hauteur de la fenetre on recupère la hauteur du document HTML à l'écran (clientHeight) et pour la longueur du document, on recupère la hauteur du HTML à dans le document(scrollHeight), je trouve cela crade mais ça fonctionne parfaitement.
 
PS : pense à mettre le code javascript dans un fichier JS séparé
 
<script type="text/javascript src="monfichier.js"></script>
 
et idem pour la CSS
 
PS2 : la fonction se lance aussi automatiquement lorsque l'on redimensionne la fenêtre :o
 
PS3 : JE te remercie grace à toi j'ai appris quelque chose ce soir. j'ai fait ca en 20 minutes le temps de trouver comment detecter une hauteur de document et une hauteur de fenetre sous IE

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function CheckHeight(){
  8.  myBody = document.getElementsByTagName("BODY" )[0];
  9.  myHTML = document.getElementsByTagName("HTML" )[0];
  10. if (document.all) { //IE
  11.  var hauteurFen = (myHTML.clientHeight);
  12.  var hauteurDoc = (myHTML.scrollHeight);
  13. }
  14. else { //Autres vrais navigateurs
  15.  var hauteurFen = (window.innerHeight);
  16.  var hauteurDoc = (document.height);
  17. }
  19.  if (hauteurDoc>hauteurFen) {
  20.   myBody.className = "";
  21.  }
  22.  else {
  23.   myBody.className= "notoplink";
  24.  }
  25. }
  26. window.onload = CheckHeight;
  27. window.onresize = CheckHeight;
  28. </script>
  29. <style>
  30. *{
  31.  margin:0;
  32.  padding:0;
  33. }
  35. .notoplink .toplink{
  36.  display:none;
  37. }
  40. </style>
  41. </head>
  43. <body>
  45. <div id="top">
  46. <h2>Haut de la page tête d'ampoule</h2>
  47. <a href="#top" class="toplink">Haut de la page</a>
  48. <br>
  49. dfdsfdsfds
  50. fdsfdsf<br>
  51. fdgdfgdfgdfg<br>
  53. <br>
  54. <br>
  55. <br>
  56. <br>
  57. <br>
  59. fdsfdsf<br>
  60. fdgdfgdfgdfg<br>
  61. <br>
  62. <a href="#top" class="toplink">Haut de la page</a>
  63. dfdsfdsfds
  64. fdsfdsf<br>
  65. fdgdfgdfgdfg<br>
  66. <br>
  67. dfdsfdsfds
  68. fdsfdsf<br>
  69. fdgdfgdfgdfg<br>
  70. <a href="#top" class="toplink">Haut de la page</a>
  71. </div>
  72. </body>
  73. </html>


Message édité par gatsu35 le 06-01-2006 à 20:37:57
Reply

Marsh Posté le 06-01-2006 à 20:17:30    

/!\ Pensez à reprendre le script maintenant je viens de le mettre a jour :o /!\

Reply

Marsh Posté le 06-01-2006 à 20:29:49    

Ah le nouveau truc de HFR pour la balise CODE est pourrave, faut faire un C/C dans wordpad puis refaire un C/C dans ton editeur favoris a partir de wordpad si tu veux que ton code soit propre

Reply

Marsh Posté le 06-01-2006 à 20:51:21    

Attention !!! de toute manière c'est une solution bancale de toute manière, sous Opera ca marche po !
 
car je fais un if document.all et opera passe pour du IE a ce moment là.  
 
J'abandonne pour ce soir, j'ai la flème !

Reply

Marsh Posté le 06-01-2006 à 20:56:56    

Ok merci pour toute cette aide !
C exactement ce que je voulais ! Ca fonctionne impeccable !
 
Finallement, j'étais pas trop loin car ça fonctionnait sous Firefox, mais pas avec (cette connerie d') Internet Explorer ! :/
 
Merci encore une fois, et pour le window.onresize c très judicieux ! ;)

Reply

Marsh Posté le 06-01-2006 à 20:58:45    

ca marche po sous opera neanmoins

Reply

Marsh Posté le 06-01-2006 à 21:06:02    

Po grave pour Opera ! loool Yzon ka tous utiliser Firefox ! :P
 
Et j'ai prévu aussi une balise <noscript><a href="#top"></noscript> au cas où, sait-on jamais ! :D

Reply

Marsh Posté le 06-01-2006 à 21:07:35    

ta po besoin de ta balise <noscript> a deux balles
si ya po javascript, mes <a> sont quand meme affichés si tu regardais bien mon code
les A son cachés par le JS et sans JS ils apparaissent kan meme

Reply

Marsh Posté le 07-01-2006 à 11:50:17    

Nan, bon ça foire tjrs sous IE !  :heink: (sous FireFox par contre nickel) !
Je sais pas comment, pourtant hier soir il me semblait que ça fonctionnait...
Revoici mon code, légèrement modifié :
 

Code :
  1. <html>
  2. <head>
  3. <title>xxxxxxxxxxx</title>
  4. <link href="images/style.css" rel="stylesheet" type="text/css">
  5. <script src="images/fonctions.js" type="text/javascript"></script>
  6. </head>
  8. <body onLoad="javascript:CheckHeight();">
  9. ...
  10. <br>
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <div id="retourhaut" align="center"></div>
  28. </body>
  29. </html>


 
 
Le fichier "fonctions.js" :
 

Code :
  1. function CheckHeight()
  2. {
  3. var myBODY = document.getElementsByTagName('BODY')[0];
  4. var myHTML = document.getElementsByTagName('HTML')[0];
  5. var coderetourhaut;
  7. if((navigator.appName == 'Microsoft Internet Explorer')||(document.all))
  8. {
  9.  var hauteurFen = (myHTML.clientHeight);
  10.  var hauteurDoc = (myHTML.scrollHeight);
  11. } else {
  12.  var hauteurFen = (window.innerHeight);
  13.  var hauteurDoc = (document.height);
  14. }
  16. if(hauteurDoc > hauteurFen)
  17. {
  18. /* myBODY.className = ''; */
  19.  coderetourhaut = '      <table width="100%">';
  20.  coderetourhaut = coderetourhaut + '       <tr>';
  21.  coderetourhaut = coderetourhaut + '        <td class="framecentrale">';
  22.  coderetourhaut = coderetourhaut + '         <a href="#top">Retour haut de page</a>';
  23.  coderetourhaut = coderetourhaut + '        </td>';
  24.  coderetourhaut = coderetourhaut + '       </tr>';
  25.  coderetourhaut = coderetourhaut + '      </table>';
  26.  retourhaut.innerHTML = coderetourhaut;
  27. } else {
  28. /* myBODY.className = 'notoplink'; */
  29.  coderetourhaut = '';
  30.  retourhaut.innerHTML = coderetourhaut;
  31. }
  32. window.onload = CheckHeight;
  33. window.onresize = CheckHeight;
  34. }

Reply

Marsh Posté le 07-01-2006 à 11:50:17   

Reply

Marsh Posté le 07-01-2006 à 11:55:27    

sale boulet
 pourquoi tu ne t'es pas basé sur ma méthode des classe ?

Code :
  1. .notoplink .toplink{ 
  2.       display:none;   
  3. }


 
et  <a href="#top" class="toplink">Retour haut de page</a>
comme ca par défaut les liens sont affichés normalement, et avec le javascript on check la hauteur de page, et si page<fenetre alors on assigne une classe CSS à l'élément body, et automatiquement tous les éléments avec la classe "toplink" seront cachés.
Dans le cas contraire on vire la classe sur la body et les éléments sont réaffichés.
ca fait du HTML propre.
 
et vire moi ce putain de code là :  
<body onLoad="javascript:CheckHeight();">
 
il est rajouté en JS automatiquement.
 
J'en ai ras la bol des gens qui n'ecoutent pas ce qu'on leur dit et qui pondent de la merde.
 
au fait tu as vraiment besoin d'encadrer ton putain de lien avec un tableau ? tu crois que c'est vraiment utile ?

Message cité 1 fois
Reply

Marsh Posté le 07-01-2006 à 12:22:39    

gatsu35 a écrit :

<body onLoad="javascript:CheckHeight();">
il est rajouté en JS automatiquement.
...
au fait tu as vraiment besoin d'encadrer ton putain de lien avec un tableau ? tu crois que c'est vraiment utile ?


Je te remercie pour ton aide, mais ce n'est pas la peine de me traiter de "sale boulet" ! :o C vrai qu'avec tous ces navigateurs, on a tendance à s'énerver ! lol :lol: Mais ne te sens pas obligé de m'aider si tu en as marre ! lol :) Tu en as déjà fait bcp comme ça, merci encore ! ;)  
 
Si j'ai programmé ça, c qu'il y a des raisons ! :D Entr'autre, ton système ne fonctionne que si est inséré le code suivant :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 
Hors, si moi j'insère ce code dans mes pages, il me déstructure complètement tout, et mon site ne ressemble plus à rien ! Aussi bien sous IE que sous FireFox ! Donc, je dois forcément me passer de ce code ; et du système de myBODY.class = "" forcément, car sans le DOCTYPE, ta page ne fonctionne pas ! ;)
 
 
Pour le <body onLoad="javascript:CheckHeight();">, là c vrai, c une erreur de ma part, j'ai oublié de mettre en commentaire le //window.onload = ChekHeight;. Mais j'ai fait les tests avec les 2, et ça n'a pas fonctionné.
 
 
Pour ce qui est du tableau, oui, je suis obligé de le mettre dans un tableau. J'ai préféré construire mon site sur des tableaux plutot qu'avec cette m**** de CSS  :kaola: ! Et comme j'inclus en PHP (include) des pages HTML dans ma page principale PHP avec des menus, je suis obligé d'utilisé systématiquement des tableaux.
 
Je vais essayer avec une autre méthode, celle des calques que l'on rend visible ou pas ; ça me parait correct. J'ai trouvé des infos ici :
http://developpeur.journaldunet.co [...] trer.shtml
Je dirais si ça fonctionne ou pas. ;)

Reply

Marsh Posté le 07-01-2006 à 12:37:15    

un site sans doctype n'est pas un site, ca prouve que la personne qui a fait le site ne sait pas ce qu'elle fait
un site avec des tableau n'est pas un site c'est un truc moche
 
les CSS c'est pas de la merde, ca permet d'intégrer ce que l'on veut finger in the noze, et crois moi, j'en ai fait l'expérience, j'ai toujours eu des resultats concluants la dessus

Reply

Marsh Posté le 09-01-2006 à 23:45:25    

Bon, j'ai refais qques tests cette fois avec des balises <SPAN>, bcp plus pratique et standard, et là pas nécessité de balises <NOSCRIPT>.
Mais rien n'y fait ! :fou: Tout fonctionne (sous Firefox), mais par contre sous I.E., rien à faire, même avec le test de compatibilité multi-navigateurs des fonctions Javascript "montrer(object)" et "cacher(object)" ! :fou:  
Revoici mon code optimisé, si vous avez une quelconque solution à apporter, je suis preneur, mais moi j'abandonne (marre de cette "guerre" entre navigateurs ! Nous revoilà revenu 5 ans en arrière au temps de IE et Netscape Navigator ! :fou: Vive la paix ! :D )
 
ma page.php : (remarquez, j'ai mis le <SPAN> en "visible", ainsi pas besoin de prévoir une balise <NOSCRIPT> )

Code :
  1. <html>
  2. <head>
  3. <title>xxxxxxx</title>
  4. <meta etc...>
  5. ...
  6. <script src="images/fonctions.js" type="text/javascript"></script>
  7. </head>
  9. <body onLoad="javascript: Checkheight('RetourHaut');" onResize="javascript: Checkheight('RetourHaut');">
  10. ...
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <span id="RetourHaut" style="visibility: visible;">
  24. <a href="#top">Retour haut de page</a>
  25. </span>
  26. <br>
  27. <br>
  28. <br>
  29. <br>
  30. <br>
  31. </body>
  32. </html>


 
Mon fichier fonctions.js :

Code :
  1. function montrer(object)
  2. {
  3. if(document.all)  // Si c'est Internet Explorer
  4. {
  5.  document.all[object].style.visibility = 'visible';
  6.  document.all[object].style.zIndex = 100;
  7. }
  8. else if(document.layers && document.layers[object])
  9. {
  10.  document.layers[object].visibility = 'visible';
  11. }
  12. else if(document.getElementById)
  13. {
  14.  document.getElementById(object).style.visibility = 'visible';
  15.  document.getElementById(object).style.zIndex = 100;
  16. }
  17. }
  19. function cacher(object)
  20. {
  21. if(document.all)  // Si c'est Internet Explorer
  22. {
  23.  document.all[object].style.visibility = 'hidden';
  24. }
  25. else if(document.layers && document.layers[object])
  26. {
  27.  document.layers[object].visibility = 'hidden';
  28. }
  29. else if(document.getElementById)
  30. {
  31.  document.getElementById(object).style.visibility = 'hidden';
  32. }
  33. }
  35. function Checkheight(object)
  36. {
  37. var myHTML = document.getElementsByTagName('HTML')[0];
  39. if(document.all)  // Si c'est Internet Explorer
  40. {
  41.  var hauteurFen = myHTML.clientHeight;
  42.  var hauteurDoc = myHTML.scrollHeight;
  43. }
  44. else     // Si ce sont d'autres navigateurs
  45. {
  46.  var hauteurFen = window.innerHeight;
  47.  var hauteurDoc = document.height;
  48. }
  50. if(hauteurDoc > hauteurFen)
  51. {
  52.  montrer(object);
  53. }
  54. else
  55. {
  56.  cacher(object);
  57. }
  58. }


Message édité par poulou59 le 09-01-2006 à 23:47:30
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed