javascript überschreibt print.css?

[Roger]

moin!

ich habe hier mir selbst mit einer funktion ins knie geschossen, wo ich nicht weiß, wie ich es hinbekomme.
auf o.g. seite werden ebenen versteckt (display: none;). diese sollen erst bei onmouseover sichtbar sein. klappt auch. bei onmouseout soll die ebene wieder verschwinden. klappt ebenfalls.
das problem liegt in der anzeige für den drucker. denn rufe ich die seite auf und klicke auf drucken/druckvorschau, werden für diesen gemäß print.css die ebenen alle angezeigt. fahre ich mit der maus über eine ebene (oder alle), so wird diese in der druckvorschau nicht mehr angezeigt.
sicherlich wird die print.css mit der javascript-funktion überschrieben. kann ich dass so hinbasteln, dass trotz der javascript-funktion die ansicht aus print.css fürs drucken genommen wird? wenn ja, wie?

gruß.
roger.

[derletztekick]

Hallo Roger,

werden ebenen versteckt (display: none;).

dann mach sie doch einfach wieder sichtbar mit .submenuText { display: block; }.

Mit freundlichem Gruß
Micha

[Roger]

moin!

dann mach sie doch einfach wieder sichtbar mit .submenuText { display: block; }.

werden sie doch. hast du dir den link mal angesehen?

gruß.
roger.

[derletztekick]

Hallo Roger,

werden sie doch.

Wo?

  
.submenuText {  
 margin-top: 5px;  
 font-size: 12px;  
 line-height: 140%;  
 width: 80%;  
}

hast du dir den link mal angesehen?
natürlich...

Mit freundlichem Gruß
Micha

[Roger]

moin!

entschuldige. ich hatte dich falsch verstanden.
allerdings hatte ich das beim testen schon so. brachte auch keinen erfolg. ich habe es jetzt aber nochmal in die print.css reingesetzt.
das problem, welches noch besteht, ist das die print.css ja am anfang aufgerufen wird. wird nun aber die js-funktion aufgerufen, die dann sagt "display: none", dann wird die direktive (wenn man das so nennen kann) aus der print.css überschrieben und die ebene bleibt "display: none".

gruß.
roger.

[Ingo Turski]

Hi,

das problem, welches noch besteht, ist das die print.css ja am anfang aufgerufen wird. wird nun aber die js-funktion aufgerufen, die dann sagt "display: none", dann wird die direktive (wenn man das so nennen kann) aus der print.css überschrieben und die ebene bleibt "display: none".

dann definiere einfach nicht display:none sondern ändere den Klassennamen und trage für diesen unterschiedliche Regeln in den CSS-Dateien ein.

freundliche Grüße
Ingo

[Cybaer]

Hi,

dann definiere einfach nicht display:none sondern ändere den Klassennamen und trage für diesen unterschiedliche Regeln in den CSS-Dateien ein.

Alternativ: Coding: CSS-Regeln auslesen & ändern. Damit läßt sich auch gezielt das CSS nur für den Bildschirm ändern, während das Drucker-CSS gleich bleibt (oder umgekehrt ;)).

Gruß, Cybaer

[Roger]

moin!

Alternativ: Coding: CSS-Regeln auslesen & ändern. Damit läßt sich auch gezielt das CSS nur für den Bildschirm ändern, während das Drucker-CSS gleich bleibt (oder umgekehrt ;)).

nicht schlecht. fasst hätte ich es auch eingebaut. aber bei mir passt die logik des aufbaus nicht so ganz. und zwar sind es ja verschiedene ebenen, von denen jeweils immer nur eine eingeblendet werden soll. somit müsste ich für jede ebene ein sheet definieren. nich?
weil, wenn ich jetzt die klasse auf diplay: block setze, dann werden die anderen ebenen ja auch eingeblendet.
ok, jetzt habe ich's doch eingebaut. nur theorie is ja nich wirklich praktisch ;)
aber ich bekomme den beschriebenen fall. entweder alle ebenen oder keine.
jetzt habe ich schon die id's umbenannt in ebene1, ebene2,... und die funktionen show() und hide() dem script angepasst:

  
function show(EBENE)  
{  
 cssRule("#ebene"+EBENE+".submenuText@screen","display","block")  
}  
  
function hide(EBENE)  
{  
 cssRule("#ebene"+EBENE+".submenuText@screen","display","none")  
}  

