[JavaScript] Druckbaren bereich festlegen

[Newbie44]

Hallo,

ihr kennt das sicher bei Wikipedia wenn man was ausdrucken will, dann wird nicht die ganze seite gedruckt sondern nur der eigentliche artikel. wie haben die das gemacht? weiss das jemand? wie mache ich selber sowas?

hat das hier jemand schon mal gemacht?

bin gespannt auf antworten

gruß

sebby

[Chewie]

Was hat das ganze mit Java zu tun?

[sakura]

Zitat:

Zitat von Newbie44

ihr kennt das sicher bei Wikipedia wenn man was ausdrucken will, dann wird nicht die ganze seite gedruckt sondern nur der eigentliche artikel. wie haben die das gemacht? weiss das jemand? wie mache ich selber sowas?

Nö, kenne ich nicht, da ich Wikipedia nicht nutze. Aber um Deine Frage zu beantworten: schau Dir mal die Stylesheets an, da wird es einen Bereich für das Drucken geben ;-)

...:cat:...

[Newbie44]

das diese druckbuttons immer mit java aufgerufen werden, ruft man drucken normal über datei auf wird die ganze seite gedruckt das ist ja das problem, ich möchte das leute nur teile ausdrucken können und nicht immer alles auf einmal drucken müssen.

[Chewie]

Du meinst JavaScript, das hat mix Java nur marginal was zu tun :roll:

Wie gesagt, eine Methode sind spezielle Druck-Stylesheets und eine andere das serverseitige generieren der Druckversion. Dafür kannst du dann sogar Java einsetzen :zwinker:

[sakura]

Also wenn ich hier über Datei drucken gehe, dann wird auch nur der Artikel gedruckt.

...:cat:...

[sakura]

Btw, folgende Zeile im Header bestimmt das Druck-Style-Sheet bei de.wikipedia.org.

Code:

<link rel="stylesheet" type="text/css" media="print" href="/skins-1.5/common/commonPrint.css" />

...:cat:...

[Chewie]

Zitat:

Zitat von sakura

Also wenn ich hier über Datei drucken gehe, dann wird auch nur der Artikel gedruckt.

...:cat:...

Das ist doch der Fall, wenn ein Stylesheet zum Drucken verwendet wird. Wenn das aktuelle Stylesheet aber einfach per JavaScript bei einem Buttonklick ausgetauscht wird, dann bewirkt das Aufrufen der Druckvorschau keine Änderung der Ansicht.

Ist es nicht so, dass der liebe IE dieses Druck-Stylesheet nicht beherrscht (und nur den Wechsel per JS), oder hab ich da was falsc in Erinnerung?

[Newbie44]

aha,

danke für die antwort ja in diesem stylsheet steht das:

XML-Code:

/*
** MediaWiki Print style sheet for CSS2-capable browsers.
** Copyright Gabriel Wicke, [url]http://www.aulinx.de/[/url]
**
** Derived from the plone ([url]http://plone.org/[/url]) styles
** Copyright Alexander Limi
*/

/* Thanks to A List Apart ([url]http://alistapart.com/[/url]) for useful extras */
a.stub,
a.new{ color:#ba0000; text-decoration:none; }

#toc { 
    /*border:1px solid #2f6fab;*/
    border:1px solid #aaaaaa;
    background-color:#f9f9f9;
    padding:5px;
}
.tocindent {
   margin-left: 2em;
}
.tocline {
   margin-bottom: 0px;
}
.toctoggle, .editsection {
   font-size: smaller;
}

/* images */
div.floatright { 
    float: right; 
    margin: 0;
    position:relative;
    border: 0.5em solid White;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.floatright p { font-style: italic;} 
div.floatleft { 
    float: left; 
    margin: 0.3em 0.5em 0.5em 0;
    position:relative;
    border: 0.5em solid White;
    border-width: 0.5em 1.4em 0.8em 0;
}
div.floatleft p { font-style: italic; } 
/* thumbnails */
div.thumb {
    margin-bottom: 0.5em;
    border-style: solid; border-color: White;
    width: auto;
    overflow: hidden;
}
div.thumb div {
    border:1px solid #cccccc;
    padding: 3px !important;
    background-color:#f9f9f9;
    font-size: 94%;
    text-align: center;
}
div.thumb div a img {
    border:1px solid #cccccc;
}
div.thumb div div.thumbcaption {
    border: none;
    text-align: left;
    padding: 0.3em 0 0.1em 0;
}
div.magnify { display: none; }
div.tright {
    float: right;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    float: left;
    margin-right:0.5em;
    border-width: 0.5em 1.4em 0.8em 0;
}

/* table standards */
table.rimage {
    float:right; 
    width:1pt; 
    position:relative;
    margin-left:1em; 
    margin-bottom:1em;
    text-align:center;
}

body {
    background: White;
    /*font-size: 11pt !important;*/
    color: Black;
    margin: 0;
    padding: 0;
}

.noprint,
div.top,
div#column-one,
#colophon,
.editsection,
.toctoggle,
.tochidden,
div#f-poweredbyico,
div#f-copyrightico,
li#f-viewcount,
li#f-about,
li#f-disclaimer {
    /* Hides all the elements irrelevant for printing */
    display: none;
}

