Forcer l'ouverture d'une fenêtre aux dimensions de l'image

anca2 · 04/12/2011, 19h50

Bonsoir,
Afin de forcer FF et autre à redimensionner les fenêtres en fonction des images.
Je ne peux pas avoir les dimensions W et H (cela est-il possible ?).
Ci-dessous le js
Merci pour votre aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var fois=0
function Affiche_figure(grandeImage,texte)
{
 
var W=(grandeImage.width)+20+"px";
var H=(grandeImage.height)+20+"px";
 
html = '<HTML><HEAD> <TITLE>Image</TITLE><meta http-equiv="Pragma" content="no-cache"></HEAD><BODY onBlur="window.close()"leftmargin=0 marginwidth=0 topmargin=0 marginheigth=0 oncontextmenu="return false"><CENTER>'+
'<a href="#" onClick="window.close()"><IMG SRC="'+grandeImage+'" BORDER=0 alt="'+texte+'" border="0" > </a></CENTER></BODY></HTML>';
if (fois == 1 ) ouvrirImage.close();
ouvrirImage = window.open('','_blank','toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0,height='+H+', width='+W+' ');
ouvrirImage.document.write(html);
fois=1;
}

anca2 · 04/12/2011, 22h33

Ci-dessous, une solution qui fonctionne sur IE et chrome, mais pas sur FF.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var fois=0
function Affiche_figure(grandeImage,texte)
{
 
html = '<HTML><HEAD> <TITLE>Image</TITLE><meta http-equiv="Pragma" content="no-cache"></HEAD><BODY onBlur="window.close()"leftmargin=0 marginwidth=0 topmargin=0 marginheigth=0 oncontextmenu="return false"><CENTER>'+
'<a href="#" onClick="window.close()"><IMG SRC="'+grandeImage+'" BORDER=0 NAME=monImage alt="'+texte+'"border="0" onLoad="window.resizeTo(document.monImage.width+20,document.monImage.height+80); window.moveTo((screen.width-document.monImage.width)/2,5)"> </a></CENTER></BODY></HTML>';
if (fois == 1 ) ouvrirImage.close();
ouvrirImage = window.open('','_blank','toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0');
ouvrirImage.document.write(html);
fois=1;
}

Sur FF la fenêtre n'est pas redimensionnée.

Votre aide sera capital car là, je cale.

Merci

Watilin · 05/12/2011, 18h50

Salut,

avant de te répondre j'aimerais attirer ton attention sur un point : dans Firefox (c'est l'exemple que j'ai actuellement sous la main), va dans les préférences, onglet « Contenu » puis, en face de la ligne « activer JavaScript », clique sur le bouton « Avancé ». Tu y verras une option « Autoriser les scripts à déplacer ou redimensionner les fenêtres existantes ».

Ce que je veux te dire, c'est que le redimensionnement des fenêtres est laissé au choix de l'utilisateur avec les navigateurs actuels. C'est plus ergonomique. Si l'utilisateur a désactivé cette option, tu ne pourras pas redimensionner sa fenêtre.

Toutefois, je viens de tester, ceci marche sous Firefox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
window.innerWidth = 500;
window.innerHeight = 350;

Autre chose : Oublie document.write, c'est un dinosaure qui aurait dû disparaître depuis plusieurs décennies… Cette fonction a un comportement mal connu qui apporte beaucoup de problèmes. Notamment, elle peut effacer le contenu entier de la page quand elle est appelée après le chargement de celle-ci.

À la place, utilise innerHTML, ou mieux, apprends à te servir des méthodes du DOM

SpaceFrog · 05/12/2011, 19h25

De mémoire javatwister nous a gratifié d'un script pour ça dans la FAQ ou les contributions ...
Y'en a deja un bout par là
http://javascript.developpez.com/tel...chee-a-l-ecran

anca2 · 05/12/2011, 19h53

Une réponse et je t’en remercie, en ce qui concerne mon FF il autorise le déplacement et le redimensionnement des fenêtres.

Comme je l’ai dit, il arrive un moment (rapidement) je cale en JS et je n’arrive pas à finir un script, là une réponse de votre part serait la bienvenue.

Donc, te serais t-il possible de lier ta réponse au deuxième script que j’ai mis.

Comme cela j’aurai des exemples à rapprocher avec les méthodes du DOM.

Les dinosaures avancent lentement.

Merci.

Watilin · 06/12/2011, 19h57

Voici une version DOM. Je n'ai pas mis de commentaires car je pense que le code est assez lisible comme ça.

Il reste cependant quelques points qui sont contraires à mes principes, notamment l'utilisation de onblur pour fermer la fenêtre, c'est assez irritant, ainsi que l'utilisation de la balise center qui est dépréciée. Je l'ai laissée dans mon code, mais en commentaires. Il est préférable d'aligner un contenu en utilisant un style CSS sur l'élément contenant, en l'occurence le body.
Note également que le paquet de paramètres que tu passes à window.open, comme 'toolbar=0' et autres, est déconseillé aujourd'hui pour les mêmes raisons que j'ai expliquées concernant le redimensionnement. Idem pour oncontextmenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
38
var popup;
function Affiche_figure( grandeImage, texte ) {
	if (popup && !popup.closed)
		popup.close();
	popup = window.open('', '_blank', 'toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0');
 
	var doc = popup.document;
	doc.title = 'Image';
 
	var $body = popup.document.body;
	$body.style.margin = '0';
	$body.oncontextmenu = function() { return false };
 
//	var $center = doc.createElement('center');
//	$body.appendChild($center);
	$body.style.textAlign = 'center';
 
	var $a = doc.createElement('a');
//	$center.appendChild($a);
	$body.appendChild($a);
	$a.href = '#';
	$a.onclick = function() {
		popup.close();
		return false;
	}
 
	var $img = doc.createElement('img');
	$a.appendChild($img);
	$img.style.border = 'none';
	$img.src = grandeImage;
	$img.alt = texte;
	$img.onload = function() {
		popup.resizeTo(this.width + 20, this.height + 80);
		popup.moveTo((screen.width - this.width) / 2, 5);
	}
 
	popup.onblur = popup.close;
}

Comme tu le vois, j'utilise principalement deux méthodes du DOM : document.createElement et element.appendChild. J'utilise également les attributs de style, ainsi que certains attributs spécifiques comme href, alt et src.
Ce n'est pas encore du code « standard », car il faudrait utiliser des gestionnaires d'évènements addEventListener au lieu d'assigner directement les attributs onXXX (par exemple onclick), mais j'ai fait preuve d'un peu de pragmatisme

anca2 · 06/12/2011, 22h01

Merci pour ta réponse développée et argumentée.

Ce script sert qu’à ouvrir une fenêtre avec une image. Cette fenêtre se ferme dés qu’elle passe dessous ou se ferme si l’on clique ou se ré-ouvre avec une autre image cela permet qu’a la sortie de la page tout est propre (il y a pas de fenêtre).

J’ai mis en place ton script, il ne fonctionne que sur IE-7-8-9 et pas sur Chrome, Opéra et FF (pas d’image et pas de redimensionnement.

Le mien (le second) fonctionne sur tous sauf sur FF le redimensionnement ne se fait pas mais il y a l’image.

J’ai l’impression que c’est difficile. Merci tout de même de ton implication.

Watilin · 08/12/2011, 20h19

Citation:

Envoyé par anca2

J’ai mis en place ton script, il ne fonctionne que sur IE-7-8-9 et pas sur Chrome, Opéra et FF (pas d’image et pas de redimensionnement.

J'ai testé mon script sous FF avant de le poster, il fonctionnait parfaitement. Sous Opera, il fonctionne aussi dans une certaine mesure, car sous Opera, les popups s'ouvrent obligatoirement dans des onglets, et le redimensionnement est impossible. En tout cas, j'avais l'image. Es-tu sûr d'avoir bien intégré mon script ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="Affiche_figure('http://example.com/image.jpg', 'tralala tsoin tsoin'); return false">Cliquez-moi</a>

anca2 · 08/12/2011, 22h27

Bonsoir,

Pour l’image j’avais fais une petite erreur, j’en suis désolé.

Le redimensionnent ne se fait toujours pas (Hors Opéra)

Les images peuvent avoir des dimensions différentes.
De plus, sur FF ou chrome on peut redimensionner la fenêtre, donc, si sur ces derniers l’on redimensionne la fenêtre toutes les autres vont s’ouvrir avec la dernière dimension.

Comme je l’ai dit, je ne maitrise pas JS avec le DOM (mais t’on script ma fait comprendre certaines imbrications, et oui… Rien ne se perd, tout se …. Merci), de plus, je ne veux pas m’incruster pour une fonction dont d’après certains essais peut se faire avec JQuery ou wz_tooltip, un peu lourd mais bon …

Merci pour tout.

Watilin · 09/12/2011, 14h35

C'est toi qui vois

Je tenais juste à te faire connaître des alternatives à document.write.
Note que jQuery et la très grande majorité des frameworks JavaScript utilisent les méthodes du DOM sous le capot.

05/12/2011, 19h25	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	De mémoire javatwister nous a gratifié d'un script pour ça dans la FAQ ou les contributions ... Y'en a deja un bout par là http://javascript.developpez.com/tel...chee-a-l-ecran __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

09/12/2011, 14h35	#10
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	C'est toi qui vois Je tenais juste à te faire connaître des alternatives à document.write. Note que jQuery et la très grande majorité des frameworks JavaScript utilisent les méthodes du DOM sous le capot. __________________ Disposition de clavier ergonomique française : Bépo
	00

05/12/2011, 19h53	#5
anca2 Futur Membre du Club Inscription : mai 2007 Messages : 82 Détails du profil Informations personnelles : Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : mai 2007 Messages : 82 Points : 19 Points : 19	Une réponse et je t’en remercie, en ce qui concerne mon FF il autorise le déplacement et le redimensionnement des fenêtres. Comme je l’ai dit, il arrive un moment (rapidement) je cale en JS et je n’arrive pas à finir un script, là une réponse de votre part serait la bienvenue. Donc, te serais t-il possible de lier ta réponse au deuxième script que j’ai mis. Comme cela j’aurai des exemples à rapprocher avec les méthodes du DOM. Les dinosaures avancent lentement. Merci.
	00

06/12/2011, 22h01	#7
anca2 Futur Membre du Club Inscription : mai 2007 Messages : 82 Détails du profil Informations personnelles : Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : mai 2007 Messages : 82 Points : 19 Points : 19	Merci pour ta réponse développée et argumentée. Ce script sert qu’à ouvrir une fenêtre avec une image. Cette fenêtre se ferme dés qu’elle passe dessous ou se ferme si l’on clique ou se ré-ouvre avec une autre image cela permet qu’a la sortie de la page tout est propre (il y a pas de fenêtre). J’ai mis en place ton script, il ne fonctionne que sur IE-7-8-9 et pas sur Chrome, Opéra et FF (pas d’image et pas de redimensionnement. Le mien (le second) fonctionne sur tous sauf sur FF le redimensionnement ne se fait pas mais il y a l’image. J’ai l’impression que c’est difficile. Merci tout de même de ton implication.
	00

08/12/2011, 22h27	#9
anca2 Futur Membre du Club Inscription : mai 2007 Messages : 82 Détails du profil Informations personnelles : Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : mai 2007 Messages : 82 Points : 19 Points : 19	Bonsoir, Pour l’image j’avais fais une petite erreur, j’en suis désolé. Le redimensionnent ne se fait toujours pas (Hors Opéra) Les images peuvent avoir des dimensions différentes. De plus, sur FF ou chrome on peut redimensionner la fenêtre, donc, si sur ces derniers l’on redimensionne la fenêtre toutes les autres vont s’ouvrir avec la dernière dimension. Comme je l’ai dit, je ne maitrise pas JS avec le DOM (mais t’on script ma fait comprendre certaines imbrications, et oui… Rien ne se perd, tout se …. Merci), de plus, je ne veux pas m’incruster pour une fonction dont d’après certains essais peut se faire avec JQuery ou wz_tooltip, un peu lourd mais bon … Merci pour tout.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email