|
Sylvain
 48 
|  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
2791
| |
Sylvain
48
| Posté : 26-05-2015 22:24
Merci mais peux-tu développer un peu?  |
Profil Citation
|
|
jpb
2791
| 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
48
| 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
2791
| |
Sylvain
48
| 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
48
| 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
48
| 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
2386
| 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
|
|
Dev 
|
Charte|
Nous contacter|CNIL : 873057|Logiciel sous licence GNU/GPL|
.:Page >> Super-Cache:.