I have to print a text box with its value using JavaScript when user enter the value at run time but the below code is not compatible with IE9+ textbox is within div tag
Print:function()
{
var divtoprint = document.getElementById('div1');
var popupWin = window.open('', '_blank', 'width=500,height=400');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divtoprint.innerHTML + '</html>');
popupWin.document.close();
}
Please can you help?
I have changed :
<!DOCTYPE html>
<html>
<head>
<script>
function print(){
var divtoprint = document.getElementById('main-div').innerHTML;
alert(divtoprint);
var popupWin = window.open('', '_blank', 'width=500,height=400');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divtoprint + '</html>');
popupWin.document.close();
}
</script>
</head>
<body>
<div>
<div id="main-div">
<input type="text" name="FirstName" value="Mickey">
</div>
<input type="button" value=" Print Terms " onClick="print()">
</div>
</body>
</html>
and it works f9 in ie9,ie10.
here is the screen shot in my ie 10:
and this:
IE has some strict validation of html.
Chrome, firefox and the other browsers are not so strict.
In your code you are missing the closing body tag.
You will need to this tag and i sure your code will work in IE.
Replace:
popupWin.document.write('<html><body onload="window.print()">' + divtoprint.innerHTML + '</html>');
By:
popupWin.document.write('<html><body onload="window.print()">' + divtoprint.innerHTML + '</body></html>');
At the end of the line I added the closing tag.
I really doubt this can be done to be honest. Besides, a common practice for printing webpages is attaching a stylesheet for printing, in which you are hiding all elements but the ones you want to print.
Here is a nice blog article about that:
print stylesheets
Here is a quick example:
<!DOCTYPE html>
<html>
<head>
<style media="print">
.noprint { display: none; }
</style>
</head>
<body">
<div>
<div id="main-div">
<input type="text" id="mytextbox" name="FirstName" value="Mickey"/>
</div>
<input type="button" class="noprint" value=" Print Terms " onClick="window.print()">
</div>
</body>
Now if your user goes to "print preview" in their browser, they won't see the "print" button (and the same way the page will be printed when they click "print" button on the page)
I hope that will help you.
Related
I wan't to inject a .css on a page by clicking a button on my extensions!
Here is the popup.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/popup.css">
<script type="text/javascript" src="black.js"></script>
<script type="text/javascript" src="white.js"></script>
</head>
<body style="width: 400px">
<h1>test v1.0.0</h1>
<hr ></hr>
<input type="button" onclick="black" value="Black"/>
<input type="button" onclick="white" value="White"/>
</body>
</html>
And here is the black.js (white.js is almost the same):
function black() {
var browserListener = function(tab) {
chrome.tabs.insertCSS(tab.id, {
file: "css/black.css"
});
}
}
I don't know why but it's not working.
You can also try:
var blackCss = document.createElement('link');
blackCss.src = "css/black.ss";
blackCss.rel = "stylesheet";
document.head.appendChild(blackCss);
Of course, you can wrap that in a function and make the src path dynamic.
There are lots of ways of doing this literally LOTS ive come up with 1 solution but now that i think of it its probably not best but it works.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>test v1.0.0</h1>
<input id="black" type="button" value="Black"/>
<input id="blue" type="button" value="Blue"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function(){
$('#black').on('click', function(){
var location = 'black.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
$('#blue').on('click', function(){
var location = 'blue.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
})();
</script>
</body>
</html>
You could go so much further with this and make it 1 function that just changes the value of the href tag on the css link. but this also works fine. I wouldn't recommend using this exact code but im hoping you get what im trying to show here
When I clicked print button, the print preview was failed only Google chrome. Other browsers are working fine. I couldn't find out this problem. Why print preview is failed?
<!doctype HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function PrintImage() {
var x = window.open('','_blank','location=0');
x.document.body.style.margin = '0';
x.document.body.innerHTML = '';
x.document.write("<!DOCTYPE html>");
x.document.write("<html style='margin:0px;'><head></head><body onload='printpage()' style='margin:0px;'>");
x.document.write("<img src='http://10.78.129.248:8080" + $('#imgFront').attr('src') + "' style='margin:0px;border:0px;display:block;height:100%;width:100%;" /* + $('#imgFront').css('height') + "; width:" + $('#imgFront').css('width') + */ + "'/>");
x.document.write("</body></html>");
x.document.close();
x.focus();
x.print();
x.close();
}
</script>
</head>
<body>
<img id="imgFront" src="/badgeimagehandler.jpg" align="middle" border="0" style="width: 80mm; height: 50mm" />
<form>
<input type="submit" name="btnPrint" value="Print" onclick="javascript:PrintImage();" language="javascript" id="btnPrint" /> <!-- -->
</form>
</input>
</body>
</html>
I have the below code which launches the page and sets the zoom to 175%. I would like to do this for the w3schools link below...e.g. in a child window if anyone knows how. thanks .
IE 8 compatible, dont care about other browsers at the moment.
<html>
<head>
<title>olecmdid</title>
<script>
function zoom(percent) {
var PROMPT = 1; // 1 PROMPT & 2 DONT PROMPT USER
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
var status = WebBrowser1.QueryStatusWB(63);
document.getElementById("QueryStatusWB_Result").innerHTML = status;
WebBrowser1.ExecWB(63,PROMPT,percent,null);
WebBrowser1.outerHTML = "";
}
</script>
</head>
<body onload="zoom(175);">
<form name="form">
<input type="Button" value="25%" onclick="zoom(25);">
<input type="Button" value="50%" onclick="zoom(50);">
<input type="Button" value="100%" onclick="zoom(100);">
<input type="Button" value="150%" onclick="zoom(150);">
<input type="Button" value="200%" onclick="zoom(200);">
</form>
Visit W3Schools.com!
</body>
</html>
I managed to get a workable solution for what I needed. So I resize the existing window and then launch a new window and then go back and resize the original window. Might help someone else.
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=10">
<script>
function openwind() {
zoom(400);
var purchaseWin = window.open("test.html", "Google", "width=600, height=600");
setTimeout(function(){
zoom(100);
}, 500);
}
function zoom(percent) {
document.getElementById('WebBrowser1').ExecWB(63,2,percent,null);
}
</script>
</head>
<body>
<input type="button" value="Open window 400% Zoomed" onclick="openwind()">
<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>
</body>
</html>
When I'm dynamically inserting the following code, I can force the page to refresh so it applies the jQuery mobile formatting.
For some reason its doesn't allow me to set the button formatting. Its really odd, because it allows the list to be dynamically inserted and the button, but i cant seem to format the button except for the name.
It can be manipulated via CSS but I want to use the jQuery API.
$('#cartList').append('<li>'
+ '<h3>' + game.Title+'</h3>'
+ '<p>' + '£' + game.Price + '</p>'
+ 'Remove'
+ '<h3 class="ui-li-aside">' + game.Format + '</h3>'
+ '</li>').trigger("create");
The jQuery Mobile Doc mentions that if new list items are added to the list or removed from it, the dividers are not automatically updated and you should call refresh() on the listview to redraw the autodividers.
Try to add: $('#cartList').listview('refresh'); after you have populated the list.
Example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#add-li-button").click(function(){
$('#listList').append("<li data-role=\"collapsible\"> <h3>New List</h3> <div data-role=\"fieldcontain\"></div> </li>").listview("refresh");
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
</ul>
<input type="button" id="add-li-button" value="add a checkbox to list1" />
</div>
</body>
</html>
I have an existing HTML file as follows-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="chatWindow.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chat Window</title>
</head>
<body>
<table>
<tr> <textarea id="chatTextArea" rows="20" cols = "80"></textarea> </tr>
<tr> <textarea id="messageTextArea" rows="5" cols="80"></textarea> </tr>
</table>
<script type="text/javascript" src ="jquery-1.7.1.js" ></script>
<script type="text/javascript" src="liveChat.js"></script>
</body>
</html>
I open this HTML in a new window from JavaScript code as follows -
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
Now, to this existing window, I want to add another field. I tried -
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
chatWindow.document.write(' Hey!! <input type="hidden" id="currentUserName" value="' + userName+ '" / > ');
But this overrode the existing HTML and so all I saw on my page was "Hey!!".
I also tried
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
var hiddenNode = chatWindow.document.createElement('input');
hiddenNode.setAttribute("type", "hidden");
hiddenNode.setAttribute("id", "currentUserName");
hiddenNode.setAttribute("value", userName);
chatWindow.document.body.appendChild(hiddenNode);
But this had no affect. When the new window opened, I checked its page source and the hidden node was not found. How to solve this problem? Please help.
You should use appendChild.
chatWindow.document.appendChild(document.createTextNode("Hey !"));
You may also use jQuery to do this more easily.
Try to assign properties instead of attributes.
chatWindow = window.open("chatWindow.html"...);
hiddenNode=chatWindow.document.body.appendChild(chatWindow.document.createElement('INPUT'));
hiddenNode.type='hidden';
hiddenNode.id='currentUserName';
hiddenNode.value=userName;
Edited:
If the browser opens the window in a new tab, it is accessible as well through chatWindow.
(Succesfully tested with Chrome, FF and IE.)
Try chatWindow.document.body.appendChild(/* [...] */);.