14.05.2009 - geschrieben von Marvin in Tutorials
3 Druckversion mit CSS und jQuery
Ich zeige euch im Folgenden kurz, wie man eine einfache Druckversion der aktuell geöffneten Seite realisieren kann. Dazu nutze ich jQuery’s append Funktion um ein neues Stylesheet in den header zu integrieren. Die dort eingetragenden Eigenschaften überschreiben die aktuellen Werte, da die neue CSS-Datei an das Ende des HTML Headers eingebunden wird.
Der jQuery Code
$("a#print").click(function() {
$('head').append('<link rel="stylesheet" href="print.css" type="text/css" />');
});
Das wars dann auch schon. Das Einbinden passiert in meinem Beispiel durch ein Klick auf den Link mit der id="print".
Jetzt noch ein wenig HTML & CSS
Den Link wie folgt auf der Seite (z.B. im Footer) platzieren:
<a id="print">Drucken</a>
Im Stylesheet print.css blenden wir nun Elemente wie z.B. Header, Sidebar, Footer und Bilder aus, da diese ja bei der Druckansicht nicht benötigt werden. z.B. so:
/* Unser Druckstylesheet */
body { background:none;}
#header, #sidebar, #footer {display:none;}
Für alle die es noch schöner machen wollen, können für den Fließtext noch eine Serifenschriftart, für bessere Zeilenbildung nehmen und die Breite des Textcontainers verbreitern (100%). So, viel Spass damit :)
Tags: cssdruckversionjquery
3 Kommentare
Trackback - RSS Kommentare zu "Druckversion mit CSS und jQuery"
1 Thomas
schrieb am 14. Mai 2009 um 20:40
Hmmm interessanter Ansatz! Aber machts nicht mehr Sinn, das Stylesheet direkt und dann mit meda=”print” einzubinden? Dann ist das nämlich auch für User verfügbar die JavaScript vielleicht ausgeschaltet haben.
2 Marvin
schrieb am 14. Mai 2009 um 21:48
ja, ist schon klar, aber so bekommt man halt schnell eine schöne Vorschau. Man könnte aber auch einfach das bereits eingebundene
media="print"Stylesheet per Styleswitcher anzeigen lassen ;) Aber allem in allem war das eh nur als Spielerei gedacht :)3 Thomas
schrieb am 14. Mai 2009 um 22:05
Joa das stimmt, das mit der Vorschau is natürlich praktisch :-) Ich glaub das mit dem Styleswitcher is die elegantere Lösung, weil man dann n Backup für die JavaScript-Deaktivierer hat.