Bd37aa4f13db2d8b0856146305618539

Hi! I was searching a solution to print only an image linked in a page ando non the entire page! On the net i've found this solution that works very good on www.boutell.com : http://www.boutell.com/newfaq/creating/printpart.html (i'll show it on the code-box below, but remember, it's not mine but i've found it on www.boutell.com).
But there is a big problem: when i try to validate this code with the wc3 xhtml validator it founds a lot of errors. Can anyone help me to make that code valid xhtml transitional?
Or can someone suggest me a similar solution to print directly the image and not the page in wich is shown only a thumbnail of it (eventually in php language if not in javascript)?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<title>Print Image Only</title>
<script>
function makepage(src)
{
  // We break the closing script tag in half to prevent
  // the HTML parser from seeing it as a part of
  // the *main* page.

  return "<html>\n" +
    "<head>\n" +
    "<title>Temporary Printing Window</title>\n" +
    "<script>\n" +
    "function step1() {\n" +
    "  setTimeout('step2()', 10);\n" +
    "}\n" +
    "function step2() {\n" +
    "  window.print();\n" +
    "  window.close();\n" +
    "}\n" +
    "</scr" + "ipt>\n" +
    "</head>\n" +
    "<body onLoad='step1()'>\n" +
    "<img src='" + src + "'/>\n" +
    "</body>\n" +
    "</html>\n";
}

function printme(evt)
{
  if (!evt) {
    // Old IE
    evt = window.event;
  }    
  var image = evt.target;
  if (!image) {
    // Old IE
    image = window.event.srcElement;
  }
  src = image.src;
  link = "about:blank";
  var pw = window.open(link, "_new");
  pw.document.open();
  pw.document.write(makepage(src));
  pw.document.close();
}
</script>
</head>
<body>
<h1>Print Image Only</h1>
When you click on the image below, just the image should print.
And the temporary window used in the process should go away
afterwards, whether you allow the print operation to go ahead
or not.
<p>
<noscript>
<b>You have JavaScript turned off.</b> So this won't work.
That is to be expected.
</noscript>
<p>
<img src="http://www.boutell.com/boutell/images/fortune.jpg" onClick="printme(event)"/>
</body>
</html>

Refactorings

No refactoring yet !

81a73740df646bc6cccbfef6fab61ec9

Simon Hartley

January 8, 2008, January 08, 2008 14:39, permalink

1 rating. Login to rate!

The following will pass. I've added the appropriate headers, hidden the javascript in a CDATA section and made a few other tweaks. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Print Image Only</title>
<script type="text/javascript">
/* <![CDATA[ */

function makepage(src)
{
  // We break the closing script tag in half to prevent
  // the HTML parser from seeing it as a part of
  // the *main* page.

  return "<html>\n" +
    "<head>\n" +
    "<title>Temporary Printing Window</title>\n" +
    "<script>\n" +
    "function step1() {\n" +
    "  setTimeout('step2()', 10);\n" +
    "}\n" +
    "function step2() {\n" +
    "  window.print();\n" +
    "  window.close();\n" +
    "}\n" +
    "</scr" + "ipt>\n" +
    "</head>\n" +
    "<body onLoad='step1()'>\n" +
    "<img src='" + src + "'/>\n" +
    "</body>\n" +
    "</html>\n";
}

function printme(evt)
{
  if (!evt) {
    // Old IE
    evt = window.event;
  }    
  var image = evt.target;
  if (!image) {
    // Old IE
    image = window.event.srcElement;
  }
  src = image.src;
  link = "about:blank";
  var pw = window.open(link, "_new");
  pw.document.open();
  pw.document.write(makepage(src));
  pw.document.close();
}

/* ]]> */
</script>
</head>
<body>
<h1>Print Image Only</h1>
When you click on the image below, just the image should print.
And the temporary window used in the process should go away
afterwards, whether you allow the print operation to go ahead
or not.
<noscript>
<p>
<b>You have JavaScript turned off.</b> So this won't work.
That is to be expected.
</p>
</noscript>
<p>
<img src="http://www.boutell.com/boutell/images/fortune.jpg" onclick="printme(event)"
     alt="Fortune: Generosity and perfection are your everlasting goals"/>
</p>
</body>
</html>
Bd37aa4f13db2d8b0856146305618539

cuaddu.myopenid.com

January 8, 2008, January 08, 2008 15:41, permalink

No rating. Login to rate!

Thank you very much. Good work, i made my php file with it, but there are some problems.
1)There is an error: "Parse error: syntax error, unexpected T_STRING" on line 1.
- I've fixed it replacing the xml declaration with an echo.
2)Now it works perfectly with Internet Explorer, but not with Firefox: no pop-up, and not timedout also....How can it be fixed to work correctly with firefox too?
Thank you very much

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<? echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Print Image Only</title>
<script type="text/javascript">
/* <![CDATA[ */

function makepage(src)
{
  // We break the closing script tag in half to prevent
  // the HTML parser from seeing it as a part of
  // the *main* page.

  return "<html>\n" +
    "<head>\n" +
    "<title>Temporary Printing Window</title>\n" +
    "<script>\n" +
    "function step1() {\n" +
    "  setTimeout('step2()', 10);\n" +
    "}\n" +
    "function step2() {\n" +
    "  window.print();\n" +
    "  window.close();\n" +
    "}\n" +
    "</scr" + "ipt>\n" +
    "</head>\n" +
    "<body onLoad='step1()'>\n" +
    "<img src='" + src + "'/>\n" +
    "</body>\n" +
    "</html>\n";
}

function printme(evt)
{
  if (!evt) {
    // Old IE
    evt = window.event;
  }    
  var image = evt.target;
  if (!image) {
    // Old IE
    image = window.event.srcElement;
  }
  src = image.src;
  link = "about:blank";
  var pw = window.open(link, "_new");
  pw.document.open();
  pw.document.write(makepage(src));
  pw.document.close();
}

/* ]]> */
</script>
</head>
<body>
<h1>Print Image Only</h1>
When you click on the image below, just the image should print.
And the temporary window used in the process should go away
afterwards, whether you allow the print operation to go ahead
or not.
<noscript>
<p>
<b>You have JavaScript turned off.</b> So this won't work.
That is to be expected.
</p>
</noscript>
<p>
<img src="http://www.boutell.com/boutell/images/fortune.jpg" onclick="printme(event)"
     alt="Fortune: Generosity and perfection are your everlasting goals"/>
</p>
</body>
</html>
81a73740df646bc6cccbfef6fab61ec9

Simon Hartley

January 9, 2008, January 09, 2008 23:55, permalink

No rating. Login to rate!

Quote: "Now it works perfectly with Internet Explorer, but not with Firefox: no pop-up, and not timedout also"

I don't know what problems you're having, but I'll tell you my experience. I am not using the php header, I created an html file to test.
* For Firefox, I have Tab Mix Plus installed, which is set to make popups appear in a new tab. This is what happens for me when I click on the image.
* For the timeout: I don't know what you expect a timeout of 10ms to achieve.

81a73740df646bc6cccbfef6fab61ec9

Simon Hartley

January 10, 2008, January 10, 2008 00:08, permalink

No rating. Login to rate!

I've just noticed that your doctype (second line) seems to have gone missing.

Your refactoring





Format Copy from initial code

or Cancel