diedVIPs

html knowhow

Größe des Iframes verändern









Größe des Iframes verändern

So sieht´s aus




Quellcode
<html>
<head>
<script> document.getElementsByTagName("html")[0].className = "js"; </script>

<style type="text/css">
.iframe {border: 1px solid black; overflow: auto; background: #fff; resize: both;}
.iframe iframe {width: 99%; height: 400px; border: 0; display: block;}
.iframe-header {display: none;}
.js .iframe-header {display: block;}
.iframe-content {width: 99%; overflow: auto; -webkit-overflow-scrolling: touch;}
.iframe-header a {font-size: 25px; color: white; background: black; display: block; padding: 15px; text-align: center; border-bottom: 3px solid #131c28; border-radius: 15px;}
.iframe-header a:hover, .iframe-header a:focus {background: black;}
.iframe-full-screen .iframe-header {display: block; position: absolute; height: 50px; width: 100%;}
.iframe-full-screen .iframe-content {position: absolute; top: 50px; bottom: 0; width: 100%; height: auto;}
.iframe-full-screen .iframe-header a {padding: 2; height: 64px; line-height: 64px; text-align: center; border: 3px solid black;}
.iframe-full-screen body {width: 100%; height: 100%;}
.iframe-full-screen .iframe.iframe-active {width: 100%; height: 100%; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 9999; border: none;}
.iframe-full-screen .iframe iframe {position: absolute; height: 100%; width: 100%; border: none;}
.wrapper {max-width: 50%; display: flex; flex-wrap: wrap;}
.item {display: inline-block; flex: 1 320px;}
@media all and (max-height: 400px) { .iframe { height: 300px; } }
</style>
</head>

<body >
<div class="wrapper"><div class="item"><div class="iframe"><iframe src="http://meinsolargarten.de/index.php" target="_self"></iframe></div></div></div>
<script>
$(document).ready(function () {
$(".iframe").responsiveIframes({
openMessage: "Full screen",
closeMessage: "Close full screen"
});
});
(function ($) {
$.responsiveIframes = function (el, options) {
var self = this;
self.$el = $(el);
self.el = el;
self.$el.data("responsiveIframes", self);
self.init = function () {
self.options = $.extend(
{},
$.responsiveIframes.defaultOptions,
options
);
var iframeSrc = self.$el
.find("iframe")
.wrap('<div class="iframe-content" />')
.attr("src");
var header =
'<div class="iframe-header">' +
'<a href="' +
iframeSrc +
'" class="iframe-trigger">' +
self.options.openMessage +
"</a>" +
"</div>";
var trigger = self.$el.prepend(header).find(".iframe-trigger");
$(trigger).click(function (e) {
e.preventDefault();
var $this = $(this),
$html = $("html"),
isFullScreen = $html.hasClass("iframe-full-screen"),
message = isFullScreen
? self.options.openMessage
: self.options.closeMessage;
$this.text(message);
if (isFullScreen) {
self.$el.removeClass("iframe-active");
$html.removeClass("iframe-full-screen");
setTimeout(function () {
$(window).scrollTop(
$this.data("iframe-scroll-position")
);
}, 1);
} else {
$this.data("iframe-scroll-position", $(window).scrollTop());
self.$el.addClass("iframe-active");
$html.addClass("iframe-full-screen");
}
});
};
self.init();
};
$.responsiveIframes.defaultOptions = {
openMessage: "Full screen",
closeMessage: "Close"
};
$.fn.responsiveIframes = function (options) {
return this.each(function () {
new $.responsiveIframes(this, options);
});
};
})(jQuery);
</script>

</body>

</html>








Kontakt    Datenschutz    Impressum