Reduction de fenetres

Sujet résolu

6 juillet 2009 à 18:51:46

Bonjour,

Suite à ma lecture du tuto "web 2.0", permettant la gestion de fenêtres, j'ai eu envie de créer un bouton reduire pour les cacher puis afficher. J'ai fait ça avec display:none, malheureusement, soit c'est lors de l'ajout de l'event, soit la fonction... enfin bref. Le script est ici : www.musique-envie.com/essai.php

Pour le code source, voici celui de ma fonction :

function reduireFenetre(fenetre)
{
	if(fenetre.milieu.display == 'none'){
		fenetre.milieu.style.display = 'block';
		fenetre.bas.style.display = 'block';
		fenetre_height = parseInt(fenetre.milieu.style.height) + parseInt(fenetre.haut.style.height) + parseInt(fenetre.bas.style.height);
		fenetre.style.height = fenetre_height+'px';
	}
	else {
		fenetre.milieu.style.display = 'none';
		fenetre.bas.style.display = 'none';
	}
}

De plus, j'ai essayé de mettre une fonction qui permetrrait de mettre du contenu dans les fenetres ; a peine lancé, les fenetres ne s'ouvraient meme plus^^
Donc si vous pouvez me donner une piste

EDIT:
ps; voici ma variable appelante

var bouttonReduire = document.createElement("div");
	bouttonReduire.className = "boutton";

	bouttonReduire.onclick = reduireFenetre;

Golmote

6 juillet 2009 à 20:09:52

Tibadibadoum !

2 erreurs :

