I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>
Related
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
The site like this:
`--main.html
`--dialog.html
`--folder
`--iframe.html
and the code is here:
main.html:
<html>
<head>
<script type="text/javascript">
function testframe() {
var doc = document.getElementById("frame").contentWindow;
doc.show();
}
</script>
</head>
<body>
<iframe src="folder/iframe.html" id="frame"></iframe>
<br/>
<button onclick="testframe()">test</button>
</body>
</html>
dialog.html:
<html>
<head>
</head>
<body>
This is modal dialog!
</body>
</html>
iframe.html:
<html>
<head>
<script type="text/javascript">
function show() {
showModalDialog('../dialog.html');
}
</script>
</head>
<body>
this is ifram
<br />
<button onclick="show()">show dialog</button>
</body>
</html>
When I click the show dialog button in the ifram,it show the modal dialog correctly.
When I click the test button outside the ifram ,it show the modal dialog incorrectly.
How can I fix this when I click the test button outside the ifram to show the correct page in the dilog?
iframeDomElement.contentWindow.setTimeout(function() {
iframeDomElement.contentWindow.childFunc();
}, 0);
This hack will make the relative path relative to the child window. Works in firefox and chrome，but not in safari.
I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow
EDIT I Found the solution! credit goes entirely to the assistance I received from Mixel. For those who find themselves in the same predicament of needing to pull a div from an iframe without using onload here is the entire working code that I am using:
<html>
<head>
<title>Main page</title>
<style type="text/css">#hiddenframe {display:none;}</style>
<script type="text/javascript">
window.onload = function () {
var myUrl = "test.html"
document.frames['hiddenframe'].location.href = myUrl;
}
</script>
</head>
<body>
<div id="parent-div"></div>
<iframe id="hiddenframe"></iframe>
</body>
</html>
And the Child Page:
<html>
<head>
<title>Child Page</title>
<script type="text/javascript">
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
</script>
</head>
<body>
<div id="daughter-div">
This is the Child Div!
</div>
</body>
</html>
Thank you once again to Mixel for his help and patience in finding a solution
That's because you reload hiddenframe in onload handler. Reloading triggers onload event, then onload handler reloads hiddenframe. And this happens again and again...
Edit:
May be I do not understand what you want to do in your code, but if you want to load iframe when parent window is loaded you need this:
window.onload = function () {
document.getElementById('hiddenframe').setAttribute('src', 'test.html');
}
And there is window.onload handler of test.html page:
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
Edit2:
That's html of main page:
<div id="parent-div"></div>
<iframe id="hiddenframe">
</iframe>
And that's test.html:
<div id="daughter-div">
Child div!
</div>