|
JavaScript - How Can I Print The Document Without Printing Together The Image?
Hi,
I'm using window.print() to print a document. This is the coding : <th colspan="2" align="right"><a href="JavaScript:window.print();" onclick="return verify()"><img src="image/image.gif" width="25" height="20" /></a></th> How can i print the document without printing together the image? Or is there any other way that you guys know? Thanks Similar TutorialsHello gurus I have a page that needs to be printed 3 times. Window.Print() is such a great function, but I can't change the default number of pages to 3 with it. Is there anyway to do this? I was thinking maybe if it's a way not showing the print page at all, just printing after the button is hit, I could put it in a loop and print 3 times. Do you guys know of any remedy? Help this poor mortal in here Hey there, I've scrollable screen. I'm having a print button on it and "window.print()" function is called on its onclick event. My problem is it only prints the "viewable" part of the screen, not the whole screen. P.S. I'm using IE7 and it must work for IE7 atleast (for rest I'm not bothered). Thanks in anticipation. Hi, Ours is a web based application. In a particular use case, print-receipt; we pull up data from database and display it a new window ... followed by a javascript::window.print() To print the content. But this prints the browser window - in graphic mode. The target printer, attached to the browser machine is a Dot matrix printer; and consumes a lot off time to print a single window (because of the graphic nature) Can the printing be done in text mode ? thank you. jeevan Hi, Is there a way to print (sending to printer) the partial contents within the HTML file Ex: Can i print content of div2 only?. <html> <body> <div id='div1'> .... </div> <div id='div2'> .... </div> </body> </html> Can you please let me know your inputs. Thanks.. Filename: front.htm Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js, styles.css --> <title>The Ridgewood Herald Tribune</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="random.js" type="text/javascript"></script> <script src="ads.js" type="text/javascript"></script> </head> <body> <div id="links"> <h1>Contents</h1> <p class="section">Main</p> <p class="linksub"> <a href="#">Home</a><br /> <a href="#">Subscriptions</a><br /> <a href="#">Contact Us</a><br /> <a href="#">News Sources</a><br /><br /> </p> <p class="section">News</p> <p class="linksub"> <a href="#">Local</a><br /> <a href="#">National</a><br /> <a href="#">International</a><br /> </p> <p class="section">Sports</p> <p class="linksub"> <a href="#">Baseball</a><br /> <a href="#">Basketball</a><br /> <a href="#">Football</a><br /> <a href="#">Golf</a><br /> <a href="#">Hockey</a><br /> <a href="#">Miscellaneous</a><br /> </p> <p class="section">Opinion</p> <p class="linksub"> <a href="#">Editorials</a><br /> <a href="#">Columnists</a><br /> <a href="#">Letters</a><br /> </p> <p class="section">Classifieds</p> <p class="linksub"> <a href="#">Employment</a><br /> <a href="#">For Sale</a><br /> <a href="#">Personals</a><br /> <a href="#">Real Estate</a><br /> <a href="#">Wanted</a><br /> </p> <p class="section">Other</p> <p class="linksub"> <a href="#">Business</a><br /> <a href="#">Weather</a><br /> <a href="#">Entertainment</a> </p> </div> <div id="main"> <div id="ads"> <script type="text/javascript"> /* generate a random integer from 1 to 5 */ var rNumber = randInt(5); /* description of the random ad */ var rAd = adDescription(rNumber); /* URL of the random ad */ var rLink = adLink(rNumber); document.write('<a href="'+rLink+'">'); document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />); document.write(adLink); document.write("</a>"); </script> </div> <div id="request"><a href="#">Contact us today to place your ad</a></div> <p id="logo"> <img src="logo.jpg" alt="Ridgewood Herald Tribune" /> </p> <p id="fp"> <img src="fp.jpg" alt="" /> </p> <h2>Park Opens</h2> <p id="intro">The <i>Adventure Island</i> theme park opened its doors on Monday near Ridgewood. The park, one of the biggest in New Jersey, drew large crowds, but the long lines didn't deter anyone. "I've been watching them put up the rides over the last year, it's really exciting to finally get inside the gates!" said Ridgewood resident, Denise Brooks.</p> <p class="cont"><a href="#">story continues on page 2...</a></p> <address id="footer"> <b>Ridgewood Herald Tribune</b> ° 10010 Atwood Ave. ° Ridgewood, NJ 07451<br /> Phone: (201)555-1101 ° Fax: (201)555-1102 </address> </div> </body> </html> Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array. Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help. ORIGINSlide.js Code: /*******************************************
* *
* ORIGIN Background Image SlideShow *
* Build 1.090.350.09 *
* *
* @Author: CMBSystems (Chris Bearcroft) *
* @Copyright: CMBSystems *
* @Created: 11/6/2010,1:24 AM (GMT) *
* *
*******************************************/
(function($){
$.ORIGIN = { // Starting The ORIGIN Class
Background: { // Starting The Background Sub-Class
Default: 0, // Default Array Key ID
Element: [], // Creating The Object For The Background Element
Slide: function() { // Starting The Slide Function
// Setting-Up The Element For Use In Update
$.ORIGIN.Background.Element = arguments[0];
// Updating The Document Body Background Image
setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
},
Preload: function(img) { // Starting The Preload Function
// Preload The Given Image Ready For Displaying
var loadIMG=new Image();
// Setting The Source For The Given Image
loadIMG.src=img;
},
Update: function() { // Starting The Update Function
if($.ORIGIN.Background.Element.Images !== undefined) {
if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
// Set Default Value As 0
$.ORIGIN.Background.Default = 0;
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
} else {
// Set Default Value As Current Array Key ID
$.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
}
// Set Document Body Background As The New Image
document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
}
}
}
};
})(window);
Hoe to use:- Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
"Timer":5000,
"Images": [
"images/1.jpg", // !IMPORTANT - Same image as the default background image.
"images/2.jpg",
"images/3.jpg"
]
});
</script>
</head>
<body>
</body>
</html>
If anyone can help me please do, Thank You DJCMBear ♫♫ Hi I'm trying to use the following javascript to print a <div> on a web page: Code: function CallPrint(strid)
{
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','left=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
and clicking this button calls the function Code: <BUTTON onClick="javascript:CallPrint('div_tlush029')">
Where 'div_tlush029' is the id of the div to print. The <div> includes a payslip (with background image) in Hebrew. If I select the area (mouse click and mark area) and print the selection everyrhing prints OK. Using the above javascript I have no background images although they're included in the <div> and the text is formatted LtR instead of RtL. Any ideas how I can get the <div> to print correctly using javascript. (code snippets appreciated) Thanks David - "paddling upstream searching for the source" My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! Hi there everyone, My question is one that has been asked many times before always with the same answer. I'm hoping that all the new developments with JQUERY and Prototype that a method would have come about on how to print an external HTML file without first opening it? So you click it and it prints without having to use frames, redirects etc... Any ideas? Quote: var c739=new Array ("C#739","Brick Township","125 Route 65","Brick","NJ","08723","Phone #","1234569"); Quote: var c741=new Array ("C#741","Brick","125 kool st ","copolla","NJ","07831","Phone #","6957891"); Quote: document.write(c739[1]); I need help for the above code. I created a simple Array which would then be growing too soon. I need to add a prompt : store : c739 then all the elements would show as: C#739 Brick Township 125 Route 65 Brick, NJ 07831 Phone# 1234569 Please help. Thank you in advance. Hey. I have been pulling out my hair trying to do this. I am printing out the contents of a DIV tag but it does not print the css with it. Just the basic text For example: .testDiv { border: 1px solid #0F0; margin-right: 300px; text-decoration: underline; font-weight: bold; } The print does not change the text according to the css. Why is this? Thanks in advance for any help. Marc I have a routine that prints a textarea: Code: function printInput(f){
var ifr = window.frames['printFrame'];
if (ifr){ //print the content of the invisible iframe
ifr.document.getElementById('content').innerHTML=f.WRKNOTEPAD.value.replace(/\n/g,'<br />');
ifr.focus();
ifr.print();
}
else { //print by opening a new window and then closing it
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.WRKNOTEPAD.value.replace(/\n/g,'<br />');+'</div></body></html>'
var win = window.open('','_blank','menubar,scrollbars,resizable');
win.document.open();
win.document.write(html);
win.document.close();
}
}
function writeContent(objIframe){
var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body><div id="content"></div></body></html>'
objIframe.document.write(html);
objIframe.document.close();
}
This works nicely when the button is of input type: Code: <form name="FORMNOTES"><textarea name=WRKNOTEPAD cols=140 rows=20 wrap=yes style=\"font-family: Arial; font-size: 10pt\"></textarea><div> <br> <input type="button" value="Print notepad" onClick="printInput(this.form)"> </div> <iframe name="I1" id="printFrame" src="javascript:parent.writeContent(this)" width="1" height="1"></iframe></form> But when I try to make the input button an img button it errors: Code: <img border="0" src="/images/printnotes.gif" onClick="printInput(this.form)"> The error is "WRKNOTEPAD is null or not an object". Is there any way to overcome this and use an image to achieve the same thing? I'm thinking that the image is not an element(?) - is that the reason? Thanks for any light on this. Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript">
var localSearch = new GlocalSearch();
function usePointFromPostcode(postcode)
{
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
}
document.write(resultLat+resultLng);
//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");
});
localSearch.execute(postcode + ", UK");
}
</script>
TIA Stew Hi Guys, Using this code i have managed to get the query value from the url. code: PHP Code: <script type="text/javascript"> // Check referrer function getQuerystring(key, default_) { if (default_==null) default_=""; key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"); var qs = regex.exec(window.location.href); if(qs == null) return default_; else return qs[1]; } var refVal = getQuerystring('r'); </script> <div id="div-regForm"> <div class="form-title">Sign Up</div> <div class="form-sub-title">Earn points & then swap for prizes! FREE!</div> <form id="regForm" action="sign-up.php" method="post"> <table> <tbody> <tr> <td><label for="fname">First Name:</label></td> <td><div class="input-container"><input name="fname" id="fname" type="text" value="<?php print $_POST['fname']; ?>" /></div></td> </tr> <tr> <td><label for="lname">Last Name:</label></td> <td><div class="input-container"><input name="lname" id="lname" type="text" value="<?php print $_POST['lname']; ?>" /></div></td> </tr> <tr> <td><label for="email">Your Email:</label></td> <td><div class="input-container"><input name="email" id="email" type="text" value="<?php print $_POST['email']; ?>" /></div></td> </tr> <tr> <td><label for="pass">Password:</label></td> <td><div class="input-container"><input name="pass1" id="pass1" type="password" value="<?php print $_POST['pass1']; ?>" /></div></td> </tr> <tr> <td><label for="pass">Confirm Password:</label></td> <td><div class="input-container"><input name="pass2" id="pass2" type="password" value="<?php print $_POST['pass2']; ?>" /></div></td> </tr> <tr> <td><label for="cntry">Country:</label></td> <td><div class="input-container"><select name="cntry"><?php foreach($countryArray as $country) { print "<option value=\"$country\">$country</option>"; } ?></select></div></td> </tr> <tr> <td> </td> <td><input name="r" type="hidden" value="<script type="text/javascript">document.write(refVal);</script>" /><input type="submit" class="greenButton" name="submitSignUp" value="Sign Up" /></td> </tr> </tbody> </table> </form> </div> in this part value="<script type="text/javascript">document.write(refVal);</script>" /> i can't seem to put the value in the hidden field it print fine in the code just above. thanks for any help guys Graham I have the following code attached that gives me a prime number. I can't seem to put the logic behind having this code print from an alert the prime numbers from 1-100. Of course, this code is only giving me "the" prime number. I just don't know where to begin, or how to store each number. Array maybe?
Code: var finding_primes = function() {
var number = 31, prime = true;
for ( var i = 2; i < number; i++ ) {
if ( number % i == 0 ) prime = false;
}
if (prime) {
alert( number + " is prime.");
} else {
alert( number + " is not prime.");
}
}
When I use the following script in my web page I do not get a print out. Can anyone tell me what is wrong? <!-- Begin // Get today's current date. var now = new Date(); // Array list of days. var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Array list of months. var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December'); // Calculate the number of the current day in the week. var date = ((now.getDate()<10) ? "0" : "")+ now.getDate(); // Calculate four digit year. function fourdigits(number) { return (number < 1000) ? number + 1900 : number; } // Join it all together today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear())) ; // Print out the data. document.write(today); // End --> Hello. Im trying to put in a Popup printer-friendly page on my site. the Popup works great in Chrome and FireFox. It even works in IE - except im getting a black bg instead of the white i get in the other browsers. Also the print command is not working in Firefox or IE. Im running FireFox 8 and IE 9. heres the code for the Popup: Code: <script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
</head>
<div>
<img src="IMAGES/BidsCouponSmall-text.png" />
<br />
<br />
<a href="printcoupon.htm" target="coupon"
onclick="window.open('printcoupon.htm','coupon','height=500,
width=400,toolbar=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no'); return false;"
>Click HERE To Print</a>
<br />
</div>
To avoid cluttering of this post, the page im having printing problems with can be found he http://bidsservice.net/printcoupon.htm its all html, css, and JS. no server-side code. |
|||||||