Latze Bierknecht: unterschiedliche Behandlung Bildschirm<->Drucker

Salve,

ich habe ein Menu, das sich beim Drüberfahren mit der Maus aufklappt. Dafür gibt es ein <div>, das den aufzuklappenden Inhalt enthält.Dieses wird per JavaScript sichtbar gemacht und korrekt positioniert. Wenn ich in einen anderen Bereich fahre, wird es wieder unsichtbar gemacht.

Wenn ich es wie oben beschrieben sichtbar habe und in das Browsermenü gehe und die Seite drucke, ist dieses Untermenü immer noch sichtbar und wird mitgedruckt. Dies würde ich gern vermeiden.

Der <div>-Bereich hat eine id, die ich per JavaScript anspreche. Dort wird die visibility auf visible oder auf hidden gesetzt. Wie bringe ich da jetzt eine Unterscheidung rein zwischen Drucker und Bildschirm?

Wie ich das in CSS ohne JavaScript mache (über @media), weiß ich schon.

  1. Wenn ich es wie oben beschrieben sichtbar habe und in das Browsermenü gehe und die Seite drucke, ist dieses Untermenü immer noch sichtbar und wird mitgedruckt. Dies würde ich gern vermeiden.

    Wenn's IE-only sein darf, verwende onbeforeprint, browserübergreifend geht nur, wenn es Dir möglich ist, vor dem Drucken das DIV auszublenden (z.B., wenn das Drucken via Buttonklick angestoßen wird). Ansonsten bleibt Dir m.W. nur das hier:

    Wie ich das in CSS ohne JavaScript mache (über @media), weiß ich schon.

    Siechfred

  2. Hi,

    Wie ich das in CSS ohne JavaScript mache (über @media), weiß ich schon.

    Mit cssRule() kannst Du die Stile im Stylesheet (also nicht wie mit style direkt am HTML-Element) auslesen und setzen, und dabei auch den Medientyp des Stylesheets angeben: cssRule("#menuID@screen","visibilty","hidden");

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
  3. Moin!

    Wenn ich es wie oben beschrieben sichtbar habe und in das Browsermenü gehe und die Seite drucke, ist dieses Untermenü immer noch sichtbar und wird mitgedruckt. Dies würde ich gern vermeiden.

    Der <div>-Bereich hat eine id, die ich per JavaScript anspreche. Dort wird die visibility auf visible oder auf hidden gesetzt. Wie bringe ich da jetzt eine Unterscheidung rein zwischen Drucker und Bildschirm?

    Verzichte darauf, die Style-Einstellungen direkt anzusprechen. Denn das wirkt immer auf alle Medientypen.

    Ändere stattdessen die zugewiesenen Klassen, indem du z.B. die Standardformatierung des Elements auf unsichtbar setzt (für Screen und Print). Eine Klasse "sichtbar" wird dann so formatiert, dass sie - aber nur im Medium Screen - das Element dann anzeigt. Und mit Javascript fügst du diese Klasse hinzu und nimmst sie weg.

    - Sven Rautenberg

    --
    "Love your nation - respect the others."
    1. Ich gebe also meinem div per JavaScript zwei Klassen. Die eine ist standardmäßig immer unsichtbar, das ist der Normalfall. Wenn ich drüberfahre, gebe ich dem div die andere Klasse, welche nur auf dem Bildschirm sichtbar wird.
      Verstehe ich das richtig?
      Wie spricht man denn die Klasseneigenschaft eines Objekts an?
      document.getElementById("meinElement").class oder so ähnlich?

      1. Hallo Latze,

        Ich gebe also meinem div per JavaScript zwei Klassen. Die eine ist standardmäßig immer unsichtbar, das ist der Normalfall. Wenn ich drüberfahre, gebe ich dem div die andere Klasse, welche nur auf dem Bildschirm sichtbar wird.
        Verstehe ich das richtig?

        Ja.

        Wie spricht man denn die Klasseneigenschaft eines Objekts an?
        document.getElementById("meinElement").class oder so ähnlich?

        document.getElementById("meinElement").className (Link)

        Jonathan