We Keep Coding

Add video to page on Button click

I am a beginner JS user, and I am trying to get a video to play on fullscreen and replace an invisible div further down on the page. I started with a guide from Chris Ferdinandi.
In his guide, the video replaces the image that is clicked. I would like to have the div later down on the page to be replaced on the click.
Any guidance would be great!
HTML
<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
Javascript (modified from this guide)
<script>
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
//Set invisible Div (new code added by me)
var videonew = '#video-replace');
// Check if clicked element is a video link
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;
// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];
// Replace the image with the video
event.target.parentNode.replaceChild(video, videonew);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
</script>

There are problems in your code.
var videonew = '#video-replace'); there's an orphan ), since you are using this in the `replaceChild``method I assume you want the variable to reference to an element.
So change it to
var videonew = document.querySelector('#video-replace');
Pro tip: Using the Developer console during development can help you figure out such errors in your code.

Print button printing multiple pages

I am trying to have a print button that will print multiple pdfs or files when clicked.
Is it possible to have a print all button:
<button class="btn-u btn-u-orange" name="printall" id="printall" ><i class="icon-printer"></i> Print All</button>
But then somehow have it print all the pdfs or pages when clicked. I have been trying to do it with javascript but unfortunately am failing miserably.
function PrintAll() {
var pages = ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];
for (var i = 0; i < pages.length; i++) {
var oWindow = window.open(pages[i], "print");
oWindow.print();
oWindow.close();
}
}
$("#printall").on("click",function(){
PrintAll();
});
When I select print it is only popping up the first pdf to print and nothing else. Any help with this would be greatly appreciated.
Added coldfusion tag because I am calling .cfms that are populating the pdfs.
What Iv Tried is to create Iframes:
<iframe src="forms/82040PDFCreator.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/poa.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/Billofsalevehicle.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/IRF.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/InsuranceAffidavit.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/FeesBreakdown.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
They wont all show though. They all work but wont all show a few error out once theres more than three iframes. I have been trying to set an interval to load them hoping they wont timeout but have been unsuccessful. If I can get them all to appear I was going to try to make the button somehow cycle through the iframes and print them. Everytime I hit refresh some iframes work some dont, constantly changing which ones do and which ones dont.
Trying to set a timeout or interval or something to get them all to appear:
$("#printall").on("click",function(){
var iframes = document.getElementsByTagName("iframe");
var i = 0;
window.setInterval(function(){
if(i < iframes.length){
i++;
}
}, 3000);
});

This works for me in Chrome 64:
function PrintAll() {
var pages = ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];
var printNext = function(i) {
i = i || 0;
if (i >= pages.length) {
return;
}
var wdw = window.open(pages[i], 'print');
wdw.onload = function() {
wdw.print();
wdw.close();
setTimeout(function() {
printNext(++i);
}, 100);
}
};
printNext();
}
The call to setTimeout is just to ensure that the window closes before printing the next one. Without it, I was getting some odd behavior.

As an option, I would recommend you to use iframe.
Inside the iframe, you keep appending the content and print them one-by-one. Below is the function, that you can call inside your loop for each page. Append the content from your page, inside this iframe and keep printing them. At the end, we are removing the iframe using setTimeout. You can increase/decrease the time to adjust to your needs and speed:
function PrintAll() {
var pages = ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];
for (var i = 0; i < pages.length; i++) {
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
})
.appendTo('body');
$('.printFrame').load(pages[i], function(response, status, xhr) {
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
//above two lines can be merged as:
//window.frames['myiframe'].focus().print();
setTimeout(() => {
$(".printFrame").remove();
}, 1000);
});
}
}

Targeting HTML ID's and using jQuery to modify the content

I have this photo switcher below that I want to modify the HTML content using jQuery only. If you click on the "Show Next Photo" link jQuery will replace the "fruits.png" with another image example "airplane.png". (note: No changes to the HTML block is allowed).
I'm not sure how complicated it can be for jQuery. If I could avoid JavaScript, would be perfect.
<!--Do Not Change Inside this DIV-->
<div id="imageSwitcher">
<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" id="fruits" />
<img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png" id="tulips" style="display:none;" />
<p>Show Next Photo</p>
</div>
Problem:
This is my script below and isn't working properly because when I refresh the page it just shows the airplane.png, and if I click on the link "Show Next Photo" it makes the airplane disapear.
Please give it a try at https://codepen.io/mrborges/pen/QQjJOq
<script>
//Go away fruits.png
document.getElementById('fruits').style.cssText = "display:none;";
$(document).ready(function () {
$('p').click(function () {
$('#imageSwitcher img').attr("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
//$('#fruits').toggle("hide");
$('#tulips').toggle("slow");
})
});
</script>

<script>
$(document).ready(function () {
let count = localStorage.getItem('count') || 0; // "0, 1, 2" or 0
count = parseInt(count, 10); //If we get it from storage then convert to number
const images = [
"https://homepages.cae.wisc.edu/~ece533/images/fruits.png",
"https://homepages.cae.wisc.edu/~ece533/images/tulips.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
];
$('#fruits').attr("src", images[count]);
$('p').click(function () {
count = (count + 1) % images.length;
$('#fruits').attr("src", images[count]);
localStorage.setItem('count', count);
});
});
</script>
The const images is a list (array) of links to the switch between. I added all the possible images and then i just change the src for each image. a pure jQuery solution would be very ugly, so you have to accept some vanilla JavaScript.
this line count = (count + 1) % images.length counts 1 up each time you click on the <p> if we reach the end of the images, then it just resets to 0. e.g. (2 + 1) % 3 = 0

trouble with an iframe

I have been searching all over the internet, went through stackover flow like crazy and solved half my problem, i am trying to size an iframe when you click a link to load the full size of a page, i have gotten it to work in IE but in FF nothing happens it just stay the same height,
Code that work for IE
function calcHeight() {
var the_height = 0;
//find the height of the internal page
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
the_height = document.getElementById('class').contentDocument.body.offsetHeight + 140;
}
else {
the_height = document.getElementById('class').contentWindow.document.body.scrollHeight + 18;
}
document.getElementById('class').height = the_height + "px";
}
Iframe code
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto" scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe></td>
Any help would be greatly appreciated i cannot figure this one out!
This is a link to the test page you are suppose to be able to click on 'Ohio Conceal Handgun License (CHL)' and have the code show next to it and have the IFRAME expand down like it does in IE.
Thanks!
http://www.dualactiontactics.com/Update/7/Training.html

