print-funktion

Ja, men er det popup'en du skal printe ?-)

<button onclick="self.print();">Udskriv vindue</button>

Hmm...det var måske mere generelt bare :D
Hvis nu jeg har et print.gif billede jeg gerne vil lave sådan at når man klikker på så printer man den side ud som man er på....hvordan skal det så se ud ?

Mange muligheder, den simpleste:

<img src="print.gif" onclick="self.print();">

Okay.....nogle at foretrække frem for andre af en eller anden grund ??
Jeg prøver lige dine forslag senere i aften...

-- ovenstående er alt rigeligt, men der kan være mange grunde til at gøre det anderledes, f.eks. at alt navigationsstoffet og f.eks. print-knappen er inderligt overflødigt på en udskrift, så en ofte set metode er at lave et specielt print-vindue, som man lægger en printer-venlig udgave ind i og så printer ...

-- det eneste man så skal være opmærksom på er, at hvis et andet vindue skal printes skal man aktivt sætte focus på det før print-metoden kaldes:

window.printIframe.focus();
window.printIframe.print();

Den nemmeste måde at lave en 'printervenlig' udgave af din side er at skrive et stylesheet forbeholdt den printede udgave hvori du skjuler unødvendige elementer.

--eksempel--

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css:

div#menu {
  display: none;
}

--/eksempel--

pas på med at lægge en onclick eventhandler på et img-element, det er ikke pæn markup og principielt forkert.

<a href="java script:self.print();" title="Udskriv denne side."><img src="print.gif" border="0" alt="Printerikon." /></a>

mvh
lerchedahl

>>lerchedahl

-- hvad er der galt i at lægge en onclick på et img-element ?-)

Hvis du kigger på: http://www.w3.org/TR/html401/struct/objects.html#edef-IMG, vil du se, at onclick tilfældigvis ligger forrest i listen over events, som hører til på et img !-)

Det værste ved at gøre sådan er, at ældre browsere ikke forstår den, så hvis din målgruppe er brugere, som notorisk har computere fra før 1995 skal man absolut fravælge at bruge events ...

-- og iøvrigt er det helt rigtigt, at anbefale et printer-stylesheet, det er absolut den mest elegante metode, og den nemmeste implementering er vel noget i denne stil i det almindelige stylesheet:

@media print{
*{visibility:hidden;}
.print{visibility:visible;}
}

-- og så tilføje print-klassen til de elementer, som skal udskrives:

<div id="menuDiv" class="menu"></div>
<div id="content" class="content print">Indhold</div>

>>roenving

onclick ligger forrest i listen over events man kan tillægge et <img>-tag af en temlig simpel årsag; det er kategoriseret alfabetisk. Jeg ved godt at man `kan`gøre det, jeg mener bare at det ikke er pæn markup. Jeg sagde også at det principielt er forkert, hvilket jeg også mener det er i et brugervenlighedsmæssigt henseende.

Hvis du absolut vil undgå et anchor (af en eller anden uforklarlig grund) og altså lægge din event handler på dit <img>-tag vil jeg da så kraftigt anbefale også at give det en cursor:hand; for at bevare en smule brugervenlighed.

Med hensyn til din mere `elegante` måde at inkludere styles til printformat vil jeg altid anbefale ikke at angive styles inline, simpelthen af den årsag at det altid er en fordel at separere struktur og layout.

<style type="text/css" media="screen">@import "screen.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css">

mvh
lerchedahl

en anden ting:

Hvis man ønsker at fjerne f.eks. en menu i toppen af siden fra sin printede version er man næppe interesseret i at der, på sin udskrift, optræder et blankt mellemrum i toppen at papiret, hvorfor display:none; er at foretrække over visibility:hidden;.

mvh
lerchedahl

Øeh, hvorfor er det ikke pæn mark-up ?-)

'Principielt' af brugervenlighedsmæssige årsager ???

-- og jeg vil undgå ekstra unødvendige tags til enhver tid !-)

-- og jeg ville finde på at lægge den cursor på, som findes i css-standarden (cursor:pointer;) og så overveje, om jeg også henvendte mig for alvor til brugere af ældre M$-browsere ...

-- og så kan det jeg skrev som style inkluderes i et stylesheet uanset hvorfra det kommer ind i dokumentet !o]

-- og når man lægger eksempler lægger man eksempler ...

-- ikke fuldt færdige applikationer, for hvad ville du så skrive i print-klassen ?-)

display:run-in; ?-)
display:inline;
display:table-footer-group;

Hehe...I har tabt mig for længe siden, men det er meget spændende....

Men smid et svar så skal i få point...I løste mit problem.

Et tillægsspørgsmål...findes der en attribut til de link fx.

<img src="print.gif" onclick="self.print();">

der gør at pilen ændres til en hånd så man også visuelt kan se at det er et link ?

Det var det med style cursor:

<img src="print.gif" onclick="self.print();" style="cursor:hand;cursor:pointer;">

-- og velbekomme '-)

-- og tak for point ;~}