Bestimmte Texte ausdrucken?

[Webhufi]

Ja, der Druckdialog öffnet sich; aber nur mit dem 'Drucke dies' und der Überschrift im tab.
Den Code aus #7 habe ich wohl an falscher Stelle drinne?

 

[Sempervivum]

Der Fehler besteht darin, dass Du das CSS aus #7 in script-Tags gesetzt hast:

<script>
#printcontainer .tab-content {
    max-height: unset;
}
</script>

es müssen jedoch style-Tags sein:

<style>
#printcontainer .tab-content {
    max-height: unset;
}
</style>

Wenn ich das in den Entwicklerwerkzeugen ändere, funktioniert es auf deiner Seite, der ganze Text wird in der Druckvorschau angezeigt.
Normaler Weise gehört das CSS in den Head und ist auch nur dann valide, aber die Browser sehen das i. allg. nicht so eng.

 

[Webhufi]

Yesss! Juchhu! Du bist eine Wucht... ;-) Ich freue mich so!

Jetzt fehlt wegen der Schönheit nur noch, dass man den Text "Drucke dies" irgendwie aktiviert; bei diesem Text kommt ja keiner auf die Idee, darauf zu klicken...

 

[Sempervivum]

Du kannst es ja mit einem Button versuchen:

<button class="printbtn">Drucke dies</button>

Oder mit einem geeigneten Icon.

 

[Sempervivum]

PS: Dann muss allerdings auch das Javascript angepasst werden:

    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("button.printbtn");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
            var vprintcontainer = document.createElement("div");
            vprintcontainer.id = "printcontainer";
            document.querySelector("body").appendChild(vprintcontainer);
        });
    </script>

 

[Webhufi]

Klasse! Ein png wäre zwar hübscher, aber so ist es auch gut. Ich weiß nämlich nicht, wie ich das png einbinden kann..
Ich habe die Position etwas verändert, da sonst das + im Label verschwindet.

Vielen Dank für Alles und viele Grüße!
Norbert

 

[Webhufi]

Letzte Bitte: Mir würde es sehr gefallen, ein 'drucken.png' zu benutzen.
Würdest du mir bitte noch erklären, wie ich diesem Icon den Druckbefehl beibringen kann? Also statt den <button> zu verwenden?

 

[Sempervivum]

Kein Problem: Ersetze das button- durch ein img-Tag, d. h. dieses:

<button class="printbtn">Drucke dies</button>

durch dieses:

<img class="printbtn" src="drucken.png">

und berücksichtige es im Javascript:

    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("img.printbtn");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
            var vprintcontainer = document.createElement("div");
            vprintcontainer.id = "printcontainer";
            document.querySelector("body").appendChild(vprintcontainer);
        });
    </script>

 

[Webhufi]

Auch wenn ich unverschämt erscheine: aber ich möchte es perfekt machen!
Der veränderte Mauszeiger fehlt; der User sieht nicht, dass hier etwas zum Anklicken ist.

 

[Sempervivum]

Nein, ist nicht unverschämt, das fehlt wirklich und es ist nur eine Kleinigkeit. Füge dies CSS zu dem anderen hinzu:

.printbtn {
    cursor: pointer;
}

Was IMO auch noch fehlt, ist die Überschrift, "Bärlauch" bei dem ersten und "Beifuß" bei dem zweiten Text.