<iframe> avec deux pages responsives

Bonjour à tous et à toutes

Je suis confronté à un problème d'intégration pour mon portfolio perso,

N'ayant pas le temps de faire une intégration propre, j'ai décidé de faire une iframe pour inclure une gallerie responsive entre mon menu et mon footer.
J'utilise le script suivant pour redimensionner correctement la fenêtre:

Code:

---

1 2 3

function autoResize(iframe) { $(iframe).height($(iframe).contents().find('html').height()); }

---

le problème est que lorsque je change la taille de la fenêtre à la main, je doit la rafraichir pour qu'elle s'adapte à nouveau correctement, et ce problème est particulièrement embêtant lorsque l'on veut faire pivoter un smartphone ou une tablette.
Autre problème, lorsque je veux avoir le détail d'une image, la page qui s'affiche conserve la hauteur totale de la gallerie, je me retrouve donc avec beaucoup trop d'espace en bas de page...

Voici l'url de la page de test:
www.nicolasgiet.com/TEST/headerfooter.html/

J'espere que vous pourrez m'aider à résoudre ces problèmes ;)

Soyez indulgents je suis un noob en dev..

Je cherche un peu la même solution que toi.
J'ai d'abord essayé avec les <div> qui sont beaucoup plus souples que les iframe notamment pour les dimensions mais vu la configuration du script je suis contraint aussi d'utiliser les iframes pour une histoire de target que je ne parviens pas à résoudre avec des div, je pense que tu as déjà essayé ?!

Salut !
Oui j'ai essayé (vite fait et sans conviction) mais j'ai eu des conflits entre mes deux grilles responsives..
Comme je l'ai dit il faudrait que je prennes le temps de voir ça mais je ne pourrait pas avant aout :X certes le iframe est lourd mais convient à un petit portfolio..

J'arrive pas à voir le problème. J'ai testé sous Chrome/Firefox et ça redimensionne bien l'espace. Ou alors j'ai mal compris le problème

En fait l'iframe fait son boulot si tu ne retouches pas a la taille de la fenêtre de ton navigateur,
Pour voir le problème plus clairement tu peux tester le lien sur un smartphone ou une tablette et en pivotant k'écran pour passer en mode landscape ou portrait tu verra que le ratio de la taille d ela page n'est plus respecté,

Autre exemple si tu réduis la taille de ton navigateur et que tu repasses tout de suite après en plein écran, la aussi le ratio de la page n'est pas respecté,

Il est alors obligatoire de rafraîchir la page pour re-redimensionner l'iframe...

En ce qui concerne les visuels de pal gallerie, l'overlay qui apparait ne devrait pas conserver la hauteur totale de la gallerie (flagrant sur mobile car la gallerie est toute en longueur...)

Sur Chrome / Firefox :
En pleine taille, j'ai bien des lignes d'image de 3 colonnes.
Je redimensionne la fenêtre, il n'y a plus que des lignes d'une colonne.
Je mets en plein écran, il y a bien 3 colonnes par lignes d'image.

Sur mon portable (Nexus 4 - Chrome), idem, quand je pivote l'écran ça passe de 1 colonne d'image (portrait) à 2 colonnes (paysage).

J'ai pas un oeil d'intégrateur / graphiste donc je vois peut-être pas le soucis :mrgreen:

Par contre tu as pas mal d'erreur (ouvre la console du navigateur pour les voir)

Le problème se joue sur l'espace en bas de la gallerie entre la gallerie et le début du footer, il doit y avoir trop de vide (avec les manipulations que je t'ai indiquées) il se peut aussi qu'il y ait une double barre de scrolling qui apparaisse..

Je teste sur Firefox et Safari MAC 10.9.2

up !

Re-bonjour,

J'ai essayé ton script, mais il ne marche pas, comment procèdes tu ?

Voici le code complet:

Code:

---

1 2 3

function autoResize(iframe) { $(iframe).height($(iframe).contents().find('html').height()); }

---

Dans le head

Pour le iframe

Code:

---

<iframe src="index.html" width="100%" height="auto" frameborder="0" onload="autoResize(this);"></iframe>

---

oui c'est bien le code que j'avais essayé mais je n'arrive pas à le faire marcher lorsque le contenu de l'iframe change, comme si la fonction n'avait plus le contrôle...

ton sujet m'interesse aussi car je cherche le même résultat que toi dans un environnement un peu différent.

JE viens de chercher un peu et peut être une piste à creuser :
en créant une fonction qui surveille le redimensionnement :

Code:

---

1 2 3

function WindowSizeListener(){ window.addEventListener('resize', autoResize(iframe), false); }

---

Je n'arrive à rien de concluant...

Si tu trouve une solution intéressante , tiens moi informé ;)

Si quelqu'un à d'autres propositions je suis preneur ^^