Dölj utskriftssymbol vid utskrift

JavaScriptur Javascript

7 svar · 418 visningar · startad av daniel_ra 17 aug. 2005

daniel_raMedlem sedan jan. 2002381 inlägg

Frågan17 aug. 2005 08:45#1

Jag skulle behöva dölja en utskriftsbild vid utskrift.

har alltså an bild med href javascript:window.print() på sidan.

vill bara dölja denna bild då jag skriver ut.. hur göra??

Peter SMedlem sedan dec. 20025 483 inlägg

17 aug. 2005 09:05#2

Jag tror inte det finns något bra sätt för detta, om du vill visa elementet igen när utskriften är klar. IE har visserligen onbeforeprint och -afterprint, vilka skulle kunna användas så här:

function p(){
    if (document.all && !window.opera){
        var elm = document.all["elm"];

        window.onbeforeprint = function(){
            elm.style.visibility = "hidden";
        }

        window.onafterprint = function(){
            elm.style.visibility = "visible";
        }
    }

    window.print();
}

<img id="elm" onclick="p()"...

Nu göms elementet för IE-användare vid utskrift och visas igen när det är klart. I andra webbläsare skrivs hela sidan ut.

En annan lösning kan vara att öppna ett nytt fönster där printbilden är gömd.

Om det intet spelar någon roll ifall elementet visas igen efter utskrift, går det ordna för de flesta webbläsare.

zcorpanMedlem sedan dec. 20042 245 inlägg

17 aug. 2005 09:20#3

CSS?

@media print {
 #elm { display:none; }
}

Peter SMedlem sedan dec. 20025 483 inlägg

17 aug. 2005 09:24#4

Ah, didn't think of that! :bire

daniel_raMedlem sedan jan. 2002381 inlägg

17 aug. 2005 11:01#5

okay, jag förstår idéen men hur använder jag mig av zcorpans kod?

Peter SMedlem sedan dec. 20025 483 inlägg

17 aug. 2005 11:13#6

På sidan som skall skrivas ut:

<head><style type="text/css">
@media print {
    [b]#print[/b] { display:none; }
}
</style>

<img [b]id="print"[/b]>

Om utskriftsbilden ligger inom en <a>-tagg, sätter du id="print" på den.

zcorpanMedlem sedan dec. 20042 245 inlägg

17 aug. 2005 11:14#7

Om du har en extern stilmall lägger du in koden där helt enkelt. Alternativt kan du lägga följande i HEAD i ditt HTML-dokument:

<style type="text/css" media="print">
 #elm { display:none; }
</style>

Sen sätter du id="elm" (du kan byta ut "elm" till nåt lämpligare om du vill) på din knapp. :)

[ins] Äh, man är inte tillräckligt snabb! ;) [/ins]

daniel_raMedlem sedan jan. 2002381 inlägg

17 aug. 2005 11:25#8

guld.. tack för hjälpen