How to print data's along with background image in php? - javascript

Hey I am new to php and other stuffs. Now I am trying to make automatic bill creating page. But the problem is the background is not visible in print preview.
When I press the print button on the top left corner of the php page it shows a page without background image, at the same time I don't need print button in the print preview page. If I use <img> tag to insert image I can't able to display datas above the image.
My code
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
window.print();
}
</script>
</head>
<body background="Geekay.jpg">
<input type="button" value="Print" onclick="printpage();">
<br><br>
<br><br>
<br><br>
Datas....
</body>
</html>

For printing datas along with background image in print window click more settings (in case of google chrome). Then check background graphics. For not showing print button, I updated my code as given below
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
document.getElementById('print').style.display = 'none';
window.print();
}
</script>
</head>
<form name="bill">
<body background="Geekay1.JPG">
<div id="print" style="display:block">
<input type="button" value="Print" onclick="printpage()">
</div>
<br><br>
<br><br>
<br><br>
Datas....
</body>
</form>
</html>

Related

Val(" ") Not Removing Text From Text Box

In my HTML file, I have code which takes input in a text box and then displays it on the page without re-loading the page. I am using JQuery to do this. However, the line in the code which is supposed to remove the text from the text box is not working. Please see below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("input.submit").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
Text from "" is taken to the placetextfromboxes function and put in the variable "textFrombox". However, the line "$("input.submit").val("");" is supposed to erase the text from the box but it is not being erased. Is there anything that I am missing?
As per azro's suggestion in the comments, changing $("input.submit") to $("#yg") produces the effect you're looking for.
For convenience, the correction is offered in the snippet below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("#yg").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
It appeared to me as though $("input.submit") had been intended to select the submit button.
Changing the value to $("input") or $("input[type=submit]") successfully selected it but, as you may guess, it simply erased the text in the button when clicked.
Changing to $("#yg").val(""), successfully erases the text in the textarea and does not affect the value stored in the textFrombox variable.
input.submit would target an input element with class submit. What you have instead is attribute type of value submit. Therefore, to select this you'd need to do input[type=submit].
But it looks like you just want $('#yg').val('').

How to print a .txt file content in a html site with javascript every 1 s?

I have a file in my directory which is constantly changing itself. So every 1 second my file is saved and has a diffenent content. How can I display the file content in a HTML site using javascript in a way that the file content is updated in real time or every 1 s?
I tried this code but the site just opens the pop-up window where the file content is and every time I want to see changes, I have to press F5, I don't want that.
<html>
<head>
</head>
<title>test</title>
<body>
test<br>
<script>
var w = window.open('output.txt'); //Required full file path.
w.print();
</script>
</body>
</html>
I would go along the lines of
</head>
<title>test</title>
<body>
test<br>
<div id="text" ></div>
<script>
setInterval(()=>{
let t=new XMLHttpRequest()
t.open('GET',location.origin+'output.txt')
t.onreadystatechange=(ev)=>{
if(ev.readyState==4){
document.getELementById('text').textContent=t.responseText;
}
};
t.send()
},1000);
</script>
</body>
</html>
this way you wont get a new popup every second
another way would be :
<html>
<head>
</head>
<title>test</title>
<body>
<br>
<iframe id="text" src="output.txt" />
<script>
setInterval(()=>{
document.getElementById("text").contentWindow.location.reload();
},1000);
</script>
</body>
</html>
Use the following code:
<html>
<head>
</head>
<title>test</title>
<body>
test<br>
<script>
var w = window.open('output.txt'); //Required full file path.
w.print();
setInterval(function() {
window.location.reload(true);
}, 1000)
</script>
</body>
</html>

html javascript reverts to default after javascript has run

I am learning javascript and we have been given the task of changing image / colour of paragraph from the click of the button. My code works but I had to add an alert() to stop it to show this as it reverts to default image/colour as soon as it runs.
function changeImage() {
var myTag=document.getElementById("imageColour");
myTag.src = "images/white.jpg";
var x = document.getElementById("demo");
x.style.color = "red";
// Had to add this to see change
alert("Has reached changeImage()");
}
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script.js"></script>
<title>Exercise 3</title>
</head>
<body>
<h3>Exercise 3</h3>
<img src="images/black.jpg" id="imageColour"/>
<form>
<button type="submit" id="mySubmitButton">Change Colour</button>
</form>
<p id="demo">Click the button to change the colour of this paragraph.</p>
</body>
</html>
<!--javascript-->
<script type="text/javascript">
document.getElementById("mySubmitButton").addEventListener("click", changeImage);
</script>
Any help appreciated.
You are submitting a form. That causes the page to be reloaded and reset.
Use type="button" (and you might as well remove the form entirely while you are at it) or call preventDefault on the event object (the first argument to changeImage).

Opening web page in editmode

I want to know how we can open a web page in edit mode within an HTML page.
I mean, suppose if I have two frames. when I enter a url in a text in top frame, I should get the page in edit mode in bottom page. I should be able to select the items in the page in that mode. I don't want to save the items, but should be able to switch to the normal mode in a button click.
This is for getting Id/name/xpath of the elements in that page. if there are controls in a page which will navigate to other pages while clicking, I wouldn't be able to detect these parameters. If I am overriding all the click events, the controls under javascript tabs/accradian, will not be accessible.
Is there any ways to do it?
I coded as per one of the answer, but it is not working.
<!doctype html>
<html>
<head>
<title>click demo</title>
<script type="text/javascript">
function myFunc() {
doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.designMode = "on";
}
</script>
</head>
<body>
<input type="text" id="text" value="http://www.google.com" />
<input type="button" onclick="myFunc()" value="Open" /><br /><br />
<iframe id="ifrm" src="http://www.example.com" width="100%" height="500px" ></iframe>
</body>
</html>
you can convert any frame to design mode
iframe_node.contentDocument.designMode = "on";

Does JS work in popup windows?

I want a popup window containing a canvas, but I'm unable to get the JS to work in the popup.
Here's a toy program that shows the problem, trying to get 'alert' to work in the popup.
<html> <head> <title> popup test </title>
<script language="javascript">
function popup()
{OpenWindow=window.open("","","height=250,width=250");
OpenWindow.document.write("<html><body bgcolor=pink>Hello!");
OpenWindow.document.write("<form><input type='button' value='alert' onclick='doalert()'></form> ");
OpenWindow.document.write("</body></html>");
}
function doalert() { alert("Got in");}
</script> </head>
<body>
<input type="button" onclick='popup()' value="click to see new window">
</body></html>
The alert button shows in the popup window, blinks when I click it, but doesn't put up the alert box.
Define doalert in the child window:
<html> <head> <title> popup test </title>
<script language="javascript">
function popup() {
OpenWindow=window.open("","","height=250,width=250");
OpenWindow.document.write("<html><body bgcolor=pink>Hello!");
OpenWindow.document.write('<script language="javascript">function doalert() { alert("Got in"); } <\/script>');
OpenWindow.document.write("<form><input type='button' value='alert' onclick='doalert()'></form>");
OpenWindow.document.write("</body></html>");
}
</script> </head>
<body>
<input type="button" onclick='popup()' value="click to see new window">
</body></html>
The "doalert()" must be initiated only when the new window get loaded. Put these kind of functions which are needed to be work in parent window and child window in a function and trigger them when each window opens are when new codes are inserted or included to a page.

Categories