print the textarea ONLY [Archive]

Click to See Complete Forum and Search --> : print the textarea ONLY

Code One

03-04-2003, 02:35 AM

Hello,
I have a page that has a textarea in it and I would like to give the viewers the oppurtunity to type something into the textarea and then be able to print the text within the textarea ONLY, I would like to save them ink and time by eliminating the rest of the page. I know I need to use CSS and media=print, or something and then make everything but the textarea invisible, but I am clueless when it comes to working with CSS, so if anyone feels like setting up a simple code that I could use to incorporate easily into my existing page that would be great!!!
thanks
Code One

p.s. a full working model would be idea for me, something I can actually execute outside of my page to first get a grasp of how it will incorporate. I would appreciate it.
CO

Code One

03-04-2003, 02:55 AM

heres what I did for future questions on this topic . . .

<body>
<style media="print" type="text/css">
.noprint {display:none;}
</style>
</head>
<body>
<p class="noprint">blah blah blah</p> <--this wont print--|
<p><textarea width=100 height=200></textarea></p> <--this will print--|
</body>

Note*:this will print just the textarea but it will include the box outlining the text within.

------------------------------------------------------------------>
Now for my new question: How do I eliminate that from happening?
Code One

Stefan

03-04-2003, 08:22 AM

Originally posted by Code One

Note*:this will print just the textarea but it will include the box outlining the text within.

------------------------------------------------------------------>
Now for my new question: How do I eliminate that from happening?
Code One

<style media="print" type="text/css">
.noprint {display:none;}
textarea {border:0;}
</style>

Code One

03-04-2003, 03:19 PM

Thanks alot for getting back with me on this.

Code One

03-04-2003, 04:10 PM

ok that script does eliminate the textarea border, but doesnt get rid of the scroll bar, please if you dont mind, how do I do that?
Im sorry to keep bothering you man,
Code One

Stefan

03-05-2003, 04:57 AM

Originally posted by Code One
ok that script does eliminate the textarea border, but doesnt get rid of the scroll bar, please if you dont mind, how do I do that?
Im sorry to keep bothering you man,
Code One

No problem, if I would have tested the code I would probably have noticed myself :)

To get rid of the scrollbar (on the textarea?) you should be able to do this

<style media="print" type="text/css">
.noprint {display:none;}
textarea {border:0; overflow:hidden;}
</style>

Just take care to ensure that the textarea is large enough fit the content, or it will be removed.

Alternativly overflow:visable; could work too.
And don't be afraid to get back again if you are not compleatly satisfied :)

Code One

03-05-2003, 03:35 PM

I have a similar code in now, and your right if the text extends the lenght of the textarea the printer clips the access, is there a way to avoid that besides making the area larger?
Code One

P.s. thanks for all the help.

stevesee

03-31-2003, 01:23 PM

Hello,

How would I incorporate this into an existing linked style sheet? My CSS file looks like this:

.note {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #810000;
text-decoration: none;
}
.bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.subhead {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
a:link {
color: #810000;
text-decoration: none;
}
a:hover {
color: #C80000;
text-decoration: none;

}
a:visited {
color: #440000;
text-decoration: none;

}
.subheadWhite {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;

}
.hrRed {
color: #820000;
}
.sectionheadWhite {

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.sectionhead {

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.noteBlack {

font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
.verysmall {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
text-decoration: none;
}

Now obviously I could put in a

.noprint {
{display:none;}
}

But how do I add in the media="print"?

Code One

03-31-2003, 10:25 PM