[RÉGLÉ] iframe : contenu responsive ?

[Selim]

Bonjour à tous,


nouvellement administrateur du site web de mon établissement scolaire, je fais en sorte de le rendre responsive au maximum.

jusqu'ici tout se passe bien, beaucoup de chipotages mais je modifie les px en % pour les cadres, les images, les videos etc.


Je bloque cependant sur un iframe : au lieu d'une page particulièrement moche contenant des liens vers des pdf souvent dépassés contenant les programmes d'études (que vous pouvez encore observer dans le bas de la page...), je souhaite intégrer une iframe contenant la page du ministère directement, où les programmes sont consultables.

http://www.arv.be/index.php/documents-pedagogiques


mais comme vous le constatez, le contenu est plus large que mon iframe, puisqu'un menu s'ajoute à droite. Et sur mobile c'est encore pire, le contenu gardant la même largeur...

bien sûr, si le ministère avait adapter son site en responsive, le problème n'existerait pas il me semble, mais ce n'est pas le cas...


ma question est donc : comment adapter le contenu tout entier à la largeur de mon iframe ? j'ai pas mal cherché et je n'ai rien trouver de fonctionnel, plz help


voici le code source de ma page :

<h2 style="text-align: center;"><span style="font-size: x-large; font-family: book antiqua,palatino; color: #ffffff; text-shadow: 3px 3px 3px black;">Documents pédagogiques</span></h2>
<p>*</p>
<p style="text-align: center;">*</p>
<p style="text-align: center;"><iframe src="http://www.wallonie-bruxelles-enseignement.be/index.cfm?page=db1&amp;profil=visiteur" name="WBE - programmes" width="95%" height="730px" frameborder="2" marginwidth="5" marginheight="5" scrolling="auto" align="middle" allowfullscreen=" "></iframe></p>
<p>*</p>

PS : question subsidiaire... je bloque de la même façon avec un flipbook ; est-il possible de l'ajuster automatiquement à la résolution en ajoutant quelque chose à ce code :

<h2 style="color: #ffffff; font-family: 'Roboto', Sans-Serif; text-shadow: 2px 2px 2px black;" align="center">Premiers soins</h2>
<p>*</p>
<div align="center">{loadmodule mod_flipbook_11,Premiers soins}</div>

à voir ici : http://www.arv.be/index.php/premiers-soins

j'ai tenté un width="90%" dans le div mais sans succès...



Déjà un énorme merci de vous intéresser à mon problème !



EDIT : je l'ai tenté en wrapper, mais résultat identique, vous le verrez dans le fond de la page, avec le code
<p>*</p>
<p style="text-align: center;">{div}{module WBE-programmes}{/div}</p>
<p>*</p>

[lomart]

Re : iframe : contenu responsive ?

Bonjour,

Le plus simple, pour le flipbook.
Ajouter ce code CSS

iframe[style*="963px"] {
    width: 95% !important;
}

Je ne pense pas que ce code agisse ailleurs. Au besoin, ajouter un suffixe de classe au module et l'indiquer dans le sélecteur (ex: .flipbook iframe[style*="963px"])
note: il est aussi possible que le module prévoit son réglage en largeur!

Pour le site externe, c'est plus coton du fait que c'est son contenu qui force la largeur et ce site n'est pas responsive.
Le plus simple serait de ne pas afficher les modules de droite sur cette page. Cela résoud au moins le cas pour les écrans d'ordinateurs

[Selim]

Re : iframe : contenu responsive ?

Merci pour ta réponse.


Pour le flipbook, j'ai tenté

.flipbook iframe[style*="963px"]
{
width: 95% !important;
}

malheureusement sans effet... ce doit être configuré dans le flipbook comme tu le dis. J'ai songé à fouiller les fichiers du flip pour trouver une ligne concernant la largeur ou le caractère responsive, mais je n'ai rien trouvé. il semble que flipbuilder n'autorise pas cela.

j'ai donc cherché un autre flipbook maker responsive, mais ils sont tous payants... Alors ne me jugez pas, j'ai abandonné en trouvant une solution alternative : j'ai converti ce pdf en jpg, puis en slider (amazing slider) qui lui peut être configuré comme responsive. Résultat probant :

http://www.arv.be/index.php/premiers-soins

Ça fera l'affaire, merci beaucoup des conseils



Je continue à cherche une solution pour le site externe. actuellement je chipote avec le code

style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"

qui pourrait p-e être une solution temporaire pour afficher cette page correctement, sur pc du moins comme tu le dis.

Si tu as une autre idée je suis preneur !

[lomart]

Re : iframe : contenu responsive ?

Pour le flipbook, j'ai tenté
.flipbook iframe[style*="963px"]
{
width: 95% !important;
}
malheureusement sans effet...

Je teste mes solutions avec l'inspecteur de code avant de les proposer.
Elle fonctionnait sur ton site. Je n'avais pas mis .flipbook

Je continue à cherche une solution pour le site externe.

Le site externe n'est pas responsive. Tu n'y peux rien !
Supprime les modules à droite pour cette page, comme je l'ai suggéré. Voir photo jointe

[Selim]

Re : iframe : contenu responsive ?

Tu as raison, sans le .iframe cela fonctionne !

je vais laisser ce slider (maintenant que j'ai pris la peine de le configurer ) mais merci beaucoup pour cette solution, il existe une dizaine de flipbooks sur ce site que je n'avais pas envie de passer en slide, surtout ceux qui font une centaine de pages ...


pour le site externe ta solution est la première que j'avais envisagé, mais ça me dérange de perdre ce menu "utilisateur enregistré" à droite, que j'ai mis sur toutes les pages, et qui sur mobile se retrouve en-dessous de tous les articles, ce qui est idéal (sur mobile encore une fois).

avec le scale je devrais pouvoir parvenir à créer une frame qui aura la largeur d'un mobile renversé, et donc suffisamment lisible sur pc ; surtout si je parviens à calculer précisément la largeur en cropant les "popups" à droite qui ne servent à rien et en supprimant le scrolling horizontal ;

à ce propos, une idée pour conserver le scroll vertical via le code html ? j'ai essayé "scrolling="vertical"" au lieu de "no", mais je conserve les deux...


Merci encore pour tes conseils et soluces !

[Selim]

Re : iframe : contenu responsive ?

Je laisse tomber cette idée de scale, résultat moche et instable.
Et particulièrement inutile d'en attendre un affichage respectable sur mobile.


Donc, nouvelle idée :

simplement créer des liens qui envoient directement vers les pages concernées.

<td style="width: 100px; text-align: center; height: 16.5px;">
<p style="text-align: center;" align="center">
<a title="programmesWBE" href="http://www.wallonie-bruxelles-enseignement.be/index.cfm?page=db1&profil=visiteur" target="_blank">
<img style="float: left;" src="images/logos/*image quelconque à définir*.png" alt="" />
</a>
</p>
</td>

Rien de bien sorcier donc, mais j'ai un problème...


Je souhaiterais créer 4 liens, qui enverraient respectivement vers
-enseignement ordinaire
-enseignement secondaire / 1er degré
-enseignement secondaire / 2e degré
-enseignement secondaire / 3e degré


Le problème, c'est que quels que soient les filtres que j'applique sur la page externe, le résultat est une url identique ; autrement dit mes 4 liens mèneraient tous vers la page générale.

Est-il possible, dans les liens que je placerais sur ma page, d'y intégrer ces fameux filtres "externes", afin que le résultat obtenu en cliquant dessus soit un lien qui propose immédiatement les documents concernés, comme si la personne avait appliqué ces filtres sur la page externe ?


PS : je me rends bien compte que je m'exprime de façon quelque peu anarchique, merci de prendre le temps de me comprendre

[lomart]

Re : iframe : contenu responsive ?

Le problème, c'est que quels que soient les filtres que j'applique sur la page externe, le résultat est une url identique ; autrement dit mes 4 liens mèneraient tous vers la page générale.

C'est normal, c'est de l'ajax

Je t'ai donné MA solution depuis le début. Si c'est le module connexion qui te gène change le de place. Regarde vers
SCLogin

[Selim]

Re : iframe : contenu responsive ?

Finalement je me prends la tête pour pas grand chose :
j'adopte ta solution qui est la plus simple et stable, d'autant que ce n'est pas le genre de documents que l'on cherche à consulter sur mobile, et en retirant les modules de droite le scrolling horizontal disparait comme je le souhaitais, et le vertical n'apparait pas immédiatement, ce qui donne un bel effet d'intégration de la page :

http://www.arv.be/index.php/documents-pedagogiques


Merci pour ton aide (une fois de plus)