fenetre_deplacee is not defined
fenetre.js (ligne 141)
if(fenetre_deplacee!=0) {\n

---

fenetre.milieu is undefined
fenetre.js (ligne 129)
if(fenetre.milieu.style.display == 'none'){\n

s4ra

6 juillet 2009 à 20:44:19

Déjà, merci beaucoup de ta réponse.

Effectivement, je me suis dit que l'appel de la fonction sans arguments ça le faisait pas...^^
J'ai donc fait ça :

addEvent(bouttonReduire,"click",function (){reduireFenetre(fenetre)})

avec la fonction addEvent :

function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}

Mais ça ne marche pas non plus...

pas plus qu'avec le dbl clik sur la barre en haut, qui est à peu près la meme fonction et le meme appel :

function reduireDblClick(){

			

	if( this.fenetre.mileu.style.display == "none" ){

		this.fenetre.milieu.style.display = "block"; //On réaffiche le contenu						

		this.fenetre.style.height = this.fenetre.haut.height + "px"; //et on met à jour la taille de la fenetre				

	}

	else{

		this.fenetre.milieu.style.display = "none";	//On cache le contenu

	}


	//Annulation de l'evenement pour éviter la selection

	return false;

}

//APPEL
addEvent(haut,"dblclick",reduireDblClick);

Aurais-tu une solution à me proposer ? Merci d'avance pour ton aide. (pas forcément un code tout fait, mais un guide peut-etre, je comprendrai mieux...)

Golmote

6 juillet 2009 à 22:03:25

Arf... je m'apprêtais à récupérer le JS et tu viens de l'enlever du serveur non ? :euh:

s4ra

6 juillet 2009 à 22:09:54

Non, il y est toujours

tu peux y'aller.
Merci de l'aide.
(C 'est juste que comme je le retelcharge avec modifs toutes les 3s, il est desfois monmentanement indisponible^^)

Golmote

6 juillet 2009 à 23:43:07

Bon, te corriger ton problème ne vas pas franchement être évident...

Dans ta fonction reduireFenetre(), tu sembles penser que "fenetre" est un objet javascript, avec une propriété "milieu", une propriété "bas", etc.

Mais ce n'est pas le cas...

Après, tu peux modifier en remplaçant toute la création des variables "milieu", etc.

Genre...

fenetre.milieu = document.createElement("div");
        fenetre.milieu.className="milieu";
// etc.

T'as suivi ?

EDIT : Autrement dit, avec ce script, ça fonctionne :

var fenetre_deplacee_difx=0;
var fenetre_deplacee = 0;
var zindex = 0;
var fenetre_active = null;
function getPosition(e){
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e     = e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
}

function creer_fenetre(left,top,width,height,contenu, type){
        var fenetre = document.createElement("div"); 
        fenetre.className="fenetre";
        fenetre.style.left=left+"px"; //Modification de l'attribut left du style de notre div
        fenetre.style.top=top+"px";
        fenetre.style.width=width+"px";
        fenetre.style.height=height+"px";
	if(document.all) fenetre.attachEvent("onmousedown",function (){premier_plan(fenetre)}); //Pour IE
        else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true); //Pour les autres
        //etc


        
        //On crÃ©e de la mÃªme maniÃ¨re la div "haut" :
        fenetre.haut = document.createElement("div");
        fenetre.haut.className="haut";

	addEvent(fenetre.haut,"mousedown",function (event){commencer_deplacement(event,fenetre)});
	addEvent(fenetre.haut,"mouseup",arreter_deplacement);
	addEvent(fenetre.haut,"dblclick", function (){reduireDblClick(fenetre)});


        //On crÃ©e ensuite les trois div qui y figureront :
        fenetre.haut_gauche = document.createElement("div");
        fenetre.haut_gauche.className="haut_gauche";
        fenetre.haut_droite = document.createElement("div");
        fenetre.haut_droite.className="haut_droite";
        fenetre.haut_centre = document.createElement("div");
        fenetre.haut_centre.className="haut_centre";
	fenetre.bouttonReduire = document.createElement("div");
	fenetre.bouttonReduire.className = "boutton";
	
	addEvent(fenetre.bouttonReduire,"click",function (){reduireFenetre(fenetre)});

	var texte = document.createTextNode(" - ");

        //Puis on les insÃ¨re une par une dans notre bloc "haut" :
	fenetre.bouttonReduire.appendChild(texte);
	fenetre.haut_centre.appendChild(fenetre.bouttonReduire);
        fenetre.haut.appendChild(fenetre.haut_gauche);
        fenetre.haut.appendChild(fenetre.haut_droite);
        fenetre.haut.appendChild(fenetre.haut_centre);
	
        //On insÃ¨re le tout (la div "haut" et les trois div Ã  l'intÃ©rieur) dans le bloc "fenetre":
        fenetre.appendChild(fenetre.haut);
        
        //On fait de mÃªme pour la div "milieu"
        fenetre.milieu = document.createElement("div");
        fenetre.milieu.className="milieu";
        fenetre.milieu_gauche = document.createElement("div");
        fenetre.milieu_gauche.className="milieu_gauche";
        fenetre.milieu_droite = document.createElement("div");
        fenetre.milieu_droite.className="milieu_droite";
        fenetre.milieu_centre = document.createElement("div");
        fenetre.milieu_centre.className="milieu_centre";
	if(type == 'txt') {
		var contenu_1 = document.createTextNode(contenu);
		fenetre.milieu_centre.appendChild(contenu_1);
	}
	else if(type == 'frame') {
		var frame = document.createElement("iframe");
		frame.src = "http://www.siteduzero.com";
		frame.width = width - 18;
		frame.height = height;
		fenetre.milieu_centre.appendChild(frame);
	}
        fenetre.milieu.appendChild(fenetre.milieu_gauche);
        fenetre.milieu.appendChild(fenetre.milieu_droite);
        fenetre.milieu.appendChild(fenetre.milieu_centre);
        fenetre.appendChild(fenetre.milieu);
        
        //On fait de mÃªme pour la div "bas"
        fenetre.bas = document.createElement("div");
        fenetre.bas.className="bas";
        fenetre.bas_gauche = document.createElement("div");
        fenetre.bas_gauche.className="bas_gauche";
        fenetre.bas_droite = document.createElement("div");
        fenetre.bas_droite.className="bas_droite";
        fenetre.bas_centre = document.createElement("div");
        fenetre.bas_centre.className="bas_centre";
        fenetre.bas.appendChild(fenetre.bas_gauche);
        fenetre.bas.appendChild(fenetre.bas_droite);
        fenetre.bas.appendChild(fenetre.bas_centre);
        fenetre.appendChild(fenetre.bas);

 	premier_plan(fenetre);
        document.body.appendChild(fenetre); //On insÃ¨re le tout dans notre document, dans le corps

}

function commencer_deplacement(ev,fenetre) {
        fenetre_deplacee=fenetre; //On dÃ©finit quelle fenÃªtre est en cours de dÃ©placement
        old_mouseCoords=mouseCoords(ev); //On rÃ©cupÃ¨re la position de la souris
        old_windowCoords=getPosition(fenetre); //Et la position de notre fenÃªtre
        //On stocke les diffÃ©rences dans les variables globales
        fenetre_deplacee_difx=old_mouseCoords.x-old_windowCoords.x;
        fenetre_deplacee_dify=old_mouseCoords.y-old_windowCoords.y;

}

function arreter_deplacement() {
	fenetre_deplacee.style.filter = "alpha(opacity=100);";	
	fenetre_deplacee.style.opacity = "1";
fenetre_deplacee=0; //La variable vaut 0
}
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
function premier_plan(fenetre) {
        zindex++; //On incrÃ©mente la variable globale
        fenetre.style.zIndex=zindex; //On affecte sa valeur au z-index de la fenÃªtre concernÃ©e
}
function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
}
function reduireFenetre(fenetre)
{
	if(fenetre.milieu.display == 'none'){
		fenetre.milieu.style.display = 'block';
		fenetre.bas.style.display = 'block';
		fenetre_height = parseInt(fenetre.milieu.style.height) + parseInt(fenetre.haut.style.height) + parseInt(fenetre.bas.style.height);
		fenetre.style.height = fenetre_height+'px';
	}
	else {
		fenetre.milieu.style.display = 'none';
		fenetre.bas.style.display = 'none';
	}
}

