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);
});
}
}
Related
EDIT:I have decided to make a manual refresh button rather than have it auto refresh
I am trying to create a live chat system using google sheets and google forms, I thought I would add a way to change the refresh rate, so I added a button to change the amount of time in seconds between refreshes, but what I enter in the prompt doesn't seem to change the refresh rate. Any help is greatly appreciated!!! (also note that "urlforgooglesheets" or "urlforgoogleform" are not the actual URLs I have entered, I just put them like that for the code shown below)
window.onload = function refresh() {
var sheet = document.getElementById("formSheet");
var refreshRate = document.getElementById("refreshButton");
refreshRate.addEventListener("click", function() {
var waitPrompt = prompt("After how many seconds should chat refresh?");
});
setInterval(function() {
var waitTime = waitPrompt * 1000;
sheet.src = "#";
setTimeout(function() {
sheet.outerHTML = '<iframe id="formSheet" src="urlforthegooglesheets" height="550" width="453" frameborder="0"></iframe>';
}, 10);
}, waitTime);
}
<button id="refreshButton">Change Refresh Rate</button>
<iframe src="urlforgoogleform" width="525" height="580" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe id="formSheet" src="urlforthegooglesheet" height="580" width="453" frameborder="0"></iframe>
Reading the error code, you can see that on line 13 of your JS codeblock, waitTime is not defined. This is because you define waitTime inside of the setInterval callback. You will also want to store the number returned by setInterval() as a global variable so that you can change the waitTime, and to change that you need to clearInterval() to prevent multiple intervals going on at once. I'm also going to put the default waiting as a variable at the top, you should remove this and put whatever you want as the default.
var waitInterval;
var defaultWait = 1;
window.onload = function refresh() {
var sheet = document.getElementById("formSheet");
var refreshRate = document.getElementById("refreshButton");
refreshRate.addEventListener("click", function() {
var waitPrompt = prompt("After how many seconds should chat refresh?");
clearInterval(waitInterval);
var waitTime = waitPrompt * 1000;
waitInterval = setInterval(function() {
sheet.src = "#";
setTimeout(function() {
sheet.outerHTML = '<iframe id="formSheet" src="urlforthegooglesheets" height="550" width="453" frameborder="0"></iframe>';
}, 10);
}, waitTime);
});
var waitTime = defaultWait * 1000;
waitInterval = setInterval(function() {
sheet.src = "#";
setTimeout(function() {
sheet.outerHTML = '<iframe id="formSheet" src="urlforthegooglesheets" height="550" width="453" frameborder="0"></iframe>';
}, 10);
}, waitTime);
}
This code doesn't show errors, but I can't test this with Google Sheets to know if it works. Another thing to do is move the waitInterval = setInterval(...) into its own seperate function, but that's not necessary.
I'm a beginner in Javascript and i'm trying to get an element from an embed tag. This embed tag contains a pdf.
I want to get the button "next page" from the pdf viewer, and simulate a click on it, in order to automaticly scroll to the next page of the pdf.
My HTML code is something like this (really simplified) :
<html>
<body>
<div id="display-zone">
<embed id="myPdf" src="./myPdf.pdf">
#document
<html>
<body>
<!-- The button I want to get in my JavaScript -->
<button id="next" class="toolbarButton pageDown"></button>
</body>
</html>
</embed>
</div>
</body>
</html>
My JS code to print the pdf viewer on the web page :
affichage.innerHTML = "<embed class=\"media\" id=\""+ongletsMedias[i].firstChild.data+"\" src= \""+ongletsMedias[i].firstChild.data+"\" width= \"1000\" height= \"800\">";
// ongletsMedias[i].firstChild.data equals to "myPdf"
t = 5000; // time before starting pdfDefile()
setTimeout(pdfDefile,t,ongletsMedias[i].firstChild.data,i,1); //call the function to scroll pdf pages
And finally my function pdfDefile() that I'm calling in order to scroll the pdf pages :
function pdfDefile(dir,i,page) {
var xhttp = new XMLHttpRequest();
var t = 0;
xhttp.onreadystatechange = function() {
var checkbox = document.getElementById('checkbox');
if (this.readyState == 4 && this.status == 200 && checkbox.checked) {
document.getElementById("span").innerHTML = this.responseText; // display the number of pages of my pdf
var t = 5000;
if (page < parseInt(this.responseText)) { //test for recursive call
/*HERE is where I want to get the "next" button */
setTimeout(pdfDefile,t,dir,i,page+1);// recall this function while there is a next page to display
} else {
setTimeout(jouerMedia,t,i+1);// call the main fuction, no problem here
}
}
};
xhttp.open("GET", "nbPagesPDF.php?pages="+dir, true);
xhttp.send();
}
I already look at an existing topic (Get element in embed tag), but I can't make it work in my JS.
So please, can you help me to make my code great again (may it have been ;-) ) ?
Regards
Try
var embed = document.getElementById('myPdf');
// Wait for document to load inside embed element
embed.on('load', function() {
embed.getElementById('next').click();
});
(I am using jQuery in this example for adding the event listener, not sure if you are using it on your project?)
Without jQuery you could do:
var embed = document.getElementById('myPdf');
embed.onload = function() {
embed.getElementById('next').click();
};
It might be possible you can not trigger a click event on that button since a user action often must have taken place to trigger click's from js.
I am looking for a code which does a simple task. below is the task
let's say my site is http://www.url.com
I want when my user go to this site they see a box on top of the page which shows my site name and also my contact details and also a countdown timer.
below this line I want to show the exact same website of few different URL and I want to set a timer as well so that these few websites rotate and that timer on top shows how long it is until the next refresh and next website. I want only this part of the webpage to refresh and I want the top line to be still.
http://i58.tinypic.com/s6t84h.jpg
you can see what I want in the image above.
I was told that it can be done using iframe but I don't know how to do it and I also don't want scroll
I appreciate if you could help me
I found this solution and it seems to be working. I just need the countdown timer and also I want to crop out let's say 200px of top of each website and like shift it up because one page doesn't show all the content I want unless using scrolling and I don't want that.
<!DOCTYPE html>
<html>
<body>
<div align="center" style="border:4px solid red ">
<div style="color:#0000FF">
<h3>some content<color:#0000FF/h3>
<h3>some more content<color:#0000FF/h3>
</div>
</div>
<iframe id="rotator" src="http://www.zcast.ir" width="100%" height="600" scrolling="no" border="0" ></iframe>
<script>
// start when the page is loaded
window.onload = function() {
var urls = [
"http://www.zcast.ir",
"http://www.tgju.org",
"http://www.on3.ir",
"http://www.goldinfo.ir",
"http://www.zarban.ir",
];
var index = 1;
var el = document.getElementById("rotator");
setTimeout(function rotate() {
if ( index === urls.length ) {
index = 0;
}
el.src = urls[index];
index = index + 1;
// continue rotating iframes
setTimeout(rotate, 5000);
}, 5000); // 5000ms = 5s
};
</script>
</body>
</html>
Yes absolutely you can do that using iframe
1) set iFrame scrolling attribute to no:
<iframe src="/default.asp" width="200" height="200" scrolling="no">
</iframe>
read more: iFrame attr (w3Schools)
2) setTimeout for the timer: - see more
3) Reload the iframe from parent window - see more
You can use style position:fixed; and top:0; to place the div on top of your page:
<div style="position:fixed;top:0;"> some content here </div>
so thats it! :)
You can use iframe but, be sure that target website may disallow iframe embed. You can use following code;
var websites = new Array(
"http://www.hurriyet.com",
"http://www.milliyet.com",
"http://www.amazon.com"
);
var counter = 0;
var sTimeOut = setInterval(function () {
var index = counter%(websites.length);
$("#website_div").html($('<iframe src="' + websites[index] + '" width="500" height="500" border="0" scrolling="no"/>' ));
counter++;
}, 5000);
Put your websites in list, and it will rotated.
Here is a working demo: Demo
Using the following HTML and JavaScript, I've been trying to trigger fullscreen video on the iPad. This works if there is only one video, but because there are numerous videos on the same page, only the first one works. I don't know how to separate out the videos so that they will all work properly. I've tried changing the IDs, and still, it doesn't work. Any advice would be greatly appreciated!
HTML:
<video id="test1" width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example.png">
<source src="http://video.example.com/example.mp4" type="video/mp4">
</video>
<button id="test2">Play Video</button>
JavaScript:
<script type="text/javascript">
var video = document.getElementById('test1'),
play = document.getElementById('test2'),
time;
video.addEventListener('webkitbeginfullscreen', function() {
play.innerText = 'Play Video';
window.clearInterval(time);
});
video.addEventListener('webkitendfullscreen', function() {
video.pause();
});
play.addEventListener('touchstart', function() {
time = window.setInterval(function() {
try {
video.webkitEnterFullscreen();
}
catch(e) {}
}, 250);
play.innerText = 'loading ...';
video.play();
});
</script>
Without looking at the page that contains multiple videos, it's hard to know for sure. But it sounds like you may be using the #test1 and #test2 IDs in your HTML more than once, in which case document.getElementById('test1') would only return the first matching element on the page. Check out the result of what's being console'd out here: http://jsfiddle.net/tjnicolaides/q7Pyh/
Try using document.getElementsByTagName or document.getElementsByClassName and looping through the results to add your event listeners to each video on the page. Here's an example: http://jsfiddle.net/tjnicolaides/NDYkU/
var videos = document.getElementsByTagName('video'),
play_buttons = document.getElementsByClassName('play_button'),
time;
for(var i=0; i< videos.length; i++) {
// add event listeners and stuff here
}
for(var i=0; i < play_buttons.length; i++) {
// add event listeners and stuff here
}
I'm creating a rich text editor.
Basically I have an iframe with design mode enabled. I'd like it to automatically resize when the user get near the bottom of the iframe while typing, or pasting text.
I have the function to change size.
function changeHeight() {
$(iframe).height($(iframe.contentWindow.document).height());
}
I just need to add a listener. I can't for the life of me find one that works!
Any ideas?
Much appreciated
-Will
Do this: http://sonspring.com/journal/jquery-iframe-sizing and add an onkeypress listener to check for resize.
Fair warning: if the content is not within the same domain --- it will NOT work due to XSS vulnerability prevention (you cannot trap the keypress event in this case).
This has been tested in IE7 to work, should work across most browsers. You're not actually attaching to the iFrame itself either, so much as the element you're interested in (which could very well be the body).
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#IFRAME').contents().find('textarea').bind('keypress', function() {
//Dostuff
})
});
</script>
<iframe src="/whatever.html" width="800" height="400" id="IFRAME" ></iframe>
Where you have a textarea (or div, or whatever) inside the iframe ... change the filter to your heart's content. Iframe resize code shows up in the sonspring article.
**
Edit again for code that attaches to IFRAME directly
Source [only replaced jQuery functions for native DOM. I'll clean out what I can when I have more time]:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25589672.html
**
<script>
$(document).ready(function() {
var f = $('#IFRAME')[0];
var fwin = f.contentWindow || f.contentDocument;
fwin.document.designMode = 'on';
var evt_key = function(e) {
e = e || fwin.event;
var range = null, ret = null;
if (fwin.document.selection) {
range = fwin.document.selection.createRange();
ret = range.parentElement();
}
else if (fwin.window.getSelection) {
var range = fwin.window.getSelection().getRangeAt(0);
ret = range.commonAncestorContainer.parentNode || fwin.document;
}
fwin.parent.eventCallback();
};
if (fwin.document.attachEvent) {
fwin.document.attachEvent('onkeypress', evt_key);
}
else if (fwin.document.addEventListener) {
fwin.document.addEventListener('keypress', evt_key, false);
}
})
function eventCallback() {
alert('Key Pressed');
}
</script>
<iframe src="#" width="800" height="400" id="IFRAME" ></iframe>