Sujet Précédent Sujet Suivant

Redimension d'une fenêtre Javascript

Résolu/Fermé
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 - 14 avril 2009 à 11:17
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 - 15 avril 2009 à 09:29
Bonjour,

Je suis en train de finaliser mon site web et il me reste un dernier petit problème à régler.
Donc j'ai une page qui affiche la liste des articles créé par des utilisateurs ( voir photo)
https://imageshack.com/
Lorsque je clique sur le bouton ( la petite bulle blanche ), j'ouvre l'article dans une fenêtre de type webOS ( voir tuto sur ce site )
https://imageshack.com/
Comme vous pouvez le voir sur la photo, il y a beaucoup trop d'espace entre le bouton fermer et le bas de la fenêtre.
Ce qu'il faudrait faire c'est pour avoir estimer la taille de mon article avant l'ouverture de la fenêtre étant donnée que je passe en paramètre la hauteur de la fenêtre dans l'appel de la fonction.


<input type="image" title="lecture"value="Fenetre" src="../img/lecture.png" onclick="creer_fenetre(400,400,600,550,'<?php echo $titre; ?>','<?php echo $text; ?>','<?php echo $lien; ?>','<?php echo $fichier; ?>','<?php echo $j; ?>',event)" />


550 correspond au paramètre hauteur de la fenetre.
Voila quel procédé pourriez vous me conseillez pour pouvoir estimer cette taille de fenêtre ?

Merci beaucoup
A voir également:

13 réponses

Réponse 1 / 13
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 11:20
Bonjour,
Je dirais de créer la fenêtre sans quelle soit visible et de récupérer sa taille après création afin de savoir.
0
Réponse 2 / 13
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
14 avril 2009 à 11:20
Alors je m'y connais pas trop en JavaScript, mais j'ai ptet une idée (peut-être totalement à côté de la plaque aussi), mais si tu met une hauteur qui correspondrait à une hauteur automatique ca ne pourrait pas faire ?

Désolé si mon idée est ridicule ;)
0
Réponse 3 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 11:28
C'est déjà ce que je fait Yaninho ^^ donc ce n'est pas la bonne solution :)

NookZ , comment faire pour récupérer la taille après création aussi ? ( tu penses au fonctions offsetwidth et offsetheight ? ).

Et comment créer ma fenêtre sans qu'elle soit visible ?
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 11:42
Alors personnellement dans la création de la fenêtre je mets le style.visibility à "hidden" ensuite j'utilise jquery.
Avec jquery je récupère le div contenant la fenêtre et je change son CSS avec opacity:0 puis je fais un show() afin qu'il calcule les tailles et je la récupère avec un xWidth().
Dans l'utilisation que j'en ai vu y'a beaucoup d'autres choses, donc je ne sais pas si cela suffira, 'jai essayé d'isoler le code de récupération de la taille mais peut-être que j'ai oublié certaines parties.
Enfin tu as déjà une base de départ sur la procédure à suivre.

Pour jquery :
https://jquery.com/
https://jquery.com/
0
Réponse 4 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 11:45
Merci NookZ, je vais potasser tout sa.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 12:55
J'ai tester ceci avec jQuery.

var hauteur=$("fenetre").height();
alert(hauteur);

Le problème il m'affiche toujours une valeur null.

le code Js :

