Tom's Guide > Forum > Programmation > [Résolu] Position fixe d'un cadre en défilement HTML

[Résolu] Position fixe d'un cadre en défilement HTML

Forum Programmation : [Résolu] Position fixe d'un cadre en défilement HTML

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre

Lire la meilleure réponse, apportée par Tybbow.

Mot :    Pseudo :           
 
matix68   16-03-2009 à 21:47:51

Bonsoir,

Je pense que le titre ne veut rien dire mais je vais quand même essayer de me faire comprendre ;)

J'ai un problème sur une page html que j'ai créée. Voici la page en question:

[url=http://lfe.monespace.net/pages/photos2.html][/url]

Quand on fait défiler le cadre du haut jusqu'au bout et qu'on clique sur une icône, la photo agrandi apparait bien en bas, mais le problème c'est que le cadre en haut revient à sa position initiale et il faut a chaque fois refaire défiler. Ce n'est qu'un détail mais c'est ennuyeux. Si vous savez comment faire pour que cela ne "bouge" pas lorsqu'on clique sur une icône merci de m'aider!

------------------------------ Qui a dit que les tomates saignaient? o_O

Hier à la même heure?
Répondre
Meilleure réponse apportée par Tybbow
http://www.developpez.net/forums/d [...] e-tableau/
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Tybbow   17-03-2009 à 18:34:10

Utilise une iframe seulement pour les photos qui s'affichent en bas. Sinon, tu peux toujours essayer l'élément Hide!

Hide permet de cacher des photos et autres contenus d'une page web. Cela dit, la page reste grande ^^

Pour autant d'image, tu auras peut être besoin d'utiliser 100 lignes de codes. Relativement simple, certes, mais quand même:

Code :
  1. <HTML>
  2. <script>
  3. function toggle2() {
  4. if( document.getElementById("hide2" ).style.display=='none' ){
  5. document.getElementById("hide2" ).style.display = '';
  6. document.getElementById("hide3" ).style.display = 'none';
  7. document.getElementById("hide4" ).style.display = 'none';
  8. document.getElementById("hide5" ).style.display = 'none';
  9. document.getElementById("hide6" ).style.display = 'none';
  10. document.getElementById("hide7" ).style.display = 'none';
  11. document.getElementById("hide8" ).style.display = 'none';
  12. document.getElementById("hide9" ).style.display = 'none';
  13. document.getElementById("hide10" ).style.display = 'none';
  14. document.getElementById("hide11" ).style.display = 'none';
  15. document.getElementById("hide12" ).style.display = 'none';
  16. document.getElementById("hide13" ).style.display = 'none';
  17. document.getElementById("hide14" ).style.display = 'none';
  18. document.getElementById("hide15" ).style.display = 'none';
  19. document.getElementById("hide16" ).style.display = 'none';
  20. document.getElementById("hide17" ).style.display = 'none';
  21. document.getElementById("hide18" ).style.display = 'none';
  22. document.getElementById("hide19" ).style.display = 'none';
  23. document.getElementById("hide20" ).style.display = 'none';
  24. document.getElementById("hide21" ).style.display = 'none';
  25. document.getElementById("hide22" ).style.display = 'none';
  26. document.getElementById("hide23" ).style.display = 'none';
  27. document.getElementById("hide24" ).style.display = 'none';
  28. }
  29. }
  30. </script>
  31. <script>
  32. function toggle3() {
  33. if( document.getElementById("hide3" ).style.display=='none' ){
  34. document.getElementById("hide2" ).style.display = 'none';
  35. document.getElementById("hide3" ).style.display = '';
  36. document.getElementById("hide4" ).style.display = 'none';
  37. document.getElementById("hide5" ).style.display = 'none';
  38. document.getElementById("hide6" ).style.display = 'none';
  39. document.getElementById("hide7" ).style.display = 'none';
  40. document.getElementById("hide8" ).style.display = 'none';
  41. document.getElementById("hide9" ).style.display = 'none';
  42. document.getElementById("hide10" ).style.display = 'none';
  43. document.getElementById("hide11" ).style.display = 'none';
  44. document.getElementById("hide12" ).style.display = 'none';
  45. document.getElementById("hide13" ).style.display = 'none';
  46. document.getElementById("hide14" ).style.display = 'none';
  47. document.getElementById("hide15" ).style.display = 'none';
  48. document.getElementById("hide16" ).style.display = 'none';
  49. document.getElementById("hide17" ).style.display = 'none';
  50. document.getElementById("hide18" ).style.display = 'none';
  51. document.getElementById("hide19" ).style.display = 'none';
  52. document.getElementById("hide20" ).style.display = 'none';
  53. document.getElementById("hide21" ).style.display = 'none';
  54. document.getElementById("hide22" ).style.display = 'none';
  55. document.getElementById("hide23" ).style.display = 'none';
  56. document.getElementById("hide24" ).style.display = 'none';
  57. }
  58. }
  59. </script>
  60. <script>
  61. function toggle4() {
  62. if( document.getElementById("hide4" ).style.display=='none' ){
  63. document.getElementById("hide2" ).style.display = 'none';
  64. document.getElementById("hide3" ).style.display = 'none';
  65. document.getElementById("hide4" ).style.display = '';
  66. document.getElementById("hide5" ).style.display = 'none';
  67. document.getElementById("hide6" ).style.display = 'none';
  68. document.getElementById("hide7" ).style.display = 'none';
  69. document.getElementById("hide8" ).style.display = 'none';
  70. document.getElementById("hide9" ).style.display = 'none';
  71. document.getElementById("hide10" ).style.display = 'none';
  72. document.getElementById("hide11" ).style.display = 'none';
  73. document.getElementById("hide12" ).style.display = 'none';
  74. document.getElementById("hide13" ).style.display = 'none';
  75. document.getElementById("hide14" ).style.display = 'none';
  76. document.getElementById("hide15" ).style.display = 'none';
  77. document.getElementById("hide16" ).style.display = 'none';
  78. document.getElementById("hide17" ).style.display = 'none';
  79. document.getElementById("hide18" ).style.display = 'none';
  80. document.getElementById("hide19" ).style.display = 'none';
  81. document.getElementById("hide20" ).style.display = 'none';
  82. document.getElementById("hide21" ).style.display = 'none';
  83. document.getElementById("hide22" ).style.display = 'none';
  84. document.getElementById("hide23" ).style.display = 'none';
  85. document.getElementById("hide24" ).style.display = 'none';
  86. }
  87. }
  88. </script>
  90. <script>
  91. function toggle5() {
  92. if( document.getElementById("hide5" ).style.display=='none' ){
  93. document.getElementById("hide2" ).style.display = 'none';
  94. document.getElementById("hide3" ).style.display = 'none';
  95. document.getElementById("hide4" ).style.display = 'none';
  96. document.getElementById("hide5" ).style.display = '';
  97. document.getElementById("hide6" ).style.display = 'none';
  98. document.getElementById("hide7" ).style.display = 'none';
  99. document.getElementById("hide8" ).style.display = 'none';
  100. document.getElementById("hide9" ).style.display = 'none';
  101. document.getElementById("hide10" ).style.display = 'none';
  102. document.getElementById("hide11" ).style.display = 'none';
  103. document.getElementById("hide12" ).style.display = 'none';
  104. document.getElementById("hide13" ).style.display = 'none';
  105. document.getElementById("hide14" ).style.display = 'none';
  106. document.getElementById("hide15" ).style.display = 'none';
  107. document.getElementById("hide16" ).style.display = 'none';
  108. document.getElementById("hide17" ).style.display = 'none';
  109. document.getElementById("hide18" ).style.display = 'none';
  110. document.getElementById("hide19" ).style.display = 'none';
  111. document.getElementById("hide20" ).style.display = 'none';
  112. document.getElementById("hide21" ).style.display = 'none';
  113. document.getElementById("hide22" ).style.display = 'none';
  114. document.getElementById("hide23" ).style.display = 'none';
  115. document.getElementById("hide24" ).style.display = 'none';
  116. }
  117. }
  118. </script>



Sinon, as-tu pensé à créer un lightbox?
http://leandrovieira.com/projects/jquery/lightbox/

http://www.webinventif.fr/jquery-l [...] os-images/

------------------------------ En Restaurant, le coeur de breizh
 Répondre à Tybbow
matix68   17-03-2009 à 20:47:51

J'ai pas compris comment il fallait utiliser les toutes les lignes de code, mais je vais déjà essayer avec Lightbox, merci du lien et de ta réponse.

------------------------------ Qui a dit que les tomates saignaient? o_O

Hier à la même heure?
 Répondre à matix68
matix68   17-03-2009 à 20:55:06

Finalement je trouve que la lightbox sort trop du style de mon site. Je préfère ma galerie alors si tu pouvais m'expliquer comment résoudre mon problème je te remercie ;)

------------------------------ Qui a dit que les tomates saignaient? o_O

Hier à la même heure?
 Répondre à matix68
Allstar27   18-03-2009 à 03:15:09

Je m'y connais pas trop en javascript,
mais en remplaçant

Code :
  1. return document.MM_returnValue


par

Code :
  1. return false

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
 Répondre à Allstar27
matix68   19-03-2009 à 19:34:48

Malgré vos réponses je ne comprends toujours pas comment faire. Vous m'avez donné des codes, je ne sais pas comment m'en servir. Si quelqu'un peut me dire précisément comment faire ce serait gentil. Merci

------------------------------ Qui a dit que les tomates saignaient? o_O

Hier à la même heure?
 Répondre à matix68
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [Résolu] Position fixe d'un cadre en défilement HTML
Aller à :

Il y a 869 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,334 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens