showhide mit Klassen

[Timmytom]

Hallo Zusammen,

Ich habe folgenden Code.

<a href="javascript://" onclick="showhide('agent99');">

Jetzt reagiert onclick nur auf die ID=agent99. Wie mache ich das, dass onclick auf Klassen reagiert?

Gruß

Timmytom

[suit]

<a href="javascript://" onclick="showhide('agent99');">

Jetzt reagiert onclick nur auf die ID=agent99.

Daraus schließe ich, dass die Funktion "showhide" "irgendwas" tut, um die id mit "agent99" anzusprechen.

Wie mache ich das, dass onclick auf Klassen reagiert?

Tausche das oben genannte "igendwas" (vermutlich document.getElementById()) gegen eine geeignete andere Funktion aus. getElementsByClassName() hört sich z.B. nicht schlecht an.

Was soll eigentlich dieses "javascript://" im href-Attribut? Wenn es keinen Link gibt, lass das href-Attribut weg - oder noch besser, missbrauche erst gar kein a-Element dafür.

[misterunknown]

Moin,

oder noch besser, missbrauche erst gar kein a-Element dafür.

Und benutze stattdessen? Dieses Statement fehlt noch. Was eignet sich denn besser für einen eine Aktion auslösenden Text als ein Anchor-Element?

Außerdem werden auch in der SelfHTML-Doku fast immer Anchor-Elemente für das Auslösen von Javascript-Funktionen verwendet.

Grüße Marco

[suit]

Und benutze stattdessen?

Ein element, dass sowieso da ist? Ein durch JavaScript erzeugtes Element (welches dann gerne auch ein a-Element sein kann).

Dieses Statement fehlt noch. Was eignet sich denn besser für einen eine Aktion auslösenden Text als ein Anchor-Element?

Wenn das drin ohne JavaScript nichts tut und trotzdem da ist, ist es fehl am Platz.

Außerdem werden auch in der SelfHTML-Doku fast immer Anchor-Elemente für das Auslösen von Javascript-Funktionen verwendet.

Ja und das ist schlecht.

[misterunknown]

Moin,

Außerdem werden auch in der SelfHTML-Doku fast immer Anchor-Elemente für das Auslösen von Javascript-Funktionen verwendet.
Ja und das ist schlecht.

Woher soll man dann wissen, dass es schlecht ist? Gott und die Welt benutzt Anker um Javascripts auszulösen. In jeder mir bekannten Dokumentation oder Anleitung ist es auch so.

Selbst große und bekannte Webseiten, wie Facebook nutzen Anker um Javascripts auszulösen.

Grüße Marco

[suit]

Woher soll man dann wissen, dass es schlecht ist?

Expertise, Spezialwissen, Fachkenntnis?

Gott und die Welt benutzt Anker um Javascripts auszulösen.

Unzählige Fliegen können nicht irren ...

In jeder mir bekannten Dokumentation oder Anleitung ist es auch so.

Du liest nicht viele "Anleitungen" auf höhe der Zeit oder? ;)

Selbst große und bekannte Webseiten, wie Facebook nutzen Anker um Javascripts auszulösen.

Facebook fällt ohne JavaScript sowieso auseinander.

Wenn man wirtschaftliche Interessen hat und nicht die Marktdominanz von Facebook besitzt, sollte man tunlichst darauf schauen, auch "non-JavaScript-Benutzer" zu beachten. Der Anteil liegt zwar oft im unteren 1-stelligen Prozenzbereich, besonders bei Webshops kann das aber einen Teil des Umsatzes ausmachen - oft sogar mehr, als für irgend einen Browser zu optimieren, den es eh garnicht mehr wirklich gibt (oder auch nicht).

[Matthias Apsel]

Om nah hoo pez nyeetz, suit!

Wenn man wirtschaftliche Interessen hat und nicht die Marktdominanz von Facebook besitzt, sollte man tunlichst darauf schauen, auch "non-JavaScript-Benutzer" zu beachten.

Ein einfaches 'fachlich hilfreich' wäre zu wenig.

Matthias

[misterunknown]

Moin,

Du liest nicht viele "Anleitungen" auf höhe der Zeit oder? ;)

Das liegt daran, dass ich kaum welche auf "Höhe der Zeit" finde ;)

Grüße Marco

