---

Forum » » Questions » » Blocs flottants.

---

Posté : 30-05-2015 09:47

Bon, c'est résolu.
J'ai dit des bêtises. Cette fonction nécessite une information côté client. HTML, PHP ou CSS ne pouvaient pas le faire je suis donc passé par !javascript! (que je n'avais jamais utilisé avant!).
Dans la partie de header.php j'ai ajouté:

   //*************************** Ajouts ************ ******************
   // calcul de la hauteur de la  fenêtre avec !javascript!. S.J.
   echo "
<script type=\"text/!javascript!\">
        <!--
        function getWindowHeight () {
            var&n bsp;windowHeight = 0;
            if&nb sp;(typeof(window.innerHeight) == 'number') {
              ;   windowHeight = window.innerHeight;
            }
            else& nbsp;{
              ;   if (document.documentElement && docum ent.documentElement.clientHeight) {
              ;       windowHeight = document.do cumentElement.clientHeight;
              ;   }
              ;   else {
              ;       if (document.body &&am p; document.body.clientHeight) {
              ;           windowHeight  = document.body.clientHeight;
              ;       }
              ;   }
            }
            retur n windowHeight;
        }
        function setContent()&nb sp;{
            if&nb sp;(document.getElementById) {
              ;   var windowHeight = getWindowHeight();
              ;   if (windowHeight > 0) {
              ;       var contentElement =  document.getElementById('RB_2');
              ;       var contentHeight = c ontentElement.offsetHeight;
              ;           contentEleme nt.style.height = (windowHeight * 0.67) + 'px'; < br />              ;   }
            }
        }
        window.!onload! = f unction() {
            setCo ntent();
        }
        window.onresize = f unction() {
            setCo ntent();
        }
        //-->
</script>
";

getWindowHeight() donne la taille de la fenêtre (ce qui est encore mieux que celle de l'écran).
setContent() fixe la hauteur du bloc (RB_2) à une proportion (0,67 fixée empiriquement) de la hauteur de la fenêtre.
le reste des caractéristiques de RB_2 est fixé dans style.css:

/********* Modifié J.S. *************/
#en-cours {
    text-decoration: none;
    background-color: #EEE;
    font-weight: bold;
    color: #277dd4;
}
#flottant2 { /* Drapeau */
    position:fixed;
    top: 98px;
    right: 40px;
}
#RB_2  {
    position:fixed;
    right: 7px;
    top: 153px;
    width: 118px;
    overflow-y: auto;
}

"overflow-y: auto" fait apparaître une barre de défilement si la liste dépasse la taille de la fenêtre.
J'utilise RB_2 comme identifiant, je peux donc simplifier la construction de la liste "Pagesliste.php" en supprimant l'identifiant "flottant1" qui a été aussi supprimé de style.css car inutile:

function Indexpages() {
   global $numpage;
   $numeropage= substr(substr($numpage,5),0,-1);
If ($numeropage!="") {
     $textpage="<div class=\"rightbloc\"> <div><h3 style=\"text-align:center\">Wakonai</h3><div  class=\"bloc\"><ul>";
//   $textpage="<div class=\"rightbloc\"><h3> Wakonai</h3><div class=\"bloc\"><ul>";
   if ($numeropage==0)  {
      $textpage.="<li><a href=\"s ections.php?op=viewarticle&artid=3&page=[page0]\" id=\"en-cours\"& gt;Introduction</a></li>";
      } else {
      $textpage.="<li><a href=\"s ections.php?op=viewarticle&artid=3&page=[page0]\">Introduction</a ></li>";
   }  
      for ($i = 1; $i  <= 55; $i++) {
         if ($numeropage==$ i) {
            $text page.="<li><a href=\"sections.php?op=viewarticle&artid=3& page=[page";
            $text page.="$i]\" id=\"en-cours\">Page $i</a></li>";
            }&nbs p;else {
            $text page.="<li><a href=\"sections.php?op=viewarticle&artid=3& page=[page";
            $text page.="$i]\">Page $i</a></li>";
         }   
      }
   $textpage.="</ul></div></div></div> ";
   echo "$textpage";
   }
}

Voilà ce que ça donne:
http://busmuli.chez.com/sections.php?op=viewarticle&artid=3&page=[ page12]

---

Cet article provient de NPDS REvolution 16
https://lab.grottes-et-karsts-de-chine.org/viewtopic.php?topic=26316&forum=9