in my react application I have an iframe which is loaded with HTML document and content of it exceeds 1 page. on pressing Ctrl+p I want to print it in several pages but the print preview only shows one page.
how it should be handled to recognize that the content of iframe is more than one A4 page?
the DOM in chrome devtool looks like
<div class="article-container">
<iframe style="">#document
/* hundreds of <p> tags */
</iframe>
</div>
the structure in react app is like
<div className="article-container">
<FrameText content={content} status={!this.state.editStatus} />
</div>
and the FrameText
class FrameText extends React.Component<Props> {
iframe: HTMLIFrameElement;
compinentDidMount(){
window.addEventListener('beforeprint',(e)=>{console.log(e);})
}
/* other stuff*/
render() {
const { status } = this.props;
return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />;
}
so here when the ctrl+p is pressed I get the event and the iframe document is in the event. Also, I have the content of iframe in the local state too.
I could not find anywhere that when this event is triggered what can I do with it to manipulate or somehow tell the print preview that the content is long.
Also, the css is
#media print {
.article-container {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
Your print media query will not work on iframe inner content that is the reason iframe size is ignored while printing If you want to apply specific print styles to iframe then you have to reference from outside via appropriate method(whether js or html) I am writing a sample to reference styles to iframe there may exist other implementations for it to
let cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe1'].document.head.appendChild(cssLink);
I was able to print multiple pages in an iframe by capturing the CTRL P event, giving focus to the iframe then initiating printing on the iframe.
<iframe id="iframe" name="iframe" src="2.html"></iframe>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode === 80) {
window.frames["iframe"].focus();
window.frames["iframe"].print();
return false;
}
return true;
});
</script>
Related
I'm trying to add a popup with javascript which is triggered by a query string of the URL. I want the popup to stay hidden unless the query string is attached to the URL. I'll be using the popup mostly for redirects and any messaging that I want to display relating to the redirect.
I've tried using a combination of different functions I've used previously and can't get it to work, so I was just wondeirng if someone could take a look through and tell me where I'm going wrong.
The redirect with query string will be something like this:
https://www.example.com/?fromoldsite
SCRIPT
<script>
var fromOldURL = window.location.href;
if (fromOldURL.indexOf('fromoldsite') !== -1) {
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('redirectPopUp').style.display = "none";
else document.getElementById('redirectPopUp').removeAttribute('style');
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 3000);
}
}
}
</script>
CSS
<style>
#redirectPopUp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
z-index: 1001; }
#popUpContent{
padding: 100px;
width: 50%;
height: 50%;
background-color: #FFF;
background-size: cover
position: relative;
margin: 200px auto; }
</style>
HTML
<div id="redirectPopUp">
<div id="popUpContent">
<h2>Popup Content Here</h2>
<h6>Popup Message Here</h6>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</div>
</div>
I want the popup to show up only if the url contains "fromoldsite" and to pop up after 3 seconds. At the moment, the popup is showing up automatically regardless of the URL.
Any help would be appreciated.
At the moment your popup is displaying simply because you didn't call PopUp("hide"); yet.
Furthermore the function definition of PopUp is inside the if block that evaluates the query string. Move it above, outside of the if block.
Lastly the setTimout function should just be triggered if the query string is present.
Your corrected code should look like this:
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide')
document.getElementById('redirectPopUp').style.display = "none";
else
document.getElementById('redirectPopUp').removeAttribute('style');
}
var fromOldURL = window.location.href;
if (fromOldURL.indexOf('fromoldsite') !== -1) {
setTimeout(function() {
PopUp('show');
}, 3000);
}
PopUp("hide");
</script>
I have two links - each should load a different HTML file respectively into an iframe. They will be loaded into the same javascript collapse area. I want each link to load the designated file into the iframe when clicked.
My problem is that IF one html file is loaded into the open (show) collapse area, the collapse area will toggled closed if I click on the second link. I suppose I need an if/then js script but am unsure of the proper logic and syntax?
It should operate logically as expected:
1) If the collapse area is closed (which it is by default), when any link is clicked, it should OPEN and then load in the iframe contents (HTML file)
2) If I click the second link while the collapse is open, it should STAY open (not toggle closed) and simply load in the second iframe contents (HTML file)
What I have below works fine for 'loading' the proper content, but it toggles by default. So if I have the area open with content loaded, it closes if I click the second link.
here are my snippets:
LINK 1
LINK 2
<div id="content" class="collapse">
<p><iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe></p>
</div>
Any suggestions or samples would be helpful... Thank You
I'm going to use websites to demo a solution for your question. The snippet doesn't display the results but you can view a fiddle here. A second solution is here (shown in second snippet); it is specific to your two files. You may have to add a path.
These are fairly primitive solutions but as you are only switching between two files, perhaps this may suffice for your needs.
(I set a background colour for the div (not the iframe).. remove this if you wish..)
function togglediv(filename) {
var frme = document.getElementById("process_frame");
var file2 = filename;
if (file2 == " " || filename == undefined) {
frme.src = "http://www.richmondinnireland.com";
file2 = frme.src;
} else {
frme.src = filename;
file2 = frme.src;
}
//console.log(file2)
// display frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = file2;
}
}
#content {
background-color: lightgrey;
height: 280px;
overflow: auto;
}
#process_frame {
height: 280px;
overflow: auto;
width: 100%;
z-index: 0;
}
LINK 1
LINK 2
<br><br>
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
</script>
#process_frame {
height: 280px;
overflow: auto;
width:100%;
}
#file1,
#file2 {
display: inline-block;
margin: 5px;
}
File 1
File 2
<div id="content" class="collapse">
<iframe id="process_frame" overflow="hidden" scrolling="no" frameborder="0" height="280" width="100%"></iframe>
</div>
<script>
function togglediv(num) {
var frme = document.getElementById("process_frame");
var fileid = num;
var filename = "html_file_";
var filetoget = '"' + filename + num + ".php" + '"';
console.log(filetoget);
// check if frame is hidden
if (frme.style.display == 'none') {
frme.style.display = 'block';
frme.src = getfile;
} /*else {
//frme.style.display = 'none';
}*/
}
</script>
There are so many questions like my one,even I go through this link also.But I didnt get a proper solution yet.So Im posting my issue here.
I have to popup a message when click an icon and when I click the same div where the icon is reside,it should disappear. This is working fine.But when I click outside the div also, the popup should disappear.How can I modify this javascript function to achieve it
<div>
<h5 class="haead">Search for a product title
<div class="popup" onclick="myFunction5()"> <img class="qnicon" src="question.png">
<span class="popuptext" id="myPopup5">Search product.</span>
</div>
</h5>
</div>
<script>
function myFunction5() {
var popup = document.getElementById("myPopup5");
popup.classList.toggle("show");
}
</script>
The easiest way I've found that avoids any number of other problems you could encounter, is to put the popup on top of a 100% width/height div. That "disabler" div has the same click handler as the button that would ordinarily close the popup. So if the user clicks the "X" to close, the "Ok" button (or whatever you've got set up) or the area outside the popup, same effect, it closes.
That "disabler" div (it effectively disables the entire app except for the popup) can be completely clear, or translucent, by setting the opacity.
You put the "disabler" div at z = 9998, the popup at z = 9999 (just more CSS), and they'll always be on top. Note that this may not be necessary if all your content loads into a div that is already underneath the disabler (e.g. the router-outlet div in Angular), but I usually do it anyway.
Complete basic example. I typically make a component out of this and hook it into an event bus so I can pass data in and out of it (so I can change the position, style, messages, even what happens when you click the close button). If you get this code you should be able to use some approximation of it in any framework, etc.
<html>
<head>
<style>
.button {
text-align: center;
width: 100px;
height: 30px;
background-color: green;
border: 2px solid grey;
color: white;
margin: auto;
position: relative;
}
.disabler {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99998;
background-color: #000000;
opacity: 0.5;
}
.popup {
position: relative;
/* Center with whatever voodoo you like */
top: calc(50% - 150px);
left: calc(50% - 150px);
width: 300px;
height: 300px;
background-color: blue;
border: 2px solid grey;
z-index: 99999;
}
</style>
</head>
<body>
<div class="button" onclick="togglePopup ( )">
Show Popup
</div>
<div class="button" onclick="showAlert ( )">
Show Alert
</div>
<!-- This div is on top of everything except the popup div -->
<!-- It effectively disables the entire app except for the popup -->
<div id="disabler" class="disabler" onclick="togglePopup ( )"></div>
<!-- This div holds the popup -->
<!-- You can only close the popup by clicking the close button, or the disabler background -->
<!-- Clicking in the blue popup area doesn't do anything (intentionally) -->
<!-- Even though you can see other widgets through the disabler, they're all inaccessible -->
<!-- Try the show alert button to confirm -->
<div id="popup" class="popup">
<div class="button" onclick="togglePopup ( )">
Close Popup
</div>
</div>
<script type="text/javascript">
togglePopup ( ); // Hide them to start.
function togglePopup ( ) {
let disabler = document.getElementById ( 'disabler' );
disabler.style.display = disabler.style.display ? '' : 'none';
let popup = document.getElementById ( 'popup' );
popup.style.display = popup.style.display ? '' : 'none';
}
function showAlert ( ) {
alert ( 'Hey there!' );
}
</script>
</body>
</html>
Here is the way to do this:
Javascript
popup.addEventListener('click',function(e) {
// This is important to prevent the popup from inheriting the event since it
// is inside the body
e.stopPropagation();
});
var body = document.body;
body.addEventListener('click', function(e){
if(popup.classList.contains('show')) {
popup.classList.remove("show");
}
);
I wish this solves your problem
Edit
That didn't work because you have to structure your code properly like this:
HTML
<div id='popup-container'>
<!-- This all inside the popup -->
<h5 class="haead">Search for a product title</h5>
<div class="popup-data">
<img class="qnicon" src="question.png">
<span class="popuptext" id="myPopup5">Search product.</span>
</div>
Show Popup
</div>
Javascript
var popupContainer = document.getElementById('popup-container');
var body = document.body;
var showPopup = document.getElementById('show-popup');
showPopup.addEventListener('click', function(e) {
e.preventDefault();
popupContainer.classList.add('show');
});
popupContainer.addEventListener('click', function(e) {
e.stopPropagation();
});
body.addEventListener('click', function(e) {
if(popupContainer.classList.contains('show'))
popupContainer.classList.remove('show');
);
I need to show the loading image until data fetched from the database and bind to the datagrid.I have a button in the parent page (A.aspx), when we clicked on that button it will display the data in the Overlay (B.aspx). We have used greybox to display page in the overlay. I have placed the loading image in the B.aspx
The fetching and display the data in the datagrid are handled in the Page_Load. Since it all the logics are handled in the page_load, the elements will not be available in the DOM.
I am not able to show/hide the loading image.
Note: I have tried to placed the same loading image in the parent page (A.aspx). But the loading image is displaying behind the overlay.
Please find the piece of code:
protected void Page_Load(object sender, EventArgs e)
{
try
{
throbberSplashOverlay.Visible = true;
}
}
#ctl00_CPSContentHolder_throbberSplashOverlay
{
background-color:White;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 500;
}
#throbberSplash
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url(../App_Themes/Blue/images/indicator.gif) no-repeat center center;
}
<div id="throbberSplashOverlay" runat="server" visible="false"><div id="throbberSplash"></div></div>
as per my understanding you are displaying data in b.aspx.so use javascript function in b.aspx.onbeforeunload is for IE.
EDIT:while page is loading for the first time you can not call javascript function until the page loads completely.so show a wait image inside a div.and hide your entire page until the page loads completely.second time you can use onunload or onbeforeunload events.
<html>
<head>
<script>
</script>
</head>
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="show();">
<div id="divWait" style="display:inline" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<input type="button" onClick="call your method" />
//your rest of the html
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
</html>
I have a documentation type page with an iframe inside. I'm trying to override standard browser print (Ctrl + p) to print contents of an iframe only.
I know how to print an iframe content using javascript:
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
I know how to do run javascript before printing e.g. as described here: Check for when a user has selected to print using javascript
Any advise?
Thanks
It can be easily achieved through CSS: See thisJSfiddle: Tested
<style>
#media print{
body * {display:none;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>
Let an HTML File be:
<body>
<h3>I do not want this title Printed</h3>
<p> This paragraph should not be printed</p>
<iframe class="toPrint" src="http://akitech.org"></iframe>
<button onclick="window.print()">Print</button>
</body>
It's not possible (using Javascript). There is some experimental support for user-initiated print events in modern browsers, but those are not cancelable ("simple events") so the entire page will still print even if you interject custom code to print the frame of interest.
Given this limitation, your best bet is probably to offer users a large button that fires your custom frame printing function (see printContentFrameOnly below, fire it without arguments) and hope that they'll use the button instead of ctrl-p.
If it would be possible, this would be the way to do it (based on this answer):
// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {
// IE 5.5+ support and HTML5 standard
if ("onbeforeprint" in window) {
window.addEventListener('beforeprint', listener);
}
// Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
else if (window.matchMedia) {
var mqList = window.matchMedia("print");
mqList.addListener(function (mql) {
if (mql.matches) listener(); // no standard event anyway
});
}
// Your fallback method, only working for JS initiated printing
// (but the easiest case because there is no need to cancel)
else {
(function (oldPrint) {
window.print = function () {
listener(undefined, oldPrint);
}
})(window.print);
}
}
printContentFrameOnly = function (event) {
if (event) event.preventDefault(); // not going to work
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
}
addPrintEventListener(printContentFrameOnly);
The idea is to set the iframe content somewhere on the page, and print ONLY that content, by hiding the original content.
This can be done by getting the iframe content when Ctrl+P event is being initiated (via JavaScript), and print only its content (via CSS #media type).
HTML Code:
<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
<div id="content_wrapper">
<div id="current_content">Current Content that the user see<div>
<iframe id="myIframe" src="iframe.html"></iframe>
</div>
CSS Code:
#media screen {
#dummy_content {
display:none; /* hide dummy content when not printing */
}
}
#media print {
#dummy_content {
display:block; /* show dummy content when printing */
}
#content_wrapper {
display:none; /* hide original content when printing */
}
}
JavaScript Code:
var dummyContent = document.getElementById("dummy_content");
function beforePrint() {
var iFrame = document.getElementById("myIframe");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
}
document.onkeydown = function(e) {
if (e.ctrlKey && e.keyCode == 80) {
beforePrint();
}
}
You can define a css file for printing:
#media print {
* { display: none; }
iframe { display: block; }
}
EDIT
Mybad didnt tested it.
* { display: none; } is somehow overwriting all
But this is working like a charm
http://jsfiddle.net/c4e3H/
#media print {
h1, p{ display: none; }
}
The only way i can think of is hiding all the content in the document except for the iframe and making it fit the whole document.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
display: none !important;
}
body.hide #my_print_iframe, body.hide #backdrop
{
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
width: 100%;
height: 100%;
display: block !important;
}
#media print {
body.hide #backdrop
{
display: none !important;
}
}
</style>
<script>
$(document).on('keydown', function(e){
if (e.keyCode == 80 && ( e.metaKey || e.ctrlKey ) ) {
$("body").addClass('hide');
setTimeout(function(){
$("body").removeClass('hide');
},1000)
}
})
</script>
</head>
<body>
<div>
this is some visible text
</div>
<iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>
I used timeout ( nasty i know ) because at least chrome 38 does not send the keyup event after ctrl+p
Hi might be this code will help you..
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'printMe', 'height=400,width=600');
mywindow.document.write('<html><head><title>Print Me</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
and call the function PrintElem('iframe') on you page.