Bestimmte Texte ausdrucken?

Webhufi

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Der Fehler besteht darin, dass Du das CSS aus #7 in script-Tags gesetzt hast:
Code:
<script>
#printcontainer .tab-content {
    max-height: unset;
}
</script>
es müssen jedoch style-Tags sein:
Code:
<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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Du kannst es ja mit einem Button versuchen:
Code:
<button class="printbtn">Drucke dies</button>
Oder mit einem geeigneten Icon.
 

Sempervivum

Erfahrenes Mitglied
PS: Dann muss allerdings auch das Javascript angepasst werden:
Code:
    <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

Erfahrenes Mitglied
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
 
Zuletzt bearbeitet:

Webhufi

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Kein Problem: Ersetze das button- durch ein img-Tag, d. h. dieses:
Code:
<button class="printbtn">Drucke dies</button>
durch dieses:
Code:
<img class="printbtn" src="drucken.png">
und berücksichtige es im Javascript:
Code:
    <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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
Nein, ist nicht unverschämt, das fehlt wirklich und es ist nur eine Kleinigkeit. Füge dies CSS zu dem anderen hinzu:
Code:
.printbtn {
    cursor: pointer;
}
Was IMO auch noch fehlt, ist die Überschrift, "Bärlauch" bei dem ersten und "Beifuß" bei dem zweiten Text.