function deplacer_fenetre(ev) {
        if(fenetre_deplacee!=0) {
                var souris=mouseCoords(ev);
                fenetre_deplacee.style.left=(souris.x-fenetre_deplacee_difx)+'px'; //On soustrait l'abscisse du curseur par rapport au coin gauche de la fenÃªtre		
                fenetre_deplacee.style.top=(souris.y-fenetre_deplacee_dify)+'px'; //On fait de mÃªme avec l'ordonnÃ©e
		fenetre_deplacee.style.filter = "alpha(opacity=80);";	
		fenetre_deplacee.style.opacity = "0.8";
        }
}
function reduireDblClick(fenetre)
{
	if(fenetre.milieu.style.display == "none")
	{
		fenetre.milieu.style.display = "block"; //On rÃ©affiche le contenu						
		fenetre.style.height = fenetre.haut.height + "px"; //et on met Ã  jour la taille de la fenetre				
	}
	else
	{
		fenetre.milieu.style.display = "none";	//On cache le contenu
	}
	//Annulation de l'evenement pour Ã©viter la selection
	return false;
}

Néanmoins, si tu fais ça, il serait préférable de repenser le tout sous forme d'objets... La gestion du tout serait ensuite grandement facilitée.

s4ra

7 juillet 2009 à 14:06:06

Mon prinnnnnnccce, mon sauveuuuuurrrrrrrrrr ! :lol:

Franchement, un grand merci pour toute l'aide que tu viens de m'apporter, merci de passer autant de temps sur les problèmes des gens !!

Merci beaucoup, énormément ! (ça marche !)

Hum, juste, si j'ai bien suivi, en fait, le problème venait que je ne créait pas d'objets... Et donc fenetre.milieu undefined. Mais fenetre était deja un objet c'est ça ? mais pas milieu ? Hum, je vis essayer d'en apprendre plus sur la creation d'objets.... Merci beaucoup en tout cas ! Merci, tu es un saint ! :ange:

Golmote

7 juillet 2009 à 14:21:22

De rien

Le problème était que tu écrivais fenetre.milieu , sous-entendant ainsi que "milieu" était une propriété de "fenetre".
"fenetre" est bien un objet (un élément <div>), et "milieu" également.
Mais "milieu" n'était pas une propriété de "fenetre".

Petit code pour résumer.

// Création d'une variable "fenetre"
// "fenetre" est un objet. (un élément <div>)
var fenetre = document.createElement("div");

// "fenetre" a des propriétés et des méthodes prédéfinies
// Affichage de quelques unes d'entre elles :
alert(fenetre.innerHTML); // propriété innerHTML
alert(fenetre.parentNode); // propriété parentNode
alert(fentre.appendChild); // méthode appendChild()
// etc.

// Création d'une chaîne de caractère
var chaine = "qqchose"

// Si on essaie d'afficher fenetre.chaine, ça ne fonctionnera pas...
// Il faut définir une nouvelle propriété de l'objet "fenetre"
fenetre.machin = chaine;

// Affiche de la propriété "machin" :
alert(fenetre.machin); // affiche "qqchose"

// Ajout d'une méthode à l'objet "fenetre"
fenetre.truc = function() {
  alert("YOP !");
};

// Exécution de la méthode "truc"
fenetre.truc(); // affiche "YOP !"

s4ra

7 juillet 2009 à 14:24:33

Hum ok, effectivement je commençais à m'embrouiller, zéro que je suis.
Merci