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>
Related
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>
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 have a page layout that looks like this....basically a page title, a set of thumbnails down the left arranged in two columns, and a third column which contains the big version of the thumbnail.
My issue is that I have quite a gap between the top of the big image and the top of the page (because the page title is a simple paragraph marker). I can fix this by bringing the title into the top of the first column, but then I end up with this.
What I want is this. I could add a small piece of text in to the right of the title, but my background colour is not uniform and so it will stand out. Plus, it's not a very elegant solution. I could do it with tables and span the title across two cells, but I don't want to use tables.
Any and all great ideas appreciated. Thanks.
EDIT - added code snippets - this is what I currently have, and equates to the first picture I posted.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
slides[slideIndex-1].classList.add("stickyimage");
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
.bgimg {
background-image:url('Images/Draw/inkcircle_10pc_opacity.jpg')
}
.image7column {
float: left;
width: 14.28%;
padding-right: 5px;
}
.bigcolumn {
display: block;
float: left;
width: 71%;
height: 1400px;
}
.mySlides {
display: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="Image_handler.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="smallcss.css">
<title>Images</title>
</head>
<body class="bgimg" onload="showSlides(1)";>
<p> Images </p>
<div class="image7column">
<img src="Images/Draw/im1.jpg" style="width:100%;height:180px" alt="Image1">
<img src="Images/Draw/im2.jpg" style="width:100%;height:180px" alt="Image2">
</div>
<div class="image7column">
<img src="Images/Draw/im3.jpg" style="width:100%;height:180px" alt="Image3">
<img src="Images/Draw/im4.jpg" style="width:100%;height:180px" alt="Image4">
</div>
<!-- Big column stuff in here -->
<div class="bigcolumn">
<div class="mySlides">
<img src="Images/Draw/im1.jpg" style="width:300px;height:300px" alt="big image 1">
</div>
<div class="mySlides">
<img src="Images/Draw/im2.jpg" style="width:300px;height:300px" alt="big image 2">
</div>
<div class="mySlides">
<img src="Images/Draw/im3.jpg" style="width:300px;height:300px" alt="big image 3">
</div>
<div class="mySlides">
<img src="Images/Draw/im4.jpg" style="width:300px;height:300px" alt="big image 4">
</div>
</div> <!-- End of bigcolumn -->
</body>
</html>
If you want some help can you provide your html and CSS. I can take a look, but I will not do all your code.
But If i understand your issue you should do a thing like this :
For your issue you should create 1 main column that contains the 2 other columns and have a thing like this.
<div id ="main-column">
<h1>Title</h1>
<div id="column-container">
<div id="column1">
Column 1
</div>
<div id="column2">
Column 2
</div>
</div>
</div>
With the H1 taking all the width of the main-column, and for the column-container you can use flex, or for the 2 colums use the css property width : 50%, if your main-column width is defined
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 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);
});