fermer une fenetre composée de div

Question

Bonjour tout le monde
Voila je vous explique mon probleme : nous sommes en train de créer un os en ligne et mes bases de javascript sont plus que limitées . nous avons séparés le code html du code javascript dans 2 fichiers distincts. nous avons reussi à mettre en place des fenêtres qui se déplacent mais au niveau de la fermeture c'est tout autre chose, notemment au niveau des events .
voici une partie du code :

function creer_fenetre(left,top,width,height,titre,contenu){
        var fenetre = document.createElement("div"); //Création du bloc principal
        fenetre.className="fenetre"; //On donne un attribut class à cette div
        fenetre.style.left=left+'px';
        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)});
                                         else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true);

        //On créé de la même manière la div "haut":
        var haut = document.createElement("div");
        haut.className="haut";

                               //Pour mousedown
                                 addEvent(haut,"mousedown",function (event){commencer_deplacement(event,fenetre)});

                               //Et pour mouseup
                                 addEvent(haut,"mouseup",arreter_deplacement);

        //On créé ensuite les trois div qui seront dedans:
        var haut_gauche = document.createElement("div");
        haut_gauche.className="haut_gauche";
        var haut_droite = document.createElement("div");
        haut_droite.className="haut_droite";
        var haut_centre = document.createElement("div");
        haut_centre.className="haut_centre";

                                            // titre dans barre de titre et association dans le bloc
                                            haut_centre.setAttribute("style","text-align:center");
                                            var titre = document.createTextNode(titre);

                                    haut_centre.appendChild(titre);
        var haut_reduire = document.createElement("div");
        haut_reduire.className="haut_reduire";
                                            haut_reduire.innerHTML='';
        var haut_fermer = document.createElement("div");
        haut_fermer.className="haut_fermer";
                                             //Pour mousedown
                       document.getElementById("haut_fermer").onclick = fermer_fenetre;
                                                   //haut_fermer.onclick = function() {    fermer_fenetre(fenetre)};    c'est ici que ca commence a pecher, je n'arrive pas a faire un event qui fonctionne malgre plusieurs essais : serais ce du au fait qu il y a deja un event associe a la partie "haut" ?
                                                //addEvent(haut_fermer,"onclick",function (event){fermer_fenetre(event,fenetre)});

                                            haut_fermer.innerHTML='';
                                               //Pour mouseclick
                                                 //addEvent(haut_fermer,"mouseup",arreter_deplacement);
         //Puis on les insère une par une dans notre bloc "haut":

        haut.appendChild(haut_gauche);
        haut.appendChild(haut_droite);
        haut.appendChild(haut_fermer);
        haut.appendChild(haut_reduire);
        haut.appendChild(haut_centre);

        //On insère le tout (la div "haut" et les trois div à l'interieur) dans le bloc "fenetre":
        fenetre.appendChild(haut);

        //On fait de même pour la div "milieu"
        var milieu = document.createElement("div");
        milieu.className="milieu";
        var milieu_gauche = document.createElement("div");
        milieu_gauche.className="milieu_gauche";
        var milieu_droite = document.createElement("div");
        milieu_droite.className="milieu_droite";

                                                //Pour mousedown
                                                addEvent(milieu_droite,"mousedown",function (event){commencer_agrandissement(event,fenetre)});

                                                //Et pour mouseup
                                                addEvent(milieu_droite,"mouseup",arreter_deplacement);

        var milieu_centre = document.createElement("div");
        milieu_centre.className="milieu_centre";
                                                chargeZone(contenu, milieu_centre)
        milieu.appendChild(milieu_gauche);
        milieu.appendChild(milieu_droite);
        milieu.appendChild(milieu_centre);
        fenetre.appendChild(milieu);

        //On fait de même pour la div "bas
        var bas = document.createElement("div");
        bas.className="bas";
        var bas_gauche = document.createElement("div");
        bas_gauche.className="bas_gauche";
        var bas_droite = document.createElement("div");
        bas_droite.className="bas_droite";
        var bas_centre = document.createElement("div");
        bas_centre.className="bas_centre";
        bas.appendChild(bas_gauche);
        bas.appendChild(bas_droite);
        bas.appendChild(bas_centre);
        fenetre.appendChild(bas);

        premier_plan(fenetre);
        document.body.appendChild(fenetre); //On insère le tout dans notre document, dans le corps
}

function fermer_fenetre {            ca peche egalement ici : je n'ai pas pu faire de veritable test sur cette fonction, et je ne suis meme pas sur qu'il y est besoin du parametre de la fenetre
        //haut.parentNode.parentNode.removeChild(haut.parentNode);
        removeChild(haut.parent);
        removeChild(milieu.parent);
        removeChild(bas.parent);

en vous remerciant d'avance pour votre aide

PetoleTeam · Answer

Bonjour, pourquoi ne pas se servir de innerHTML de la fenêtre pour initialiser son contenu... var fenetre = document.createElement("div"); fenetre.innerHTML = ' ....<\/div>'; fenetre.innerHTML += ' ... <\/div>'; ...etc... il te faut dans ce cas lui mettre un ID que tu utilise dans le DIV de fermeture... fenetre.innerHTML += ' ... <\/div>'; la fonction de fermeture devient dans ce cas //---------------------------- function fermer_fenetre( div_){ var Obj = document.getElementById( div_); var Parent = Obj.parentNode; Parent.removeChild( Obj); } tu peux également utiliser la réf. de l'objet fenêtre directement la fonction de fermeture devient dans ce cas //---------------------------- function fermer_fenetre( obj_){ var Parent = obj_.parentNode; Parent.removeChild( obj_); } Sans préjuger du reste... ;0)

yanimal · Answer

merci beaucoup ... je vais tenter d'y adapter comme ca ...
oui je sais c'est pas du code bien terrible mais a la base je n'ai absolument aucune bases de javascript .. c'est tout adapté de tutoriaux et infos prises sur le net

PetoleTeam · Answer

Bonjour
oui je sais c'est pas du code bien terrible
bien au contraire il respecte le W3C, mais il faut avouer que cela devient un peu lourd alors qu'avec un innerHTML, qui n'est pas une propriété W3C, les choses deviennent plus aisées.

Il y a quelques erreurs comme l'appel à document.getElementById("haut_fermer") alors que l'élément n'est pas encore ajouter au document...

Il est préférable de passer par des fonctions anonymes,comme tu l'as d'ailleurs écrit
haut_fermer.onclick = function() { fermer_fenetre(fenetre)};
la fonction fermer étant incomplète...

Tu n'en étais pas loin, et avec un minimum de correction cela aurait été bingo...
Bonne continuation...
;O)

Fermer une fenetre composée de div

3 réponses

Votre réponse

Discussions similaires