Passer mon site en "full-screen"

Version imprimable

24/05/2006, 10h41
krolineeee

Passer mon site en "full-screen"

Bonjour,

J'aimerais faire en sorte que mon intranet puisse passer en "full-screen", c'est à dire que lorsque je clique sur un bouton, ma banniere et mon menu disparaissent, et le centre de ma page puisse alors occuper toute la fenetre.
Seulement voilà;
- mon menu est généré par du javascript et je ne trouve pas l'astuce pour le cacher...
- Dès que je clique sur rafraichir, la page revient en mode normal.

Alors si l'un d'entre vous à une éclaire de génie, surtout qu'il n'hésite pas à venir éclairer ma lenterne, car pour le moment j'y vais à taton, et ce n'est pas glorieux!
Merci

Kroline
24/05/2006, 10h47
Swoög

Si on n'a pas le code de ton menu, impossible de t'aider... le plus simple serait d'attribuer une id à l'élément qui contient ton menu puis de faire :

Code:

document.getElementById('l_id').style.display = 'none'

pour le réaficher, mettre 'block' au lieu de 'none'

enuiste, pour ce qui est du retour au refresh, tu peux (par exemple) stocké l'état du menu (affiché/caché) dans un cookie (cf setcookie et getcookie)

bien sûr, il ne faut pas oublier que JS comme les cookies peuvent être désactivés...

1 pièce(s) jointe(s)

Dans ma page, voici le code javascript qui s'affiche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type='text/javascript' src='/includes/menu.js'></script>
<script type='text/javascript'>Liste.AddM('Gestion compte');
Liste.SMenu[0].AddM('Mes favoris','/GestMUP/GestFavoris.php');
Liste.SMenu[0].AddM('Mot de passe','/GestMUP/GestPwd.php');
Liste.AddM('Gestion site');
Liste.SMenu[1].AddM('Gestion des utilisateurs','/GestMUP/GestUsers.php');
Liste.SMenu[1].AddM('Gestion des profils','/GestMUP/GestProfil.php');
Liste.SMenu[1].AddM('Gestion pages et menus','/GestMUP/GestMenu.php');
Liste.SMenu[1].AddM('Les annonces','/GestMUP/GestAnnonce.php');
Liste.SMenu[1].AddM('Normalisation CSS','/Divers/NormalisationCss.php');
</script>

menu.js est en piece jointe...

Pour le moment, ma fonction pour cacher le menu et la bannière est comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function passenfull(){
                        var obban= document.getElementById('tdbanniere');
                        var obong= document.getElementById('tdonglets');
                        var obmen= document.getElementById('tdmenu');
                        var obmjs= document.getElementById('menuJs'); // objet non reconnu par IE et firefox
                        var obpri= document.getElementById('tdprinter');
                        var obtab= document.getElementById('presentation');
 
                        obtab.cols=1;
                        obban.className='invisible';
 
                        obong.className='invisible';
                        obmen.className='invisible';
 
                         obpri.className='visible';
 
                    }

et le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
td.invisible{
    width:0px;
    height:0px;
    visibility:hidden;
}
td.visible{
    position:absolute;
    margin-left:0px;
    margin-top:0px;
    width:100%;
    height:100%;
}

Voilà pour ce qui est du code, par contre pour les cookies ce n'est pas possible car le cahier des charges précise bien que l'utilisation de cookies n'est pas autorisé!
C'est là qu'on doit s'arracher les cheveux non?

modifie :
Code:

1 2 3 4 5 6 7 8 9 function InitMenu(){ var i; document.write('<div id="menu">'); for(i=0;i<Liste.Lvl(0);i++){ document.write("<div ID='ListeLvl"+i+"' style='position:absolute;left:"+(i*(Largeur+4)+DivLeft)+"'></div>"); } document.write('</div>'); Liste.Aff(0,0); }
dans le getElementById, il faudra mettre "menu" (c'est un exemple, si l'id est déjà pris, il faudra le changer)