und im screen.css die klasse submenuText wie folgt angelegt:

  
#ebene1.submenuText, #ebene2.submenuText, #ebene3.submenuText, #ebene4.submenuText, #ebene5.submenuText, #ebene6.submenuText, #ebene7.submenuText, #ebene8.submenuText, #ebene9.submenuText {  
 float: left;  
 margin-top: 5px;  
 padding-left: 12px;  
 font-size: 10px;  
 color: #fff;  
 display: none;  
 line-height: 14px;  
 width: 420px;  
}  

aber eben auch ohne erfolg.

gruß.
roger.

[Cybaer]

Hi,

jetzt habe ich schon die id's umbenannt in ebene1, ebene2,... und die funktionen show() und hide() dem script angepasst:

Klingt irgendwie umständlich - kann mir deinen Source aber auch gerade nicht anschauen (Server Error).

BTW:

#ebene1.submenuText, #ebene2.submenuText, #ebene3.submenuText, #ebene4.submenuText, #ebene5.submenuText, #ebene6.submenuText, #ebene7.submenuText, #ebene8.submenuText, #ebene9.submenuText {
}

Das kann man mit cssRule() *nicht* machen. Zwar kann man mit cssRule() die Stile bei Angabe eines jeden einzelnen Teil-Selektors (#ebene1.submenuText ff.) auslesen und auch neu setzen, *aber*: Mozilla hat in Wirklichkeit nur eine einzige Regel, die eben für alle Teil-Selektoren gilt (halt diesen Mehrfach-Selektor zur Gänze - genau wie er im Sheet notiert ist). Der IE hingegen kennt diesen Mehrfach-Selektor wie angegeben gar nicht! Wenn Du obiges schreibst, wandelt er es intern um in

#ebene1.submenuText { }
#ebene2.submenuText { }

etc.

Nur beim IE kannst Du also bei dieser Notation #ebene2.submenuText mit anderen Werten versorgen, als alle anderen. Beim Mozilla gilt: Setzt du #ebene2.submenuText neu, gilt das auch für alle anderen Elemente dieses Mehrfachselektors. Da kann man nichts machen ...

Gruß, Cybaer

[Roger]

moin!

Das kann man mit cssRule() *nicht* machen.

schade. die funktion war mir sympathisch :)
dafür habe ich es jetzt so gemacht, wie "derletztekick" mir geraten hatte. (siehe hier)

gruß.
roger.

[Cybaer]

Hi,

dafür habe ich es jetzt so gemacht, wie "derletztekick" mir geraten hatte. (siehe hier)

Viele Wege führen nach Rom ... ;)

Gruß, Cybaer

[derletztekick]

Hallo Roger,

allerdings hatte ich das beim testen schon so. brachte auch keinen erfolg.

Ja, ich sehe es.

das problem, welches noch besteht, ist das die print.css ja am anfang aufgerufen wird. wird nun aber die js-funktion aufgerufen, die dann sagt "display: none", dann wird die direktive (wenn man das so nennen kann) aus der print.css überschrieben und die ebene bleibt "display: none".

Ich muss Dir da erstmal zustimmen. JavaScript scheint auf beide CSS Einfluß zu nehmen. Auf anhieb fällt mir nur eine Lösung ein:

Statt dem einblenden der DIV's fügst Du dessen Inhalt in ein leeres DIV ein.
<div id="dummy">&nbsp;</div>

diesem überginbst Du bspw. mit innerHTML den Inhalt des gewünschten DIV'S:

  
document.getElementById("dummy").innerHTML = document.getElementById(EBENE).innerHTML;  
//document.getElementById(EBENE).style.display = "block";

bzw. blendest ihn wieder durch eine leere Zuweisung aus.

Mit freundlichem Gruß
Micha

[Ingo Turski]

Hi,

Auf anhieb fällt mir nur eine Lösung ein:

Statt dem einblenden der DIV's fügst Du dessen Inhalt in ein leeres DIV ein.
<div id="dummy">&nbsp;</div>

diesem überginbst Du bspw. mit innerHTML den Inhalt des gewünschten DIV'S:
[code lang=javascript]
document.getElementById("dummy").innerHTML = document.getElementById(EBENE).innerHTML;

abgesehen davon, dass dies viel zu umständlich ist: wie kommst Du auf die Idee, dass dynamisch erzeugte Inhalte im Ausdruck anders behandelt werden als statische?

freundliche Grüße
Ingo

[derletztekick]

Hallo Ingo Turski,

abgesehen davon, dass dies viel zu umständlich ist:

Was auch immer in Deinen Augen "viel" ist...

wie kommst Du auf die Idee, dass dynamisch erzeugte Inhalte im Ausdruck anders behandelt werden als statische?

Kannst Du das bitte etwas näher erläutern, was Du genau wissen möchtest von mir?

Liebe Gruße
Micha

[Ingo Turski]

Hi,

wie kommst Du auf die Idee, dass dynamisch erzeugte Inhalte im Ausdruck anders behandelt werden als statische?
Kannst Du das bitte etwas näher erläutern, was Du genau wissen möchtest von mir?

inwiefern ist Dir meine Frage unverständlich?
Es wird immer das gedruckt, was in einer Seite zu sehen ist - es sei denn, dass spezielle Regeln für den Ausdruck wirksam werden. Da macht es keinen Unterschied, ob nun nur die display-Eigenschaft über Javascript geändert wird oder zuvor Inhalte dynamisch eingefügt werden.

freundliche Grüße
Ingo

[derletztekick]

Hallo Ingo Turski,

Es wird immer das gedruckt, was in einer Seite zu sehen ist - es sei denn, dass spezielle Regeln für den Ausdruck wirksam werden.

Ja, das ist hier ja das Problem.

Da macht es keinen Unterschied, ob nun nur die display-Eigenschaft über Javascript geändert wird oder zuvor Inhalte dynamisch eingefügt werden.

Scheinbar doch, ich habe es natürlich probiert, Du auch?

Mit freundlichem Gruß
Micha

[Ingo Turski]

Hi,

Da macht es keinen Unterschied, ob nun nur die display-Eigenschaft über Javascript geändert wird oder zuvor Inhalte dynamisch eingefügt werden.

Scheinbar doch, ich habe es natürlich probiert, Du auch?

nö. Wenn's denn in dieser Konstellation geht, wundert mich das und entspricht nicht meiner Erfahrung. Aber ich bevorzuge für solche Fälle wie gesagt die Änderung des Klassennamens und kann somit sämtliche Formatierungen ausschliesslich über CSS regeln.

freundliche Grüße
Ingo

[derletztekick]

Hallo Ingo Turski,

Scheinbar doch, ich habe es natürlich probiert, Du auch?
Aber ich bevorzuge [...] die Änderung des Klassennamens.

Ich finde die Lösung auch idealer und würde sie meiner ersten Überlegung vorziehen. Ich fand Deinen Vorwurf: "wie kommst Du auf die Idee...", nur unberechtigt.

Schöne Grüße
Micha

[Roger]

moin!

Statt dem einblenden der DIV's fügst Du dessen Inhalt in ein leeres DIV ein.

jop, werde ich dann ausprobieren, wenn cybaers funktion nicht klappen sollte. wobei dieser vorschlag wohl genau das ist, was ich anfangs gesucht habe. so um die ecke denken klappt nämlich nicht immer ;)
danke!
wenn ich es teste, sag ich auf jeden fall noch bescheid.

gruß.
roger.

[Roger]

moin!

super. funktioniert :)
ich habe eine neue ebene (ebene0) angelegt, die ich mit onmouseover/out per function fülle/leere. besser kanns nicht gehen :)

die functions lauten wie folgt:

  
function swapin(EBENE)  
{  
 if(document.getElementById)  
 {  
    document.getElementById("ebene0").innerHTML = document.getElementById("ebene"+EBENE).innerHTML;  
  }  
  else  
 {  
  document["ebene0"].innerHTML = document["ebene"+EBENE].innerHTML;  
 }  
}  
  
function swapout()  
{  
 if(document.getElementById)  
 {  
    document.getElementById("ebene0").innerHTML = " ";  
  }  
  else  
 {  
  document["ebene0"].innerHTML = " ";  
 }  
}  

leider muss die *.js datei neu geladen werden, wenn man die seite zum zweiten mal besucht. ich werde noch eine variable ranhängen, um das zu umgehen...

gruß.
roger.

[derletztekick]

Hallo Roger,

leider muss die *.js datei neu geladen werden, wenn man die seite zum zweiten mal besucht.

Warum bzw. wie macht sich das bemerkbar? Ich war gerade auf der Seite und konnte nichts feststellen.

Mit freundlichem Gruß
Micha

[Roger]

moin!

Warum bzw. wie macht sich das bemerkbar? Ich war gerade auf der Seite und konnte nichts feststellen.

na weil die alte noch im cache des browsers verbleibt. und somit auch die alten funktionen. wenn die die js mit einem parameter aufrufe, passiert das dann nicht: mover.js?7541392650 (<- timestamp ;)

gruß.
roger.

[derletztekick]

Hallo Roger,

na weil die alte noch im cache des browsers verbleibt. und somit auch die alten funktionen. wenn die die js mit einem parameter aufrufe, passiert das dann nicht: mover.js?7541392650 (<- timestamp ;)

Ich wusste nicht, das Du der JS noch einen Parameter mit gibst. ;-)
Hast Du nochmal über Ingos Vorschlag nachgedacht, die Klasse(n) zu tauschen? Das wäre eine saubere Lösung, da Du kein unnötiges DIV-Element benötigst.

Mit freundlichem Gruß
Micha

[Roger]

moin!

Ich wusste nicht, das Du der JS noch einen Parameter mit gibst. ;-)
Hast Du nochmal über Ingos Vorschlag nachgedacht, die Klasse(n) zu tauschen? Das wäre eine saubere Lösung, da Du kein unnötiges DIV-Element benötigst.

für ein neues projekt, ja ;)
und die klassen werden dann per javascript geändert?

gruß.
roger.

[derletztekick]

Hallo Roger,

für ein neues projekt, ja ;)
und die klassen werden dann per javascript geändert?

Ja, Du kannst mit obj.className = "dynamischeKlasse"; dem Objekt obj eine neue CSS-Klasse zuweisen. Natürlich kannst Du (und sollst Du wohl auch) die alte Klassezuweisung nicht überschreiben, sondern eine weitere hinzufügen, so daß Du im Ergebnis etwas in der Art hast <htmltag class="festeKlasse dynamischeKlasse">...</htmltag>.

Mit freundlichem Gruß
Micha

[Roger]

moin!

<htmltag class="festeKlasse dynamischeKlasse">...</htmltag>.

also nur anfügen? hm. per mouseover sollte ja die ebene erscheinen und per mouseout wieder weg sein. ein ersetzen scheint mir da sinnvoller... nicht?

gruß.
roger.

[derletztekick]

Hallo Roger,

moin!

<htmltag class="festeKlasse dynamischeKlasse">...</htmltag>.

also nur anfügen?

Ja da sie beim

mouseover sollte ja die ebene erscheinen und per mouseout wieder weg sein. ein ersetzen scheint mir da sinnvoller... nicht?

Genau: tausche/ersetze die "dynamische" Klasse aus; die feste soll für Deine Druck-CSS sein oder auch allg. Definitionen beinhalten (und somit unveränderbar sein).

Mit freundlichem Gruß
Micha

[Roger]

moin!

<htmltag class="festeKlasse dynamischeKlasse">...</htmltag>.

ah! es wird heller. danke! in der dynamischen klasse müsste ich in meinem jetzigen beispiel einfach nur die display-anweisung (block/hidden) definieren. fein.

soweit zur theorie, und mit welchem befehl tausche ich den zweiten klassennamen aus? ich müsste dem tag dann ja noch eine id geben und das ganze per "classname" ersetzen. oder?
document.getElementById("id1").className = "festeKlasse dynamischeKlasse1";
und
document.getElementById("id1").className = "festeKlasse dynamischeKlasse2";

so?

gruß.
roger.

[Ashura]

Hallo Roger.

soweit zur theorie, und mit welchem befehl tausche ich den zweiten klassennamen aus?

Du könntest einfach die betreffende Klasse im Wert von className http://de.selfhtml.org/javascript/objekte/string.htm#replace@title=ersetzen und das Ergebnis wiederum className zuweisen.

Alternativ kannst du natürlich auch den Wert von className http://de.selfhtml.org/javascript/objekte/string.htm#split@title=aufteilen, den resultierenden Array durchlaufen, hierbei die Klasse ersetzen, danach den Array wieder http://de.selfhtml.org/javascript/objekte/array.htm#join@title=zusammenfügen und schließlich wiederum className zuweisen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[derletztekick]

Hallo Roger,

soweit zur theorie, und mit welchem befehl tausche ich den zweiten klassennamen aus? ich müsste dem tag dann ja noch eine id geben und das ganze per "classname" ersetzen. oder?

Den Austausch hat Dir Ashura schon näher gebracht. Dort kannst Du Dich für eine Methode Deiner Wahl entscheiden. Eine ID, um das Objekt anzusprechen, ist jedoch nicht zwingend nötig. Neben den anderen getElementsBy...-Methoden würde sich für Deinen Fall sicher auch getElementsByClassName("festeKlasse") anbieten, da Du diese nicht abänderst.

Mit freundlichem Gruß
Micha