I am printing a table using Javascript function as given below
<script type="text/javascript" >
function printpreview(divId) {
var content = document.getElementById(divId).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\"
type=\"text/css\"/>");
mywindow.document.write(content);
mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
I am calling that function on click of a hyperlink using below code
<a class="manage_link" href="" onclick="printpreview('printdiv')" >Print Preview </a>
I want the right message to appear at the end of each and every print preview page but it is only appearing at the end of last page. e.g. If there are 5 pages I want this copy right message to appear in the footer of every page.
Wrap the element you want to have on every page inside a selectable element like a div with a class and in the css give that a fixed position somewhere at the bottom of your document.
For example, change
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');
to
mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');
And include a css-rule like the following:
.footer-text {
position: fixed;
bottom: 0;
}
Related
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->
body{
background-color:#ffffff;
}
li{
color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>
<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>
I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.
<!--stylenight.css-->
body{
background-color:#000000;
}
li{
color:#ffffff;
}
You will have to set cookies in the browser when the user clicks the Day/Night Mode Button.
and read the cookie value to set the Mode when user comes back to your original page.
You can read more about setting and reading cookies in javascript here:
https://www.w3schools.com/Js/js_cookies.asp
You are looking are something like this on clicking the button:
document.cookie = "mode=Day;";
Also you will need a function to read the cookies when the page loads:
(From How do I call a JavaScript function on page load?)
window.onload = function() {
readCookieAndSetMode();
};
And on readCookieAndSetMode() you should read the cookie using
var x = document.cookie;
and depending on x swap the CSS (I leave that part to you).
All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..
<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
localStorage.setItem("preferredmode", "light");
} else {
document.body.className += " darktheme";
if (opener) {opener.document.body.className += " darktheme";}
localStorage.setItem("preferredmode", "dark");
}
}
(
function setThemeMode() {
var x = localStorage.getItem("preferredmode");
if (x == "dark") {
document.body.className += " darktheme";
}
})();
//]]>
</script>
<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}
<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
</div>
I've iframe that i created dynamically in my html page and print button with event on click
to print iframe's content
but unfortunately it prints the whole page instead
but after long search
I've found some solutions like focus on iframe before fire print event
but it seems doesn't work on IE and MS Edge
it works in Chrome
the only solution that works with me is to open new window and copy iframe outerhtml in it and fire print event after the content loaded in new window
then close the new window immediately after the user take an action to print or cancel
but this solution doesn't look user friendly
so does it there any solution to print iframe content in IE and Edge
<html>
<head>
<title>IFrame Printing Issue</title>
<script type="text/javascript">
var g_iFrame;
function onLoad()
{
g_iFrame = document.createElement("iframe");
g_iFrame.id = "testFrame";
var style = g_iFrame.style;
style.border = "1px solid black";
style.width = "300px";
style.height = "200px";
document.body.appendChild(g_iFrame);
}
function setIFrameSrc()
{
g_iFrame.src = "Test.htm";
}
function printIFrameContent()
{
window.frames["testFrame"].contentWindow.focus();
window.frames.testFrame.contentWindow.print();
}
</script>
</head>
<body onload="onLoad();">
<button type="button" onclick="setIFrameSrc();">Set IFrame Src</button>
<br />
<button type="button" onclick="printIFrameContent();">Print IFrameContent</button>
<br />
<div style="border: 1px solid black; width: 300px; height: 200px;">
This is to test printing the content of an IFrame whose src is set dynamically.
</div>
</body>
</html>
You may first check if the user agent is IE:
function printIFrameContent()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf ("MSIE ");
var iframe = document.getElementById("testFrame");
if (msie > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.print();
}
}
Referred a similar answer on SO: https://stackoverflow.com/a/19639241/1500851
In my jsp i have print button , on that button i want to display data which is already available in js.
jQuery("#printCoupon").click(function() {
PrintDiv();
});
function PrintDiv() {
var divToPrint = couponCode;
var popupWin = window.open('', '_blank', 'width=600,height=800');
var htmlCode='<table frame="box" style="border-style: dashed;" ><div align="left" class="printDiv" style="vertical-align:middle;height: 6px;width: 9px;max-width:350px;margin:10% auto 0;" ><tr><td>';
popupWin.document.write('<html><body onload="window.print()"><div style="text-align:center;">Coupon Details</div>'+htmlCode+'' +buisnessName+''+dealTitle+'<br/>'+dealDesc+'<br/>'+dealendDate+'<br/>'+ couponCode + '</div></table></html>');
popupWin.document.close();
popupWin.window.close();
}
this data is displaying well but now i want to have coupon as image and then all this content to be added in it.
I tried using
background-image: url("../images/automotive_section_bg.png");
background-repeat: repeat;
But it is not at all working I also tried written css in separate file
but the css is not applying to this as it is opening new window.
Here is the jsFiddle
http://jsfiddle.net/pw111ktm/
Please help.
var popup;
jQuery(document).ready(function(){
jQuery(window).bind('load',windowLoadComplete);
});
function windowLoadComplete() {
var settings = new Object();
popup = new SSKpopup(settings);
popup.createPopup();
jQuery('a').each(function(n){
if(jQuery(this).attr('href').indexOf("popup#")>-1) {
jQuery(jQuery(this).attr('href').split("popup#")[1]).hide();
jQuery(this).click(function(e) {
e.preventDefault();
popup.loadContent(jQuery(jQuery(this).attr('href').split("popup#")[1]));
});
}
});
}
I have that piece of code that is to create a popup containing pictures, information just like like http://jqueryui.com/demos/tabs/ and in my html code I create the popup as follows,
<a class="popup" href="/main/popup##hulk">Key Speakers</a>
<br>
Chairman
</p>
<div id="hulk" style="width: 450px; display: none;">
<img class="popup_img" border="0" alt="" src="/main/images/speaker.jpg">
<p>Content descriping the speakers</p
</div>
When I use firebug over the href I see the address different from normal location and if I insert into its as index.php/main/popup#$hulk to be same as every other links and click it then, the page direct me to localhost/xampp/. Of course no popup was displayed.