function creer_fenetre(left,top,width,height,titre,texte,lien,fichier,nombre,e) {

var position=mouseCoords(e);
left=((position.x)-400);
top=((position.y)-100);

var fichier= fichier.split("," );


//ON CREER LA FENETRE PRINCIPAL
var fenetre = document.createElement("div");
fenetre.className="fenetre"; //On donne un attribut class à cette div
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";
addEvent(fenetre,"mousedown",function (){premier_plan(fenetre)});

//ON CREER LA PARTIE HAUTE DE LA FENETRE
var haut = document.createElement("div");
haut.className="haut";
addEvent(haut,"mousedown",function (event){commencer_deplacement(event,fenetre)});
addEvent(haut,"mouseup",arreter_deplacement);
//On crée ensuite les trois div qui y figureront :
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";
//Puis on les insère une par une dans notre bloc "haut" :
haut.appendChild(haut_gauche);
haut.appendChild(haut_droite);
haut.appendChild(haut_centre);
//On insère le tout (la div "haut" et les trois div à l'intérieur) dans le bloc "fenetre" :
fenetre.appendChild(haut);

//ON CREER LE MILIEU DE LA FENETRE
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";

var milieu_centre = document.createElement("div");
milieu_centre.className="milieu_centre";
var milieu_centre_titre = document.createElement("div");
milieu_centre_titre.className="milieu_centre_titre";
var milieu_centre_commentaire = document.createElement("div");
milieu_centre_commentaire.className="milieu_centre_commentaire";
var milieu_centre_upload = document.createElement("div");
milieu_centre_upload.className="milieu_centre_upload";
var milieu_centre_fermer = document.createElement("div");
milieu_centre_fermer.className="milieu_centre_fermer";

//Création des div pour l'affichage de l'article ( sujet, corps, partage fichier, et bouton pour fermer)
milieu_centre.appendChild(milieu_centre_titre);
milieu_centre.appendChild(milieu_centre_commentaire);
milieu_centre.appendChild(milieu_centre_upload);
milieu_centre.appendChild(milieu_centre_fermer);

////////////////////////////////TITRE DU MESSAGES////////////////////////////////////////////////////////////////////

var titre_legend_titre = document.createTextNode("Titre");


//Création de la legend pour la mise en page du corps du texte
var legend_titre = document.createElement("legend");
legend_titre.className="legend_titre";

//Création du fieldset pour la mise en page du corps du texte
var contour_titre = document.createElement("fieldset");
contour_titre.className="contour_titre";

var titre = document.createTextNode(titre);
var affiche_titre=document.createElement("div");
affiche_titre.className="affiche_titre";
affiche_titre.appendChild(titre);

//On relie le fieldset, la legend et le corp du texte ensemble
legend_titre.appendChild(titre_legend_titre);
contour_titre.appendChild(legend_titre);
contour_titre.appendChild(affiche_titre);
milieu_centre_titre.appendChild(contour_titre);


////////////////////////////////CORPS DU MESSAGES////////////////////////////////////////////////////////////////////

var titre_legend_corps = document.createTextNode("Corps");


//Création de la legend pour la mise en page du corps du texte
var legend_commentaire = document.createElement("legend");
legend_commentaire.className="legend_commentaire";

//Création du fieldset pour la mise en page du corps du texte
var contour_commentaire = document.createElement("fieldset");
contour_commentaire.className="contour_commentaire";

var text = document.createElement("text");
text.innerHTML = texte;



//On relie le fieldset, la legend et le corp du texte ensemble
legend_commentaire.appendChild(titre_legend_corps);
contour_commentaire.appendChild(legend_commentaire);
contour_commentaire.appendChild(text);
milieu_centre_commentaire.appendChild(contour_commentaire);


////////////////////////////////UPLOAD DU MESSAGES////////////////////////////////////////////////////////////////////


var titre_legend_upload = document.createTextNode("Fichier joins");

//Création de la legend pour la mise en page de l'upload
var legend_upload = document.createElement("legend");
legend_upload.className="legend_upload";

//Création du fieldset pour la mise en page de l'upload
var contour_upload = document.createElement("fieldset");
contour_upload.className="contour_upload";



if ( nombre != 0 )
{
upload = new Array(nombre-1);
liens = new Array(nombre-1);
sautDeLigne = new Array(nombre-1);


for (var i=0; i<nombre; i++){
upload[i] = document.createTextNode(fichier[i]);
sautDeLigne[i] = document.createElement('br');
liens[i] = document.createElement("a")
liens[i].setAttribute("href",lien+fichier[i]);
liens[i].appendChild(upload[i]);
liens[i].appendChild(sautDeLigne[i]);
contour_upload.appendChild(liens[i]);
}
}



//On relie le fieldset, la legend et l'upload du texte ensemble
legend_upload.appendChild(titre_legend_upload);
contour_upload.appendChild(legend_upload);
milieu_centre_upload.appendChild(contour_upload);


////////////////////////////////FERMER MESSAGE////////////////////////////////////////////////////////////////////

var bouton = document.createElement('input');
bouton.setAttribute("type","submit");
bouton.setAttribute("value","Fermer");
bouton.onclick=function() {fenetre.parentNode.removeChild(fenetre);};


milieu_centre_fermer.appendChild(bouton);


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); //On met au premier plan notre fenêtre

