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.
COheres 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 OneOriginally 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>Thanks alot for getting back with me on this.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 OneOriginally 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 satisfiedI 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.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"?<style media="print" type="text/css">
.noprint {display:none;}
textarea {border:0;}
</style>
<style>
Hope this works!
Code One
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.
COheres 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 OneOriginally 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>Thanks alot for getting back with me on this.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 OneOriginally 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
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.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"?<style media="print" type="text/css">
.noprint {display:none;}
textarea {border:0;}
</style>
<style>
Hope this works!
Code One