I would like to style my window.open,
I currently have some items on my webpage that open due to a certain class that is parsed, which there after opens the specified text in a new window.
I would like to change the font-size, font and padding etc.
Here is my javascript code.
<script type="text/javascript">
$(".Show a").click(function () {
var html = $(this).parent().next("div.show-dialog").html();
var my_window = window.open("", "mywindow1", "width=750,height=550");
$(my_window.document).find("body").html(html);
});
</script>
How do I parse css styles in javascript?
Check out this answer: https://stackoverflow.com/a/18758370/1060487
From the answer:
Build a complete HTML page in the opened window and reference your CSS-file there:
var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
I face this issue a few days ago. My issue was different just to style the popup center.
Here is the code which works for me
<a href="http://twitter.com/intent/tweet?text=[TWEET_CONTENT_GOES_HERE]"
onclick="window.open(this.href,
'twitterwindow',
`top=${(screen.height - 570)/2}, left=${(screen.width - 570)/2}, width=600,
height=300, resizable=1`); return false;">
Tweet this
</a>
Related
I have a document with a table and Print button. The print button calls a javascript function to generate a printable version in a new window. The printable version should load a stylesheet from the site. However the stylesheet does not load. And when I open the source from the newly opened window, although the stylesheet href -appears- correct, clicking on it does nothing. So clearly my browser doesn't recognise it as a proper href.
SO: Why is the link tag not being recognised as an href?
Here is the javascript function:
jQuery("div.jch-noise_records span.print_button a").on('click', function(e) {
e.preventDefault();
var getpanel = document.getElementById("jch-noise_records");
var MainWindow = window.open('', '', 'height=500,width=800');
MainWindow.document.write('<!DOCTYPE html>\r\n');
MainWindow.document.write( '<html lang="en-US">\r\n<head>\r\n');
MainWindow.document.write( '<title>Noise Records Report</title>\r\n');
MainWindow.document.write( '<link rel="stylesheet" href="http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css" type="text/css" media="all" />\r\n');
MainWindow.document.write( '</head>\r\n');
MainWindow.document.write( '<body>\r\n');
MainWindow.document.write( getpanel.innerHTML);
MainWindow.document.write( '\r\n</body>\r\n</html>\r\n');
MainWindow.document.close();
MainWindow.document.focus();
// MainWindow.print();
return true;
});
And here is a bit of the html generated in the print window:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Noise Records Report</title>
<link rel='stylesheet' href='http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css' type='text/css' media='all' />
</head>
<body>
<span class="close"><a title="Close" href="#">X</a></span><div class="jch_table_wrapper"><p class="header"><span class="report_date">2018-06-12 18:00</span><span class="report_title">Noise By The Hour (Checkbox Detail)</span><span class="report_ip">71.231.25.83</span></p><p class="header"><span class="report_query">For date >= 2018-01-01 AND date <= 2018-05-31</span></p><table id="jch-noise_by_hour" class="jch-noise"><tbody><tr class="total"><td colspan="5">Total of <span>151 </span> days tracked for <span></span> at <span> 12AM</span> from <span>01/01/2018</span> to <span>05/31/2018</span><br>
Average noise: <span>82.8dbA</span><br>
Total # of events detected: <span>12,153</span><br>
Average number of events/hour: <span>6</span></td></tr>
</tbody></table></div>
</body>
</html>
Although I'm guessing at why this is the issue, I wanted to put this answer here for visibility as it seems to have worked based on the comments on the question.
I believe the new popup window (or new tab depending on the user's settings) is not loading and rendering the linked CSS due to some sort of security/context issue.
Since the window.open(url, name, params); call you are making is passing in an empty string for the url and the name parameters I believe this is setting your new window to be in a different "protocol" or "domain" context than your opening page, AND the linked CSS file.
Someone like #EricLaw might be able to confirm this suspicion but I believe that "" (empty string), "about:blank", and "javascript:" trigger some special ~sandboxing~ when used for popups/iframes.
That all said, it appears that if you set the URL of your initial window.open() call to be an actual HTML page (it can be a dummy/stub) from your server... and then afterwards inject the CSS link you want and content to render in the body... it overcomes this issue.
I have a PHP web page. On the web page i have a iframe and few DIV. Now I want a single print button, which will print the content of the current active window. If no iframe or div is open then it will print the main page else the current iframe source or div content using javascript.
is it possible?
Here is an sample to print an element. Hope this will help you to get an idea.
<html>
<head>
<input type="button" value="Click to Print" onclick="printDiv()" />
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
</script>
<script type="text/javascript">
function printDiv() {
var data = $('#divToPrint').html()
var printWin = window.open('', 'Print Preview', 'height=600,width=800');
printWin.document.write('<html><head><title>Print Preview</title>');
printWin.document.write('</head><body >');
printWin.document.write(data);
printWin.document.write('</body></html>');
printWin.print();
printWin.close();
return true;
}
</script>
</head>
<body>
<div id="divToPrint">jQuery is a fast, small, and feature-rich
JavaScript library. It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much simpler with an
easy-to-use API that works across a multitude of browsers.</div>
</body>
</html>
The data variable should be replaced with what ever that you want to print.
I want to open a pdf file when page is getting loaded (onload), I done it through calling javascript function on onload action ,I can open a pdf in adobe reader ,but issue is I got new Blank browser-window in addition to adobe file(opened in adobe not in browser)
<html>
<script type="text/javascript">
function windoeOpen() {
var myWindow = window.open(" ", "windowname", "width=200, height=100");
myWindow.location.href = "file:///F:/pdf2.pdf";
}
</script>
<body onload="windoeOpen()">
<code>
........
</code>
</body>
</html>
please give me suggestion how can I close the additional browser blank window.
Note:
but if I open pdf in browser ,it works fine(opened in browser as expected) no addition blank browser.
You just need to specify window.location.href like this:
JavaScript:
<script type="text/javascript">
function windoeOpen()
{
window.location.href = "file:///F:/pdf2.pdf";
}
</script>
HTML:
<body onload ="windoeOpen()">
I have a Javascript function that prints the contents of two elements in a webpage. It works in Chrome, Firefox and IE but Safari just brings up an empty window and if I select print, it simply prints a blank page.
Here's my code:
var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";
//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);
//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";
//Set up print window and print
var printWindow = window.open('', '', params);
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//Close the window
printWindow.close();
Is there a way I can modify my code to allow it to render the page properly in Safari so I can print it? Preferably without using additional plugins.
Edit: Thanks Eric but that didn't work for me. Adding a time delay to the print seems to work well although it's not ideal, even a 10ms delay solves the issue. The line I used was:
setTimeout(this.print, 100);
I found a solution to this problem. The problem resides in the fact that window.print() is not standard for all browser and Safari probably takes a different approach on when triggering it.
I changed a little your code so maybe this solution can't fit your possibility but it works for all browser (tested on Safari, FF, Chrome, IE8).
Note that you need to have a different page for the popup content (I changed the code to retrieve the contract to make a sample for myself, hope you will figure out how to get contract content).
The code:
HTML for the page that opens the popup
<body>
<input type="button" id="popup" value="Open Popup" />
<div id="yourContract">
<div>blablabla</div>
<div>blablabla2</div>
<div>blablabla3</div>
<table>
<tr>
<td>blablabla td1</td>
<td>blablabla td2</td>
</tr>
<tr>
<td>blablabla td3</td>
<td>blablabla td4</td>
</tr>
</table>
</div>
</body>
<script>
$("#popup").click(function(){
var win = window.open("static.html");
});
</script>
HTML for the popup (static.html):
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$.holdReady(true);
$.getScript("print.js", function() {
$.holdReady(false);
});
</script>
</head>
<body>
<script>
var contract = window.opener.$("#yourContract").html(); //change to fit your needs
$("body").html(contract);
</script>
</body>
</html>
JS file (print.js) called by static.html
$(document).ready(function(){
window.print();
window.close();
});
How does it works:
static.html consists of two script section. The section in the body loads via javascript the content in the page.
The section in the head prevent the document to trigger ready status by setting holdReady to true. Then it loads print.js which waits for document to be ready, but we will decide the exact moment because we are preventing it.
After the script is included in the page holdReady is set again to false, triggering the ready status to document and calling the print() and close() functions on the window.
This however occurs after the browser has loaded all the page content, so you will see the preview in the popup page and the print dialog.
Hope this solution is what you need.
I am creating a new popup window and I want to scroll my page to specific location, I tried all three methods I mentioned on top but none of them is not working.
Here is my code
var w = window.open('','TEST','width='+divWidth+',height='+divHeight+'');
w.onload = function() {
w.scroll(200,300);
};
Any idea?
Gokhan, my guess is that the window's body is empty, yielding a content size of zero. Since the dimensions of the content are 0 width by 0 height, the window's viewport effectively collapses to nothing -- essentially reducing scroll() (and friends) to a noop.
I put together a little fiddle to demonstrate that having sufficient content fixes the problem. http://jsfiddle.net/blangenfeld/SXnA8/3/
UPDATED ANSWER
Okay, now I understand that you're creating a pop-up using content from a same-origin page. Try defining an onload for the pop-up window and doing your scrolling there.
<html>
<head>
<style type="text/css">
/* Just ensuring the size of the content for demo purposes */
body { min-width: 500px; min-height: 500px;}
</style>
<script type="text/javascript">
function showPopUp(url) {
popUp = window.open(url, "_blank", "width=300, height=300");
/* This works if the URL doesn't violate same-origin policy */
popUp.onload = function() {
this.scrollTo(100, 100);
}
};
</script>
</head>
<body>
<h1>Pop-up test</h1>
<a href="#" target="_blank" onclick="showPopUp('popup.html');">
Click for a same-domain pop-up
</a>
|
<a href="#" target="_blank" onclick="showPopUp('http://www.google.com');">
Click for a google.com pop-up
</a>
</body>
</html>