You are using id` instead of id in your iframe, first change this
<iframe src="iframback.html" name="class" id`="class" width="100%" height="auto"
scrolling="no" frameborder="0" onload="calcHeight();" allowtransparency='true'></iframe>
id`="class" to id="class"
and in js change statement
document.getElementById('class').height = the_height + "px";
to
document.getElementById('class').height = the_height;
or
document.getElementById('class').style.height= the_height + "px";

using jquery to insert javascript (for Quicktime) into a <div>

I'm pretty new to javascript and programming and have run into a brick wall with my project. I have a div which contains the javascript to embed a quicktime player, when the page is first loaded no .mov file is pointed at by the page so a placeholder div is 'unhidden' and the player div is set to style.display = 'none'.
So far so good, the user then enters the name of the new movie, the placeholder div is hidden and the player div is unhidden. My problem is that the javascript in the player div didn't run when the div was made visible, if I make the script for the player into a seperate function then call it when the player div is unhidden then the player runs full screen and not in the div.
I've tried using jquery to add the javascript into the div after the div is made visible but can't seem to get $("#player").load(somescript) or $("#player").html(htmlwithjavain) to add the script.
I know the player div contenst can be changed as I can use $("#player").empty(); and $("#player").html(); to manipulate it.
Thanks for reading, hope you can help
Here's the relevant code:-
<html>
<head>
<title>Browse Media Player</title>
<link rel="stylesheet" type="text/css" href="CSS/browser.css" />
<script type="text/javascript">
<!--
var userinterrupt=false;
var runonce=false;
var currentfile;
var basemediapath = "http://10.255.10.71/IsilonBrowse/movfiles/";
var playerheight = 750;
var playerwidth = 900;
var currenttc;
var basetime;
var baseduration;
var currentduration = "no tc available";
var tcoffset = 35990;
var playspeed = 1;
var boolisplaying=true;
var boolonslide=false;
//function to fire off other methods when the DOM is loaded
//Use in place of body onload, using jquery library
//
$(document).ready(function()
{
//showEvents('jquery running');
showhideplayer(null);
});
//-->
</script>
</head>
<body onload="forceslider(); timecode()">
<div class="container">
<div id="timecode_container">
<div class="tc_overlay"></div>
<div id="timecode" class="timecode"></div>
</div>
<div id="player" class="playerdiv" style="display:none;">
**javascript for player goes here...**
</div>
<div id="noclipoverlay" class="playerdiv" style="display:none;">
<p>No media loaded...
</div>
<div id="noclipoverlay2" class="playerdiv" style="display:none;">
<p>loading media....
</div>
</div>
<div id="loadstatus"></div>
<div id="alerts"></div>
</body>
</html>
Now the mainstuff.js file which should add the javascript code:-
//function to switch the player div and mask div is no media file is
//defined in the 'currentfile' variable
//
function showhideplayer(state)
{
if (!currentfile)
{
showEvents('wtf no media');
document.getElementById("player").style.display = 'none';
document.getElementById("noclipoverlay").style.display = 'block';
}
else if (currentfile)
{
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
showEvents('valid media file');
}
}
//end of showhideplayer
//function to change movie files, note SetResetPropertiesOnReload must be set to false
//otherwise the B'stard player will default all attributes when setURL runs
//
function changemovie(newmovie)
{
oldfile = currentfile;
if (newmovie == currentfile)
{
showEvents('same file requested so no action taken');
return;
}
if (newmovie != currentfile)
{
showEvents('changing movie');
//switch the divs around to hide the 'no media slide'
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
}
showEvents('movie changed to: '+newmovie);
currentfile=newmovie;
if (!oldfile)
{
$("#player").empty();
showEvents('the old media file was blank');
$("#player").load("/path/loadplayer.js");
}
document.movie1.Stop();
document.movie1.SetResetPropertiesOnReload(false);
document.movie1.SetURL(currentfile);
//showEvents('movie changed to: '+newmovie);
if (boolisplaying)
{
document.movie1.Play();
}
}
[EDIT] and here's the contents of loadplayer.js:-
var movie1 = QT_WriteOBJECT(
currentfile, playerwidth, playerheight, "",
"controller","false",
"obj#id", "movie1",
"emb#id","qt_movie1",
"postdomevents","True",
"emb#NAME","movie1",
"enablejavascript","true",
"autoplay","true",
"scale","aspect",
"pluginspage","http://www.apple.com/quicktime/download/"
);

Without knowing the content of your loadplayer.js file, it will be difficult to give you a solution.
For example, if the script attempts to do a document.write() after the page has loaded, it will create a new page, overwriting the current page. Is that what you mean when you say the quicktime movie is running full screen?
Also it is generally not a good idea to load a SCRIPT element and insert it as HTML. When you add HTML to the page, jQuery finds all the SCRIPT elements and evaluates them in a global context, which might give you unexpected results.

Use QT_GenerateOBJECTText_XHTML or QT_GenerateOBJECTText from AC_QuickTime.js if you'd like to return a string.