Gestion de Contenu, de Communauté et de groupes de travail collaboratif - Open Source, français, sécurisé, stable et performant

  • MODULES

    Pour étendre les nombreuses fonctionnalités disponibles de base - modules.npds.org est à votre disposition.

    Des modules complémentaires, une communauté de développeurs active, des forums pour vos questions ... NPDS  est aussi une plateforme de développement !
  • STYLES

    Vous cherchez des thèmes graphiques pour votre portail ou votre communauté : styles.npds.org est à votre disposition.

    Des thèmes du plus simple au plus sophistiqué. Des thèmes facilement modifiables et toujours en Open-Source - Laissez simplement parler votre imagination !
  • BIBLES

    La documentation indispensable pour personnaliser et exploiter toute la puissante de NPDS  est à votre disposition sur bible.npds.org.

    Vous pouvez participer à l'effort de documentation - rien de plus simple : contactez un membre de la Team de développement et nous vous ouvrirons un compte sur le Wiki !
Devenir membre    |    Identifiant : Mot de Passe : -
Au delà de la gestion de contenu 'classique', NPDS met en oeuvre un ensemble de fonctions spécifiquement dédiées à la gestion de Communauté et de groupes de travail collaboratif.
Il s'agit d'un Content & Community Management System (CCMS) robuste, sécurisé, complet, performant et parlant vraiment français.

Gérez votre Communauté d'utilisateurs, vos groupes de travail collaboratif, publiez, gérez et organisez votre contenu grâce aux puissants outils disponibles de base.
  • Multi langues (Français, Anglais, Allemand, Espagnol, Chinois)
  • Respect des standards : UTF8, XHTML, CSS, ...
  • Système de blocs avancés
  • Installation et administration complète et centralisée
  • Editeur HTML intégré
  • Gestionnaire de fichier en ligne
  • Gestion des groupes de membres
  • Ecriture collaborative de documents (PAD)
  • Forums évolués
  • Mini-sites (pour les membres et les groupes de travail)
  • Chat temp réel
  • Système de News et de rubriques complet (édition, révision, publication)
  • ...
Gratuit et libre (Open-Source), développé en PHP, NPDS est personnalisable grâce à de nombreux thèmes et modules et ne requiert que quelques compétences de base.
NPDS Workplace - groupe de travail collaboratif
 NPDS WorkSpace - tous l'univers du travail collaboratif.
Modéré par : developpeur jpb Jireck 
Index du Forum » » Questions » » Blocs flottants.  
AuteurBlocs flottants.
Sylvain
47    

Sylvain
  Posté : 26-05-2015 15:21

Comment ancrer un bloc (des blocs) à la fenêtre et pas à la page? Ce qui permettrait de garder les blocs visibles quand on parcourt une page.

Merci.

  Profil  Citation   
jpb
2010       
 

jpb
  Posté : 26-05-2015 17:30

css ou js ...

  Profil  www  Citation   
Sylvain
47    

Sylvain
  Posté : 26-05-2015 22:24

Merci mais peux-tu développer un peu?

  Profil  Citation   
jpb
2010       
 

jpb
  Posté : 26-05-2015 22:42

hélas c'est le genre de sujet ou soit on developpe un tout petit peu soit beaucoup lol ... Ceci pour dire que ce n'est pas si simple que ca parait car il faut intervenir assez profondément dans ton theme ... il va te falloir des position absolu ...

  Profil  www  Citation   
Sylvain
47    

Sylvain
  Posté : 28-05-2015 09:46

OK, c'est fait.
Au style.css j'ai ajouté:

#flottant1 { /* Liste des pages */
    position:fixed;
    top: 146px;
    right: 15px;
}
#flottant2 { /* Drapeau */
    position:fixed;
    top: 98px;
    right: 40px;
}


Et j'ai placé les identifiants au bons endroits de la construction des blocs.
Pour le drapeau:

$menlang ='<a id="flottant2" ...


Et pour les pages:

$textpage="<div class=\"rightbloc\"><div id=\"flottant1\"& gt;...


Ça n'a pas été trop compliqué et ça marche nickel:
http://busmuli.chez.com/sections.php?op=viewarticle&artid=3&page=[page12]

  Profil  Citation   
jpb
2010       
 

jpb
  Posté : 28-05-2015 10:04


  Profil  www  Citation   
Sylvain
47    

Sylvain
  Posté : 29-05-2015 20:13

Je ne suis pas encore satisfait du résultat.
Si ma liste est plus grande que l'écran, la partie inférieure est invisible.
J'ai essayé le style "overflow-y: auto;" qui fait apparaître une barre de défilement quand la liste dépasse les dimensions du bloc contenant mais il faut que ce bloc soit dimensionné, ce qui n'est pas le cas.
Je peux évidement créer un bloc avec des dimensions fixes mais le résultat visuel sera très différent selon la taille et la définition des écrans.
J'aimerais définir la hauteur en fonction de la hauteur de l'écran.
Où puis-je trouver cette variable?
En HTML, PHP ou CSS évidement.
Merci.

  Profil  Citation   
Sylvain
47    

Sylvain
  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]

  Profil  Citation   
Sylvain
47    

Sylvain
  Posté : 30-05-2015 11:06

Il faut intervenir dans le constructeur (Pages_liste.php) pour indiquer le nombre de pages $i. Ce n'est pas pratique alors je vais chercher le nombre de pages dans la fonction viewarticle de "sections.php":

...
global $numpage, $ndepages;
   $numpage=$page;
   $ndepages= "0";
...
        if ($page!="") {
         // Ajout **** *************************************************
            $ndep ages=substr_count($Xcontent,'[page');
...


Et je l'utilise dans le constructeur de liste (Pages_liste.php):

...
global $numpage, $ndepages;
...
for ($i = 1; $i <= ($ndepages - 1) ; $i++) {
...


Voilà, maintenant il n'y a plus qu'à écrire les pages sans réfléchir et la liste se mettra automatiquement à jour.

Bon, je vais me calmer un peu pour ne pas vous ennuyer et me concentrer sur le contenu du site plus que sur sa forme.

  Profil  Citation   
B-Mag
2343       
 

B-Mag
  Posté : 30-05-2015 11:36

slt

Aucun ennui à la lecture des améliorations que tu apportes.
Elles seront surement très utiles à beaucoup

c'est bien ça l'esprit de npds me semble t'il.

  Profil  www  Citation   
  
Sauter à :

Temps : 0.0164 seconde(s)