[suit]

Du liest nicht viele "Anleitungen" auf höhe der Zeit oder? ;)

Das liegt daran, dass ich kaum welche auf "Höhe der Zeit" finde ;)

Geh' bitte, selbst der hier ist auf Höhe der Zeit :)

[misterunknown]

Moin,

Geh' bitte, selbst der hier ist auf Höhe der Zeit :)

Das ist aber weder eine Anleitung noch eine Dokumentation! Das ist eher ein Essay.

Grüße Marco

[suit]

Das ist aber weder eine Anleitung [...] [d]as ist eher ein Essay.

Was erwartest du? Eine Schritt-für-Schritt-Anleitung "in 3 Tagen zum Web-Entwickler mit Humboldt"?

[Gunnar Bittersmann]

@@suit:

nuqneH

als für irgend einen Browser zu optimieren, den es eh garnicht mehr wirklich gibt (oder auch nicht).

Elvis is alive!

Qapla'

[Timmytom]

Das Script im HEAD Bereich sieht jetzt so aus.

<script language="javascript">  
var state = 'hidden';  
  
function showhide(layer_ref) {  
  
if (state == 'visible') {  
state = 'hidden';  
}  
else {  
state = 'visible';  
}  
if (document.all) { //IS IE 4 or 5 (or 6 beta)  
eval( "document.all." + layer_ref + ".style.visibility = state");  
}  
if (document.layers) { //IS NETSCAPE 4 or below  
document.layers[layer_ref].visibility = state;  
}  
if (document.document.getElementsByClassName && !document.all) {  
maxwell_smart = document.document.getElementsByClassName(layer_ref);  
maxwell_smart.style.visibility = state;  
}  
}  
//-->  
</script>  

Leider geht durch die Änderung von Id zu ClassName nichts mehr.

[molily]

if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}

Diesen Teil kannst du wegwerfen. Diese Browser sind ausgestorben. Und dieser Code setzt auch nicht den Zugriff auf Elemente anhand einer Klasse um.

if (document.document.getElementsByClassName && !document.all) {
maxwell_smart = document.document.getElementsByClassName(layer_ref);
maxwell_smart.style.visibility = state;

getElementsByClassName ist schon richtig, allerdings gibt dir diese Methode eine Liste von Elementen zurück. Du kannst nicht direkt .style.visibility davon ansprechen. Du musst die Liste mit einer Schleife durchlaufen und jedem Element darin die neue visibility zuweisen.

if (!document.getElementsByClassName) return;  
var elements = document.getElementsByClassName(className);  
for (var i = 0, l = elements.length, element; i < l; i++) {  
  element = elements[i];  
  element.style.visibility = state;  
}

Allgemein kannst du so etwas mit geeigneten CSS-Regeln und einer kleinen JavaScript-Änderung vereinfachen:

.agent99-visible .agent99 { visibility: visible; }

Dann brauchst du nur noch setzen:

document.body.className = 'agent99-visible';

und alle Element der Klasse werden eingeblendet (sofern Inline-Style diese Regel nicht überschreiben).

Mathias

[Timmytom]

Sollte das also jetzt so aussehen?

<script language="javascript">  
<!--  
.agent99-visible .agent99 { visibility: visible; }  
-->  
</script>  

<a href="javascript://" onclick="document.body.className = 'agent99-visible';">bla</a>

[dave]

Hi,

Sollte das also jetzt so aussehen?

Nein.

<script language="javascript">

Du möchtest kein Skript, sondern Styles. Zudem wäre das language-Attribut deprecated:

<style type="text/css"></style>

Noch vernünftiger ist es die Styles in eine andere Datei auszulagern und diese mit dem link-Element einzubinden.

<!--

Diese Kommentare sind hier absolut unnötig.
Weder bei Style noch bei Script erfüllen die irgendeinen Nutzen.

.agent99-visible .agent99 { visibility: visible; }

Das ist richtig.

<a href="javascript://" onclick="document.body.className = 'agent99-visible';">bla</a>

Für was hast du hier noch immer das href="javascript://"?
Das was du im onclick-Attribut notiert hast erfüllt grundsätzlich seinen Zweck, überschreibt aber auch bereits vorhanden Klassen im class-Attribut des body-Elements.

~dave

[Gunnar Bittersmann]

@@Timmytom:

nuqneH

<script language="javascript">

Das @language-Attribut ist unsinnig. In HTML4/XHTML1 fehlt @type="text/javascript". Da auch das etwas unsinnig ist, wurde es in HTML5 für überflüssig erklärt, und [code lang=html]<script>

  

> var state = 'hidden';  
  
Wenn eine Variable nur 2 Zustände annehmen kann, bietet sich eine boolesche an:  
  
`var isVisible = false;`{:.language-javascript}  
  

> if (state == 'visible') {  
> state = 'hidden';  
> }  
> else {  
> state = 'visible';  
> }  
  
Das Umschalten geht dann einfach per Negation:  
  
`isVisible =!isVisible;`{:.language-javascript}  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[dave]

Hi,

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}

