Se connecter / S'enregistrer

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

Solutions (6)
Tags :
  • Script
  • Programmation
|
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:



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!
Contenus similaires
Meilleure solution
partage
|
  • Commenter cette solution |
Score
0
òh
òi
|
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
  • Commenter cette réponse |
Score
0
òh
òi
|
Je m'y connais pas trop en javascript,
mais en remplaçant
  1. return document.MM_returnValue

par
  1. return false
  • Commenter cette réponse |
Score
0
òh
òi
|
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 ;) 
  • Commenter cette réponse |
Score
0
òh
òi
|
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.
  • Commenter cette réponse |
Score
0
òh
òi
|
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:

  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>
  89.  
  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-lightbox-plugin-mettez...
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS