diedVIPs

html knowhow

Iframe-Loader











Iframe-Loader

Hier können Sie die Größe des Iframes für verschiedene Browser anpassen. Dazu dient der Code unten
So sieht´s aus


HTML Knowhow
Quellcode
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style type="text/css">
.iframe {width: 100%; height: 100%; padding: 0px; border: 0px;}
.panel-body {padding: 12px; width: inherit; height: inherit; overflow: hidden;}
.resizable {overflow: hidden; resize: both}
.draggable {position: absolute; z-index: 100}
.draggable-handler {cursor: pointer}
.dragging {cursor: move; z-index: 200 !important}
</style>
</head>

<body >
<div id="panel1" class="panel panel-primary resizable draggable">
<div class="panel-heading draggable-handler">HTML Knowhow</div>
<div class="panel-body"><iframe src="../Index.php" class="iframe" id="fix_frame" scrolling="yes" allowtransparency= "true" target="_parent"></iframe>
</div>
<script>
$('.draggable-handler').mousedown(function(e){
drag = $(this).closest('.draggable')
drag.addClass('dragging')
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
$(this).on('mousemove', function(e){
drag.css('left', e.clientX-$(this).width()/2)
drag.css('top', e.clientY-$(this).height()/2 - 10)
window.getSelection().removeAllRanges()
})
})
$('.draggable-handler').mouseleave(stopDragging)
$('.draggable-handler').mouseup(stopDragging)
function stopDragging(){
drag = $(this).closest('.draggable')
drag.removeClass('dragging')
$(this).off('mousemove')
}
$(document).on('click', 'a#check-iframe-content-url', function(){
alert($("#iframe-source").contents().find('.primary'));
});
</script>
</body>

</html>







Kontakt  Datenschutz    Impressum