"Dennis Munding" <mail@invalid.dk> writes:
> Jeg kunne godt tænke mig at udskrive en bestemt id, når brugeren
> klikker på et link.
Som jeg forstår dine andre svar, så vil du KUN have det element
udskrevet, og ikke andet.
Det allernemmeste er at åbne et nyt vindue med kun det ønskede
i. Det kræver dog nok en tur til serveren.
Alternativt kan man have det der skal udskrives i en iframe, og
så udskrive den. Det kræver så frames, som ellers ikke er en
god ide.
Hvis man insisterer på at fikse det så kun div'en er synlig på
udskrift, så skal der mere snedighed til.
> <div id="print_version">
> <p>En masse tekst...</p>
> </div>
>
> <a href="javascript:Udskriv()">Udskriv</a>
Man skal aldrig(!) skrive "javascript:".
Når man laver links af denne type, så tror browseren at man er
på vej væk fra siden, og nogle ting holder op med at virker.
Skriv i stedet:
<a href="sideDerForklarerAtJSSkalVæreSlåetTil.html"
onclick="udskriv();return false;">Udskriv</a>
> Kan man på en eller anden måde flette id'et på min div (print_version)
> ind i scriptet, så det kun er indholdet af netop den div, der bliver
> udskrevet?
Prøv:
<style type="text/css" media="print">
.nonprint { visibility: hidden;
}
.print {visibility: visible;
}
</style>
<script type="text/javascript">
function printDiv(id) {
var div = document.getElementById(id);
document.body.className = "nonprint";
div.className = "print";
window.print();
div.className = document.body.className = "";
}
</script>
<body> ...
<div id="foo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<input type="button" value="Udskriv" onclick="printDiv('foo')">
...
</body>
Det har så det kedelige problem at det ikke virker i Internet Explorer.
En mere hårdhændet metode er (med samme html som ovenfor):
<style type="text/css" media="print">
.nonprint { display: none; }
</style>
<script type="text/javascript">
function printDiv(id) {
var div = document.getElementById(id);
addSiblingsClass(div,"nonprint");
window.print();
removeSiblingsClass(div,"nonprint");
}
function traverseSiblings(elem, action) {
while (elem != document.body) {
var parent = elem.parentNode;
for(var chld = parent.firstChild; chld; chld = chld.nextSibling) {
if (chld != elem) {
if (chld.nodeType == 3) {
var span = document.createElement("span");
parent.insertBefore(span,chld);
span.appendChild(chld);
chld = span;
}
action(chld);
}
}
elem = parent;
}
}
function addSiblingsClass(elem, className) {
traverseSiblings(elem, function(sibling) {
if (sibling.className) {
var classes = sibling.className.split(/\s+/);
classes.push(className);
sibling.className = classes.join(" ");
} else {
sibling.className = className;
}
});
}
function removeSiblingsClass(elem, className) {
traverseSiblings(elem, function(sibling) {
if (sibling.className) {
var classes = sibling.className.split(/\s+/);
for(var i = 0; i < classes.length;) {
var cl = classes[i];
if (cl == className) {
classes.splice(i,1);
} else {
i++;
}
}
sibling.className = classes.join(" ");
}
});
}
</script>
Den finder alle elementer der er ved siden af div'en, på alle niveauer
opad i HTML'en, og siger at de ikke skal printes. Så fjerner den det
igen efter at man har printet.
Jeg vil stadig anbefale en server-side-løsning, hvor man sender en ny
side med bare det der skal printes. Det er uligt meget nemmere.
Held og lykke
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:
http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'