par contre, fait gaffe, les document.write c'est super dangeureux... il vaudrait mieux utiliser innerHTML tout du long...

pour ce qui est de la sauvegarde d'état, si tu peux pas utiliser les cookies, laisse tomber

24/05/2006, 11h16
krolineeee

Bon le coup du div ça ne fonctionne pas, là je ne vois vraiment pas, j'ai tester sur le div, sur le tableau...

Pour ce qui est des cookies, j'aimerais tout de meme avoir un peu plus d'information, peut etre changeront-ils d'avis en verrant le résultat! car je ne vois pas l'interet de faire le "full-screen" si celui-ci se désactive à chaque rafraichissement.
24/05/2006, 11h24
Swoög

Bah, là je vois pas... normalement, peut importe comment il est généré, le coup du div ça devrait fonctionner sans problème avec getElementById...

pour les cookie, ça fait trop longtemps que je ne les ai pas utiliser, je n'ai plus la signature des fonctions en tête, mais je sais qu'elles s'appelent getcookie et setcookie, une petite recherche dans les tutos ou sur google te permettra de les retrouver ;)

Je pense qu'il faudrait faire une fonction desInit() :lol:

le truc du genre de la fonction Init mais en changeant ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
//Définition des variables
        var Liste=new Menu();        //Menu contenant les menus princpaux
 
//??LA ON MET TOUT A ZERO ??
        var Largeur=145,Hauteur=20;    //Largeur des menus et sous menus
        var DivTop=200;DivLeft=5;    //Position du menu par rapport au bord de la feuille (en pixels)
////////////////////////////////////
 
        var Open;                    //Variable contenant la liste des sous menus affichés
        var MOut="#000000";            //Couleur des menus non survolés
        var MOver="#555555";        //Couleur des menus survolés
        var SMOut="#FF0425";        //Couleur des sous menus non survolés
        var SMOver="#79000F";        //Couleur des sous menus survolés
        var Mimg="<img src='/images/fl1.png' height=10 width=10>";
        var SMimg="<img src='/images/fl2.png' height=10 width=10>";
        var Timer=200,Time;        //Timer : Temps à attendre pour que le menu s'efface (nul => désactivé)
        var LgID;
        var Affichage,Com;

Bon je vais tenter apres tout k'ai-je à perdre.
Merci pour les cookies jirais voir.

Heu penses-tu qu'on puisse utiliser un getter et un setter pour les variables Hauteur, Largeur, divTop et divLeft comme on le fait en JAVA ??

Solution

Au cas où ça pourrait servir à quelqu'un voilà ma solution:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
//variable déclarées hors des fonctions
//pourront etre utilisé par les 2 fonctions
var savBody; //-- contiendra le contenu du body
var savPrint; //-- contiendra le contenu de la page (sans banniere ni menu; juste le centre)
 
function passenfull(){
//Récup les elements:
   var body= document.getElementById('bod');
   var obpri= document.getElementById('tdprinter');
   var img=document.getElementById('resizescreen');
 
//Modifie l'image    
   img.innerHTML='<img src=\'/images/little_screen.png\' width=\'22\' height=\'24\' id=\'screen\' name=\'full_screen\' title=\'Passer en mode normal\' onclick=\'passenlittle();\'>';
 
//Récup contenu des éléments
   savBody= body.innerHTML;
   savPrint= obpri.innerHTML;
 
//On remplace le contenu du body par le contenu de mon tdprinter                                
   body.innerHTML=savPrint;                        
 
}
//fonction inverse
function passenlittle(){
    var body= document.getElementById('bod');
    var obpri= document.getElementById('tdprinter');
 
    body.innerHTML=savBody;
    var img=document.getElementById('resizescreen');            
     img.innerHTML='<img src=\'/images/full_screen.png\' width=\'22\' height=\'24\' id=\'screen\' name=\'full_screen\' title=\'Passer en mode plein écran\' onclick=\'passenfull();\'>';
 
}