11548 sujets

JavaScript, DOM et API Web HTML5

DIV fixed imbriquée dans une autre DIV [Résolu]

Bonjour à tous, Smiley smile
Voilà le contexte : pour une documentation logiciel en ligne, je liste les champs des divers écrans (via XML et XSLT) avec des explications etc. (ça peut être très long). J'aimerai que l'utilisateur puisse afficher l'image écran du logiciel à tout moment sans être obligé de manipuler l'ascenseur pour retourner à une image codée en amont ou en aval de la liste.
J'ai donc dans l'idée d'insérer un lien image dans une DIV à gauche de l'écran et toujours en vis à vis des définitions malgré le défilement de la page (à la manière de ces onglets publicitaires qu'on voit fleurir partout mais sans slide).
Comment faire ?
Avec le CSS seul cette DIV est apparente de la 1ère à la dernière DIV de la page.
Avec Javascript et jQuery je pourrai cacher la DIV jusqu'à l'apparition de ma DIV mais je ne sais pas Smiley confused repérer son affichage à l'écran.
Auriez vous qques pistes à me proposer ?
PM : pages web en aspx semi dynamiques avec scripts jQuery (au max) et code VB.net.
Merci d'avance pour votre réponse
Modifié par CITYLIGHTS (21 Jan 2011 - 21:52)
Eh bien ! Me voilà bien seul. Smiley decu
Après beaucoup, bcp…bcp de cafouillages codifiés, j’ai fait table rase et je me suis astreint à la sim pli ci té…du css (ce qui, de facto, renverra mon msg à un autre thème du forum).

Voilà mon code allégé (il faut y mettre un peu de « Lorem Ipsum » dans les DIV1 et 2 pour apprécier le fonctionnement).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>DIV dans une autre DIV</title>

  <style>
  
  #DIV0 {
  margin-left: 9%;
}

img{
  float: left;
  position:fixed;
  }

  #DIV1_2 {
  width: 90%;
  margin-left:9%;
}

  #DIV2 {
  margin-left: 9%;
    clear:lerft;
} 

  </style>  
 
</head><body>

<div id="DIV0"><p><span style="color: red; font-weight: bold;">DIV 0 - </span>Lorem
ipsum dolor sit amet,
 </p></div>

<div id="DIV1">
    <img style="width: 97px; height: 99px;" alt="TOTO" src="TEST2_fichiers/SamOOora.jpg" >
<div id="DIV1_2">
<p><span style="color: red; font-weight: bold;">DIV 1_2 - </span>Lorem
ipsum dolor sit amet,  </p>
</div><br class="clear"/>
</div>

  <div id="DIV2"><p><span style="color: red; font-weight: bold;">DIV 2 - </span>Lorem
ipsum dolor sit amet,
</p></div>

</body></html>


L’effet est bien celui que je recherche sur la DIV1 mais je ne veux pas de débordement sur la DIV2.

J’ai appliqué clear:left et clear:both à la DIV2 et à une balise invisible <br/>…sans résultat. C’est le position:fixed qui me pose un problème. Comment faire pour lever son effet en dehors de la DIV2 ?
Mise en page et effet réussis ! Smiley langue
Pour les qques curieux qui ont alimenté le compteur des visites, voilà la méthode que j'ai employée :

Créer 2 DIV.
DIV1 pour le lien image (<a href=''...><img>...) et DIV2 pour le contenu à illustrer (<p>blablabla...).
Appliquer un margin-left sur la DIV2 supérieur à la largeur de l'image lien.
Appliquer à la DIV1 une position:fixed et une distance par rapport au haut de l'écran (moi j'ai appliqué top:70%).
Insérer le lien image dans la DIV1 avec un style="display:none" (c'est très important pour la suite)

Pour afficher le lien image seulement devant la DIV2 j'utilise un script javascript (fortement saupoudré avec jQuery) et le positionnement des 2 DIV par rapport au haut du document ainsi que la hauteur des DIV :
if
le haut de la DIV1 est plus éloigné que le haut de la DIV2 et si le bas de la DIV1 est moins éloigné que le bas de DIV2 alors on montre l'image avec l'effet jQuery 
.show("fast")
(c'est pourquoi j'ai appliqué le style="display:none" à l'image) 
else
on cache l'image avec l'effet jQuery 
.hide("fast")


Appliquer le script après complet chargement de la page 
(document).ready
et sur le scroll 
(window).scroll

Peaufiner votre mise en page. C'est terminé Smiley ravi
Sujet clos
Aller à