Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1426 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  "Retour haut de page" masquable

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

"Retour haut de page" masquable

n°1278344
poulou59
Posté le 06-01-2006 à 18:56:26  profilanswer
 

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>

mood
Publicité
Posté le 06-01-2006 à 18:56:26  profilanswer
 

n°1278377
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 20:09:41  profilanswer
 

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
n°1278384
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 20:17:30  profilanswer
 

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

n°1278397
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 20:29:49  profilanswer
 

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

n°1278411
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 20:51:21  profilanswer
 

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 !

n°1278415
poulou59
Posté le 06-01-2006 à 20:56:56  profilanswer
 

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 ! ;)

n°1278416
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 20:58:45  profilanswer
 

ca marche po sous opera neanmoins

n°1278422
poulou59
Posté le 06-01-2006 à 21:06:02  profilanswer
 

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

n°1278423
gatsu35
Blablaté par Harko
Posté le 06-01-2006 à 21:07:35  profilanswer
 

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

n°1278602
poulou59
Posté le 07-01-2006 à 11:50:17  profilanswer
 

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

mood
Publicité
Posté le 07-01-2006 à 11:50:17  profilanswer
 

n°1278607
gatsu35
Blablaté par Harko
Posté le 07-01-2006 à 11:55:27  profilanswer
 

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
n°1278625
poulou59
Posté le 07-01-2006 à 12:22:39  profilanswer
 

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

n°1278640
gatsu35
Blablaté par Harko
Posté le 07-01-2006 à 12:37:15  profilanswer
 

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

n°1280029
poulou59
Posté le 09-01-2006 à 23:45:25  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  "Retour haut de page" masquable

 

Sujets relatifs
Page HTML sous contrôle script WSHComment insérer une page dans une page ?
Tramme avec page uniquerechercher d'un lien actif sur une page exterieur
rechercher un lien actif dans une page externeReferencement : espace dans le nom de page ?
Garder les données d'une page à l'autremacro sur page internet
ouvrir page htmlpasser un tableau et ses valeurs à la page suivante ?
Plus de sujets relatifs à : "Retour haut de page" masquable

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.096 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR