11540 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Popup en javascript aux dimensions qui s'adaptent au contenu

Hello,

Je cherche une solution technique (probablement en javascript) pour obtenir des popups qui se redimensionnent en fonction du contenu pour l'épouser au mieux.
Jusqu'à présent, je n'ai trouvé que des scripts qui permettent de fixer la taille manuellement, ce qui exclu toute utilisation à plus grande échelle.

Mon objectif est de l'utiliser principalement avec des images (donc s'il ne gère que ces dernières et pas du contenu texte/HTML, ça me convient aussi).

Merci d'avance Smiley smile
Modifié par EcliptuX (09 Jan 2006 - 23:34)
Bonsoir,

Script écrit en live et donc sans garantie de fonctionnement, mais essayons peut-être :


window.onload = function () {
window.resizeTo(document.body.scrollLeft, document.body.scrollTop);
}


IMPORTANT : A placer dans la popup et non dans la fenêtre principale.
Salut QuentinC Smiley smile

Totalement débutant en javascript, je n'ai pas su exploiter ton code. En fait mes notions dans ce langage me laissaient penser qu'il fallait qu'il y ai tjrs une fonction bien précise en Javascript.
Quoiqu'il en soit, j'ai commencé à chercher des scripts existant pour répondre à ma problématique et je vous fait part de ma découverte, trouvé sur le site http://www.toutjavascript.com

Voici le code javascript :
a écrit :
function PopupImage(img) {
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');
w.document.write("<HTML><HEAD><TITLE></TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+12,document.images[0].height+30); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='"+img+"' border=0>");
w.document.write("");
w.document.write("</BODY></HTML>");
w.document.close();
}

Et le code HTML :
a écrit :
<a href="javascript Smiley langue opupImage('images/monimage.jpg')">
<img src="images/tn-monimage.jpg" />
</a>


Il marche assez bien, mais je pense qu'il est perfectible Smiley smile
En effet, si l'image est très haute (plus de 800px), le bas popup est hors de la zone d'écran. N'y a-t-il pas moyen de faire en sorte qu'il ait une taille maximale (en largeur et en auteur) histoire qu'il ne déborde par de l'écran, et que dans ce cas, des ascenseurs apparaissent ?
Modifié par EcliptuX (09 Jan 2006 - 18:15)
Je connais très bien ce site en tant que participant actif de ses forums.

Tu peux ajuster manuellement les mentions width=400 et height=400 dans le script. J'imagine que tu dois plus ou moins connaître la taille de tes images ?

Sinon je trouve ce script quand même curieux parce que pour moi, il ne se redimensionne jamais et garde ses tailles fixes de 400x400...

voilà.
Le soucis c'est que la taille des images n'est pas fixe :S
C'est aussi pour ça que je recherche un tel script...
Moi non plus je n'ai pas bien saisi pourquoi le script original indique des tailles de 400x400 car sous Firefox et Opera (je n'ai pas IE sous la main), malgré ces tailles indiqués, la fenêtre est correctement redimensionnée

Sinon quid de ma question pour les images très grande ?
Si ta popup n'est destinée qu'à recevoir une unique photo, tu pourrais utiliser ce type de fonction :


var img = null;
function ouvrirPopup (url) {
img = new Image();
img.src = urL;
waitForLoading();
}
function waitForLoading () {
if (!img.complete) { setTimeout(waitForLoading, 30); return; }

var w = window.open('about:blank', 'monimage', 'width='+img.width+',height='+img.height);

w.document.write('<html><body><img src="'+img.src+'" alt="Description" /></body></html>');

}
Ah oui en effet, ça se rapproche de ce que je cherche Smiley smile

Pour résoudre mon pb pour mes grosses images qui dépassent la hauteur de l'écran, j'ai ajouté une fonction en modifiant l'originale.
J'ai donc le code suivant :
var img = null;

function ouvrirPopup(url) {
  img = new Image();
  img.src = url;
  waitForLoading();
}

function waitForLoading() {
  if (!img.complete) { 
    setTimeout(waitForLoading, 30); return; 
  }
  var w = window.open('about:blank', 'monimage', 'width='+img.width+',height='+img.height);
  w.document.write('<html><body style="margin: 0px;"><img src="'+img.src+'" alt="" /></body></html>');
}

function ouvrirPopupGrand(url) {
  img = new Image();
  img.src = url;
  waitForLoadingGrand();
}

function waitForLoadingGrand() {
  if (!img.complete) { 
    setTimeout(waitForLoading, 30); return; 
  }
  var w = window.open('about:blank', 'monimage', 'width='+img.width+',height='+img.height+', scrollbars=yes');
  w.document.write('<html><body style="margin: 0px;"><img src="'+img.src+'" alt="" /></body></html>');
}


Je n'ai pas pu tester tout ça sous IE pour le moment, mais sous Opera par exemple, la fonction ouvrirPopupGrand() ouvre une nouvelle page blanche.
Pas dramatique car Opera ne représente qu'un faible nbre de visiteur dans mes stats mais à l'occasion je me pencherai sur le pb.

Mille mercis à toi QuentinC pour tes réponses Smiley smile
Sujet clos
Aller à