Scrolling iFrame

landhaus

Guten Abend,
es stellt sich mir ein neues Problem. Ich nutzte das Layout „Travel responsive“. Für z.B. meinen Belegungsplan nutze ich ein iFrame. Bei der normalen Ausgabe auf z.B. einen Laptop sieht auch alles soweit gut aus. Wird es mobile ausgegeben, passt sich zwar das iFrame, nicht aber der Inhalt an. Das führt dazu, dass nur knapp über die Hälfte des Inhaltes angezeigt werden. Mein Ansatz war, es scrollbar zu machen, wenn der Bildschirm zu klein wird. Leider ignoriert Zeta dies, obwohl es im Quelltext Scrolling zulässt.

http://www.landhaus-am-teich.de/belegung.html

Jochen

Hallo,

schau dir mal folgendes vom Mario dazu an: http://zella.de/code/iframe-responsive.html
Evtl. bekommst du damit ein für dich passendes Ergebnis hin.
Kannst es ja mal so versuchen.

Wobei es aber auch durchaus sein kann, das dies nicht richtig gehen wird, wenn der externe Inhalt keine Reponsive Darstellung unterstützt.
Und das ist (so wie ich es eben gesehen habe) wohl der Fall bei dem Inhalt.

Aber einen Versuch, wäre es ja wert

Mario

Ich habe das mal getestet, sollte funktionieren. Beispiel

Ich hatte das gleiche Problem und habe das mit der Lightbox kombiniert. Hier ganz nach unten scrollen Verfügbarkeit prüfen

Das sollte auch bei dir funktionieren. Beispiel

Die Lightbox wird dann in der vorgegebenen Größe geöffnet und in der mobilen Ansicht kann man dann das Fenster wie bei einer statischen Seite hin und her schieben.

Der Code würde dann so aussehen. Du kannst natürlich auch eine feste Größe für die Höhe vergeben.
Neuer Artikel > Widget > Mehr > Quelltext

Code

<a class="i--frame" href="https://zimmer.im-web.de/belegungskalender.php?id=6556&f=12241&objekt_id=15464&bg2%5Banzahl_monate%5D=4"><p>Belegungsplan öffnen</p></a>




<script>
$(document).ready(function() {
$("a.i--frame").fancybox({
'type' : 'iframe',
'width' : 830,
'height' : '98%',
'titleShow': false,
'hideOnContentClick': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'overlayShow' : true,
'overlayColor' : '#000',
'overlayOpacity' : 0.80,
'autoScale' : false,
'centerOnScroll' : true,
'autoDimensions' : false
});
});
</script>

Alles anzeigen

landhaus

Danke Mario,

er die Lightbox muss ich nachdenken.

Ich finde Deine "Buchungsbutton" gut. Wenn der Bildschirm zu klein wird, wird es schön untereinander angezeigt.
http://www.zella.de/buchung-hotel.html?page-id=485

Nun ja, es ist manchmal nicht so einfach, seine Vorstellung umzusetzen.

Vielen Dank und Gruß

Christian

landhaus

Kurze Rückmeldung, Mario.

Da mir nichts besseres einfallen ist, habe ich DeinenLightbox-Vorschlag aufgenommen, und minimal angepasst:
http://landhaus-am-teich.de/belegung.html

Vielen Dank nochmal !

Scrolling iFrame

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?