problem with printing selected section?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Dvorak
Forum Newbie
Posts: 11
Joined: Tue Nov 07, 2006 2:25 am

problem with printing selected section?

Post by Dvorak »

how can we print a selected section?
can anyone pls help? :?: [/syntax]
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

:?:

I have no idea what your asking.
User avatar
Dvorak
Forum Newbie
Posts: 11
Joined: Tue Nov 07, 2006 2:25 am

Post by Dvorak »

Code: Select all

<form action="" method="get">
This is my name JOHN...
<br /><br />
1.Name :
<br /><br />
2.Age :
<br /><br />
3. Gender :
<br /><br />
<input name="button" type="button" value="print" />
<input name="button" type="button" value="submit" />
</form>
how can i print without printing the buttons?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Help me help you, I have no idea what you are asking. What do you mean "print"? Send this output to a printer?

Be as specific as possible.
User avatar
Dvorak
Forum Newbie
Posts: 11
Joined: Tue Nov 07, 2006 2:25 am

Post by Dvorak »

I'm a newbie and i read from arcticle that css can enable us to print a specific part or section in a page.so in that example code i've given,if i print it directly,it will print the entire page including the two buttons.I dont want the buttons in the output,got any idea?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

OK, I see what you're asking... I think...

Send a different css file to the printer with the media attribute...

This is untested:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
   <title>Some Page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" type="text/css" href="styles/web.css">
   <link rel="stylesheet" type="text/css" media="print, handheld" href="styles/print.css">
 </head>
 <body>
  <p>This text still gets printed... but, the buttons don't...</p>
  <form method="#">
   <input type="button" name="button" value="no" class="button">
   <input type="submit" name="submit" value="Submit" class="button">
  </form>
 </body>
</html>
web.css

Code: Select all

// Web Styles
print.css

Code: Select all

form .button{
    display: none;
}
User avatar
Dvorak
Forum Newbie
Posts: 11
Joined: Tue Nov 07, 2006 2:25 am

Post by Dvorak »

I've tried this but it doesnt work.do i have to make any changes to my print button?if i didn't do the web.css page,will it affect the way the page prints?

Code: Select all

//this is the print button
<input type="button" value="Cetak" onClick="javascript:window.print();" />
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

yes.. .you need to set the class attribute to button

Code: Select all

<input type="button" value="Cetak" class="button" onClick="javascript:window.print();" /> 
And then do what I said to supply the printer with a different css file with that class's display set to none

web.css

Code: Select all

.button{
    /* Standard web styling */
}
print.css

Code: Select all

.button{
    display: none;
}
Does this make sense? Call the two css files in the head section of the html file like this...

Code: Select all

 <head>
   <link rel="stylesheet" type="text/css" href="styles/web.css">
   <link rel="stylesheet" type="text/css" media="print, handheld" href="styles/print.css">
</head>
Post Reply