ul { 
    list-style-type: square;
}

#content {
    background: none;
    border: none ! important;
    font-size: 11pt;
    padding: 0 ! important;
    margin: 0 ! important;
    text-align: left;
}
#footer {
    border-top: 1px solid black;
}

h1, h2, h3, h4, h5, h6
{
    font-weight: bold;
}

p, .documentDescription {
    margin: 1em 0 ! important;
    line-height: 1.2em;    
}

.tocindent p {
   margin: 0 0 0 0 ! important;
}

pre {
    border: 1pt dashed black;
    white-space: pre;
    font-size: 8pt;
    overflow: auto;
    padding: 1em 0;
}

table.listing,
table.listing td {
    border: 1pt solid black;
    border-collapse: collapse;
}

a {
    color: Black !important;
    padding: 0 !important
}

a:link, a:visited {
    color: #520;
    background: transparent;
    text-decoration: underline;
}

#content a.external.text:after, #content a.external.autonumber:after {
    /* Expand URLs for printing */
    content: " (" attr(href) ") ";
}

#globalWrapper {
    width: 100% !important;
    min-width: 0 !important;
}

#column-content {
    margin: 0 !important;
}

#column-content #content {
    padding: 1em;
    margin: 0 !important;
}
/* MSIE/Win doesn't understand 'inherit' */
a, a.external, a.new, a.stub {
   color: black ! important;
   text-decoration: none ! important;
}

/* Continue ... */
a, a.external, a.new, a.stub {
   color: inherit ! important;
   text-decoration: inherit ! important;
}

img { border: none; }
img.tex { vertical-align: middle; }
span.texhtml { font-family: serif; }

div.townBox {
    position:relative;
    float:right;
    background:White;
    margin-left:1em;
    border: 1px solid gray;
    padding:0.3em;
    width: 200px;
    overflow: hidden;
    clear: right;
}
div.townBox dl {
    padding: 0;
    margin: 0 0 0.3em 0; 
    font-size: 96%;
}
div.townBox dl dt {
    background: none;
    margin: 0.4em 0 0 0;
}
div.townBox dl dd {
    margin: 0.1em 0 0 1.1em;
    background-color: #f3f3f3;
}

#siteNotice { display: none; }

table.gallery {
        border:  1px solid #cccccc;
        margin:  2px;
        padding: 2px;
        background-color:#ffffff;
}

table.gallery tr { 
        vertical-align:top;
}

div.gallerybox {
        border: 1px solid #cccccc;
        margin: 2px;
        background-color:#f9f9f9;
        width:  150px;
}

div.gallerybox div.thumb {
        text-align: center;
        border: 1px solid #cccccc;
        margin: 2px;
}       

div.gallerytext {
        font-size: 94%;
        padding: 2px 4px;
}       

/*
** Diff rendering
*/
table.diff { background:white; }
td.diff-otitle { background:#ffffff; }
td.diff-ntitle { background:#ffffff; }
td.diff-addedline {
    background:#ccffcc;
    font-size: smaller;
    border: solid 2px black;
}
td.diff-deletedline {
    background:#ffffaa;
    font-size: smaller;
    border: dotted 2px black;
}
td.diff-context {
    background:#eeeeee;
    font-size: smaller;
}
span.diffchange { color: silver; font-weight: bold; text-decoration: underline; }

scheint wirklich was mit drucken zu tun haben, aber so ganz kapier ichs immer noch nicht, muss ich denn nun in der css datei das ganze festlegen? ^^

[jfheins]

Wenn du möchtest, dass einige Teile nicht mit gedruckt werden, dann stellst du im Druck-Stylesheet einfach ein, dass diese unsichtbar sind ;)

Hat also bis jetzt nix mit Javascript zu tun ;)