Das Umschalten geht dann einfach per Negation:

isVisible =!isVisible;

Dann muss man beim zuweisen des Wertes an .style.visibility aus true oder false wieder 'hidden' oder 'visible' machen.
Ich sehe hier keinen Nutzen.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Dann muss man beim zuweisen des Wertes an .style.visibility aus true oder false wieder 'hidden' oder 'visible' machen.

Dann kann man auch gleich style.visibility verwenden — ohne noch eine zusätzliche Variable.

Aber wie molily schon sagte, sollte man gar keine style-Eigenschaften per JavaScript ändern, sondern eine Eigenschaft eines Vorfahrenelements. Den Rest erledigt das Stylesheet.

Qapla'

[suit]

Aber wie molily schon sagte, sollte man gar keine style-Eigenschaften per JavaScript ändern,

Zumindest nicht manuell - wenn ein Framework das tut, spricht nichts dagegen (z.B. addClass() in jQuery, welches dann mit einer optionalen Zeitkomponente nicht nur die Klasse "hart" hinzufügt sondern auch weich überblendet. Und jetzt komm mir nicht mit CSS3 :)

[Timmytom]

Das ist mein Code. Könnte ihr mir bitte jemand so umbauen, das er für classen funktioniert? Weil ich möchte damit gerne mehre Zeilen einer Tabelle verstecken und beim klicken auf einen Link sichtbar machen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Hide and Show Javascript Code</title>  
<script language="javascript">  
var state = 'hidden';  
  
function showhide(layer_ref) {  
  
if (state == 'visible') {  
state = 'hidden';  
}  
else {  
state = 'visible';  
}  
if (document.getElementsByClassName && !document.all) {  
maxwell_smart = document.getElementsByClassName(layer_ref);  
maxwell_smart.style.visibility = state;  
}  
}  
//-->  
</script>  
</head>  
  
<body>  
<!-- HIDDEN INFORMATION TO BE SHOWN ONCLICK -->  
<div class="agent99" style="  
visibility:hidden;">  
<H1>Wallpaperama Rocks!!</H1>  
</div>  
<!-- END - HIDDEN INFORMATION TO BE SHOWN ONCLICK -->  
<p>&nbsp;</p>  
<p><a href="javascript://" onclick="showhide('agent99');">click me</a> to see my content!  
</p>  
</body>  
</html>  
~  

Wäre richtig nett, wenn mir jemand dabei helfen könnte.

[dave]

Hi,

Das ist mein Code. Könnte ihr mir bitte jemand so umbauen, das er für classen funktioniert?

Ich kann zwar nur für mich sprechen, aber wenn ich für dich arbeiten soll dann möchte ich auch Geld dafür.
Was zahlst du?

~dave

[Timmytom]

Hi,

Das ist mein Code. Könnte ihr mir bitte jemand so umbauen, das er für classen funktioniert?

Ich kann zwar nur für mich sprechen, aber wenn ich für dich arbeiten soll dann möchte ich auch Geld dafür.
Was zahlst du?

~dave

Ein Danke schöööööön :)

[Matthias Apsel]

Om nah hoo pez nyeetz, Timmytom!

Das ist mein Code. Könnte ihr mir bitte jemand so umbauen, das er für classen funktioniert?

Ich kann zwar nur für mich sprechen, aber wenn ich für dich arbeiten soll dann möchte ich auch Geld dafür.
Was zahlst du?

Ein Danke schöööööön :)

Hier ist nicht gethtml.

Matthias