I used this code to change the iframe size. But when printing, some of it is cut from the bottom and it does not print. Please help me. thank you.
this script:
<script>
function resizeIframe(obj) {
obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight)*1.01 + 'px';
}
function printIframe(iframe) {
const tempWindow = window.open('', 'Print', 'height=800,width=800')
const newIframe = document.createElement('iframe')
newIframe.src = iframe.src
newIframe.style = 'overflow:hidden; border: 0; width: 1500 ; height:100%;'
tempWindow.document.body.style = 'margin: 0;'
tempWindow.document.body.appendChild(newIframe)
newIframe.onload = () => {
tempWindow.print()
tempWindow.close()
}
}
</script>
this load iframe:
<iframe id="masraf" name="iframe" src="m_index_montazh.php" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)" >
</iframe>
this is print iframe:
<button onclick="printIframe(document.getElementById('masraf'));" >
report
</button>
Related
I'm trying to make a slideshow on my webpage that will iterate through a list of html projects and showcase them using an iframe. I'm stuck on how to make the loop that will change the src each time and open the new project.
This is the code I've been able to come up with:
<div class="buttns">
<button id="previous" type="button"><</button>
<div>
<iframe
style="
width: 480px;
height: 270px;
position: relative;
left: 0px;
top: 0px;
overflow: hidden;
"
frameborder="0"
type="text/html"
src=""
width="100%"
height="100%"
allowfullscreen
>
</iframe>
</div>
<button id="next" type="button">></button>
</div>
<script type="text/javascript">
$("#next").click(function () {
$("#p_elem").attr("src", function (data) {
var webpages = [
"../Wolfie873.github.io/Test Projects/DissapearingCircles.html",
"../Wolfie873.github.io/Test Projects/GuessTheNumber.html",
"../Wolfie873.github.io/Test Projects/TestReaction.html",
];
for (var i = 0; i < webpages.length; i++) {
return webpages[i];
}
});
});
</script>
If someone can point me in the right direction, I would greatly appreciate it as I am new to coding.
I'm not a HTML coder and have been asked to help on an issue.
I thought it would take 5 seconds but I have a bug.
Its simply an html page with 2 tabs each with a Jotform iFrame embedded.
When switching to the second tab(not default) , it doesnt load.
I've swapped the default marker between tabs and it does the same.
The debugger only shows the following violation but it is not an error:
[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.
Code snippet
<html>
<body>
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'ITSupport')" ><B>IT Support</B></button>
<button class="tablinks" onclick="openTab(event, 'ProjectRequest')" ><B>Project Request</b></button>
</div>
<div id="ITSupport" class="tabcontent">
<iframe
id="JotFormIFrame-yyyyyyyyy"
title="Service Desk"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
src="https://form.myjotform.com/yyyyyy"
frameborder="0"
style="
min-width: 100%;
height: 100%;
border:none;"
scrolling="no"
>
</iframe>
</div>
<div id="ProjectRequest" class="tabcontent">
<iframe
id="JotFormIFrame-xxxx"
title="Project Request Form"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
src="https://form.jotform.com/xxxxxxx"
frameborder="0"
style="
min-width: 100%;
height: 100%;
border:none;"
scrolling="no"
>
</iframe>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
var allIds = document.querySelectorAll('#' + tabName);
allIds[allIds.length - 1].style.display = "block";
evt.currentTarget.className += " active";
}
document.querySelector('.tablinks.active').click();
</script>
</body>
</html>
I have a popup which contains the facebook iframe and its seems like the inline stylesheet method in not work
<div data-html="allow" >
<iframe style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
I am trying to increase the width and height of the iframe but its not work.any clue?
Any help is appreciated.
thanks,
I'd use JS for this, like so:
<div data-html="allow" >
<iframe id="iframe1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<script type="application/javascript">
function resizeIframe {
iframe.width = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iframe = document.getElementById( 'iframe1' );
resizeIframe;
} );
</script>
I want to make it so that if the user presses for example 'x', my iframe window with a chat opens. If they press x again, it closes.
Current code:
<div id="mydiv">
<iframe name ="frame" src="" width="25%" height="300"></iframe>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 192) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","http://deadsimplechat.com/+f8ckA/");
}
else {
$("#frame").attr("src","");
}
}
});
});</script>
function checkKey(e) {
e = e || window.event;
if(e.keyCode == 88) { // x pressed
if(myWindow) {
myWindow.close();
myWindow = undefined;
} else {
myWindow = window.open("", "", "width=200,height=100");
}
}
}
var myWindow;
document.onkeydown = checkKey;
Use something like this.
$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 49) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","https://www.example.com/");
}
else {
$("#frame").attr("src","");
}
}
});
});
You can edit the keycode by finding the proper keycode.
I assume you will have some iframe like this in your code or you can create iframe from jquery. You can also remove the ifram from jquery. Also edit the example source URL to your appropriate site.
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
You have to include the library whenever working with jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
EDIT
This must be working.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 49) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","https://www.w3schools.com/");
}
else {
$("#frame").attr("src","");
}
}
});
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<input type="text">
</body>
</html>
I have a HTML5 video which works fines,the problem that I have is that it doesn't have a close button.How can I include the close button in the video player?
Here is my code:
<div style="text-align:center">
<video id="playvideo" width="450" controls>
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
</video>
</div>
http://jsfiddle.net/76j7129f/3/
SOLUTION
HTML
<div style="text-align:center">
<video id="playvideo" width="450" controls="controls" >
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
</video>
<button class="close">Hide</button>
</div>
CSS
video + button.close {
font-size: 10px;
display: block;
}
video.hide {
display: none;
}
JS
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
var buttons = document.querySelectorAll('video + button.close');
for(var b = 0; b < buttons.length; b++){
var button = buttons[b];
button.addEventListener('click', function(){
var video = this.parentNode.childNodes[1];
video.muted = !video.muted;
video.classList.toggle (hideClass);
if(this.textContent == hideStr) this.textContent = showStr;
else this.textContent = hideStr;
});
}
UPDATE
JQUERY SOLUTION
HTML
<script src="//code.jquery.com/jquery-git1.js"></script>
JQUERY
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
$('video + button.close').click(function(){
var button = $(this);
var video = button.parent().find('video');
video.prop('muted', !video.prop('muted'));
video.toggleClass(hideClass);
if(button.text() == hideStr) button.text(showStr);
else button.text(hideStr);
});