script tag for print page link?

wolf99 · 03-08-2008, 08:11 AM

Hi All

I'm working on bringing my site up to W3C accessibility standards so where I have a link to print the page that uses JS

Code:

<a href="#" onclick="window.print();return false;"><img src="images/print.png" alt="" />&nbsp;print page</a><br />

how do I add the <script> tag to this? assume i also need to use document.write, but am not familiar with js and have tried a few combinations with no luck

thanks for help

DJMaze · 03-08-2008, 11:48 AM

Code:

<img src="images/print.png" alt="" />

That's no accessibility. How would a blind man know what the image contains?

Right:

Code:

<img src="images/print.png" alt="printer" />

As for the script tag: huh? Your code is 100% valid XHTML.
More background info needed.....

wolf99 · 03-12-2008, 11:12 AM

yeah I know the empty alt"" is pretty bad, but I have the text next to the image as well so the image is like a clickable icon not an actual button link

that means if the image is not displayed and there is alt text it renders as
"print page print page" a bit confusing.

anyhoo.

I ran the site thru a accesibilty checker that checks a little bit more than is the XHTML valid.

It said JS should be inside <script> tags so that a <noscript> alternative can be presented should the user be on a platform that cannot access JS

Thing is as, I usually try to design very minimal purist code, I hate using JS and have never really learnt it bar the few copy and pastes from tutes etc

So I need to be able to present (if JS is available) a link that may print the page if clicked and (if JS not available) otherwise not show a link at all.

Not showing the link I think is the best thing for non JS users as they can still use the print command in their client and chances are they have a non-standard set up so may not want to print direct with default print settings.

phew*

thanks for the input

wolf99 · 03-12-2008, 11:18 AM

came across this:

Quote:

document.write('<a href="javascript:window.print()">Print this page<\/a>');

Using innerHTML instead should make it possible to move the script outside the body and should also work in XHTML.

but don't know what they mean about the innerHTML thing, which of course would be what I need
(i'm using XHTML strict)

sde · 03-12-2008, 02:13 PM

by innerHTML they mean use javascript to target an element in the page. your javascript can exist in the head. the code can get a little messy if you are writing it from scratch to support all browsers, but you could use a js library like JQuery and do it like this.

HTML Code:

<html> <head> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="myscript.js" ></script> </head> <body> <p>My Web Page</p> <div id="print_div"></div> </body> </html>

myscript.js

HTML Code:

$(document).ready(function() {
  $('#print_div').html('<a href="javascript:window.print()">Print this page</a>');
});

If JS is not supported, nothing will be injected in print_div.

**edited**

wolf99 · 03-13-2008, 10:12 AM

this only works for block level elements yeah?

no matter just being fussy.

will check if it validates.

Thanks very much folks

sde · 03-13-2008, 10:43 AM

i don't understand what 'block level elements' refers to.

wolf99 · 03-13-2008, 12:21 PM

it validates good

ta again.

i mean because you need to reference an id or otherwise specify which href to apply this to

the link must be in its on <div> or <p> or other element that has properties to identify them in this way. usually refered to as block level elements because they they are usually displayed as independent "blocks" separated from other blocks by vertical space and typically contain inline elements and other block-level elements.

in HTML4 they are

* ADDRESS - Address
* BLOCKQUOTE - Block quotation
* CENTER - Centered block
* DIR - Directory list
* DIV - Generic block-level container
* DL - Definition list
* FIELDSET - Form control group
* FORM - Interactive form
* H1 - Level-one heading
* H2 - Level-two heading
* H3 - Level-three heading
* H4 - Level-four heading
* H5 - Level-five heading
* H6 - Level-six heading
* HR - Horizontal rule
* ISINDEX - Input prompt
* MENU - Menu list
* NOFRAMES - Frames alternate content
* NOSCRIPT - Alternate script content
* OL - Ordered list
* P - Paragraph
* PRE - Preformatted text
* TABLE - Table
* UL - Unordered list

u prob knew most of that anyhoo overkill. It dont matter too much now as it looks good anyhoo