var hauteur=$("fenetre").height();
alert(hauteur);

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

}
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 14:19
Dans la fonction creer_fenetre, j'ajouterai :
var fenetre = document.createElement("div");
var fenetreJQ = $(fenetre);
fenetreJQ.css({opacity:0});
fenetreJQ.show();

et si je ne me trompe pas après ça la taille est dans
var longueur = fenetreJQ.xWidth();
var largeur = fenetreJQ.xHeight();
0
Réponse 6 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 14:28
J'ai ajouté ce que tu ma dis. Donc lorsque j'écrit de cette façon :

var longueur = fenetreJQ.xWidth();
var largeur = fenetreJQ.xHeight();

sa me dit fenetreJQ.xWidth is not a function.

Quand je le note de cette facon :

var longueur = fenetreJQ.xWidth;
var largeur = fenetreJQ.xHeight;

Les valeurs de l'alerte me dit undefined.
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 14:36
ça devait être .width() et .height() alors, j'ai du confondre
0
Réponse 7 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 14:38
J'ai déjà essayé :=) , il me donne la même erreur.

fenetreJQ.Width is not a function

creer_fenetre(383, 318, 232, 700, "nombre lig ne", "bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>bnojour<br/><br/>bonjour<br/><br/>bonjour<br/><br/>aaa", "../upload/quentin.thomas/nombre lig ne/", [""], "0", click clientX=783, clientY=418)fenetre.js (ligne 199)
onclick()liste_ar...embre.php (ligne 1)

[Break on this error] var longueur = fenetreJQ.Width();
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 14:43
width() avec une minuscule
0
Réponse 8 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 15:53
Merci nookZ tu avais raison.

Une petite chose que je ne comprend pas tout de même :

quand je fait ceci :

var fenetre_milieu_centre_titre = $(milieu_centre_titre);
fenetre_milieu_centre_titre.css({opacity:0});
fenetre_milieu_centre_titre.show();
var longueur_milieu_centre_titre = fenetre_milieu_centre_titre.height();
alert(longueur_milieu_centre_titre)


var fenetre_milieu_centre_commentaire = $(milieu_centre_commentaire);
fenetre_milieu_centre_commentaire.css({opacity:0});
fenetre_milieu_centre_commentaire.show();
var longueur_milieu_centre_commentaire = fenetre_milieu_centre_commentaire.width();
alert(longueur_milieu_centre_commentaire)


var fenetre_milieu_centre_upload = $(milieu_centre_upload);
fenetre_milieu_centre_upload.css({opacity:0});
fenetre_milieu_centre_upload.show();
var longueur_milieu_centre_upload = fenetre_milieu_centre_upload.width();
alert(longueur_milieu_centre_upload)


var fenetre_milieu_centre_fermer = $(milieu_centre_fermer);
fenetre_milieu_centre_fermer.css({opacity:0});
fenetre_milieu_centre_fermer.show();
var longueur_milieu_centre_fermer = fenetre_milieu_centre_fermer.width();
alert(longueur_milieu_centre_fermer)

var longueur = ((longueur_milieu_centre_titre)+(longueur_milieu_centre_commentaire)+(longueur_milieu_centre_upload)+(longueur_milieu_centre_fermer)+(30));

alert(longueur)

J'obtient comme valeur 1562, valeur qui ne correspond pas du tout quand je rentre en dur la hauteur pour cette article précis.

Par contre si je n'utilise qu'une seule fois :

