---

Forum » » Questions » » Blocs flottants.

---

Posté : 30 mai 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 windowHeight = 0;
            if (typeof(window.innerHeight) == 'number') {
                windowHeight = window.innerHeight;
            }
            else {
                if (document.documentElement && document.documentElement.clientHeight) {
                    windowHeight = document.documentElement.clientHeight;
                }
                else {
                    if (document.body && document.body.clientHeight) {
                        windowHeight = document.body.clientHeight;
                    }
                }
            }
            return windowHeight;
        }
        function setContent() {
            if (document.getElementById) {
                var windowHeight = getWindowHeight();
                if (windowHeight > 0) {
                    var contentElement = document.getElementById('RB_2');
                    var contentHeight = contentElement.offsetHeight;
                        contentElement.style.height = (windowHeight * 0.67) + 'px';
                }
            }
        }
        window.!onload! = function() {
            setContent();
        }
        window.onresize = function() {
            setContent();
        }
        //-->
</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=\"sections.php?op=viewarticle&artid=3&page=[page0]\" id=\"en-cours\">Introduction</a></li>";
      } else {
      $textpage.="<li><a href=\"sections.php?op=viewarticle&artid=3&page=[page0]\">Introduction</a></li>";
   }  
      for ($i = 1; $i <= 55; $i++) {
         if ($numeropage==$i) {
            $textpage.="<li><a href=\"sections.php?op=viewarticle&artid=3&page=[page";
            $textpage.="$i]\" id=\"en-cours\">Page $i</a></li>";
            } else {
            $textpage.="<li><a href=\"sections.php?op=viewarticle&artid=3&page=[page";
            $textpage.="$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
https://www.npds.org/viewtopic.php?topic=26316&forum=9