Member Avatar for rukshilag

i have used the below function to open a separate page for search results to open up in - althoug it seems that the css seems to get messy what must be the problem?
is anyone willing to help?
if so please let me know ur skype add so i can show the whole code . thanks so mcuh!

function Clickheretoprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
  disp_setting+="scrollbars=yes,width=1200, height=1000, left=100, top=25"; 
  var content_vlue = document.getElementById("searchResults").innerHTML; 
  
  var docprint=window.open("","",disp_setting); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Print Results</title>'); 
   docprint.document.write('</head><body onLoad="self.print()"><center>');          
   docprint.document.write(content_vlue);          
   docprint.document.write('</center></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 
}
  • 3 Contributors
  • 2 Replies
  • 144 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for nil

You must have CSS reference in your pop up page :)

Member Avatar for Airshow

Rukshilag,

Opening a new window to handle the print() is one way to do it but not the best IMHO. Make sure you test in a variety of browsers.

Personally, I would write @media rules into the CSS on the main page to control appearance/content of screen and print separately.

Here is a typical pattern:

<style type="text/css">
/* Here - common CSS directives, for screen and print */
/* This block will be the majority of your CSS */
body { ..... }
#navbar { ..... }
#etc1 { ..... }
#etc2 { ..... }
#myContentDiv { ..... }
#printHeader { ..... }
#printFooter { ..... }

@media screen {
	#navbar { display: block; }
	#etc1 { display: block; }
	#etc2 { display: block; }
	#myContentDiv { font-family:arial; font-size: 12pt;  }
	#printHeader { display: none; }
	#printFooter { display: none; }
	/* other CSS modifiers for screen */
}
@media print {
	#navbar { display: none; }
	#etc1 { display: none; }
	#etc2 { display: none; }
	#myContentDiv { font-family:times; font-size: 13pt;  }
	#printHeader { display: block; }
	#printFooter { display: block; }
	/* other CSS modifiers for print */
}
</style>

@media rules are supported in all CSS2-compliant browsers (ie just about everything in use today) but again, test, test, test.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.