var fenetre_milieu_centre_titre = $(milieu_centre_titre);
fenetre_milieu_centre_titre.css({opacity:0});
fenetre_milieu_centre_titre.show();
var longueur_milieu_centre_titre = fenetre_milieu_centre_titre.height();
alert(longueur_milieu_centre_titre)

et que je modifie moi mêmem à la main ( milieu_centre_titre ==> milieu_centre_commentaire / upload / fermer ) et que je calcul à chaque fois la valeur de l'alert. A ce moment j'obtiens 700 qui est la bonne valeur lorsque je la rentre en dur.

Je comprend pas pourquoi la valeur change quand je fait tout les calculs à la suite ?
0
Réponse 9 / 13
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 16:05
Je ne comprend pas pourquoi vous faites ça :
var longueur = ((longueur_milieu_centre_titre)+(longueur_milieu_centre_comm­entaire)+(longueur_milieu_centre_upload)+(longueur_milieu_ce­ntre_fermer)+(30));
0
Réponse 10 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 16:23
En faite dans mon div centre, j'ai 4 autre div :

centre_titre ou j'affiche mon titre
centre_commentaire ou j'affiche mon texte
centre_upload ou j'affiche tout les uploads lié à l'article
centre_fermer ou j'affiche le bouton fermer

photo ici => https://imageshack.com/

donc je calcul chaque partie et je les additionne pour avoir la taille total.

Pour la partie centre_fermer je ne fait pas :

var fenetre_milieu_centre_fermer = $(milieu_centre_fermer);
fenetre_milieu_centre_fermer.css({opacity:0});
fenetre_milieu_centre_fermer.show();
var longueur_milieu_centre_fermer = fenetre_milieu_centre_fermer.width();
alert(longueur_milieu_centre_fermer)

mais sa :

var fenetre_milieu_centre_fermer = $(bouton);
fenetre_milieu_centre_fermer.css({opacity:0});
fenetre_milieu_centre_fermer.show();
var longueur_milieu_centre_fermer = fenetre_milieu_centre_fermer.width();
alert(longueur_milieu_centre_fermer)

Ce que je ne comprend pas c'est pourquoi quand je les additionnes à la suite, les valeur ne sont pas les bonnes et quand je les calculs moi même à la main un par un cela fonctionne.
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 16:28
Sûrement parce que le width prend les valeurs de margin ou autres éléments non visibles et les additionne de la mauvaise façon.
0
Réponse 11 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 16:43
Escuse moi pour cette perte de temps NookZ , l'erreur vient de moi, en faite j'essaie de calculer les height depuis tout à l'heure et j'additionnai des height et des width ensemble , normal que le calcul ne fonctionne pas :)

Dsl en tout cas ta technique marche.

Merci
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 16:51
Contente d'avoir pu aider, n'oublie pas de passer en résolu.
0
Réponse 12 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
14 avril 2009 à 17:02
Une dernière petite question :

J'arrive bien à récupérer la bonne taille, le soucis c'est qu'il faut que je repasse l'affichage de ma fenêtre en visible.

J'ai essayé :

var fenetre_article = $(fenEtre);
fenetre_article.css({visibility:visible});

mais cela ne fonctionne pas.
De plus faut t'il que je recrée une fonction pour afficher ma nouvelle fenetre avec les bonnes dimension ou je peut le faire à partir de ma fonction déjà créé ?
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 513
14 avril 2009 à 17:07
Pour l'affichage : .css({opacity:100});
Pourquoi une nouvelle fonction? Normalement il suffit de changer les dimensions de ta fenêtre avec les nouvelles tailles et voilà
0
Réponse 13 / 13
beudet Messages postés 122 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 février 2011 13
15 avril 2009 à 09:29
Merci NookZ le redimenssionement de la hauteur fonctionne nickel.

Post résolu.
0

Discussions similaires

Conhost.exe
ThaBestGamer -
Malekal_morte- -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Gestionnaire de fenêtres de bureau prend 6 Go de RAM
Zicronn -
Zicronn -

2 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses