Wie kann ich das machen?

[Chris]

Hallo! Ich hoffe ihr könnt mir weiterhelfen. Ich versuche es mal zu erklären. Hier seht ihr einen Auschnitt wo sich nach dem klicken auf den Link "GROßER TEXT" das div öffnet und die per include eingefügte datei anzeigt.

<!--############# Test #############-->

<td colspan="2" height="10" align="center" class="ueber" style="background-color:white;color:#770000;font-weight:bold;">
<a href="javascript:show('test1')">GROßER TEXT</a>

<div id="test1" class="margin" style="display:none;">
<center>
<table class="info" width="95%" cellspacing="0" cellpadding="0" border="0">
 <?php
 include ("test1.html");
 ?>
</table>
</center>
</div>
</td>
<!--############# Test Ende #############-->

Jetzt möchte ich aber, das wenn das div geöffnet ist, die <td> in der der Link "GROßER TEXT" ist, anders dargestellt wird (z.B. andere background-color) und somit dann als Überschrift erkennbar ist.

Ich hoffe ihr versteht es was ich meine!

Danke euch schonmal!

Gruß Chris

[der-daniel]

hallo!

href="javascript:show('test1')"

nachdem du ja ohnehin per javascript dein "display:none" veränderst, musst du nur dein javascript entsprechend ergänzen und schon hast du deinen gewünschten effekt:

wenn du dein javascript kopierst, helfe ich gerne beim ergänzen...

lg,
der-daniel

[Chris]

nachdem du ja ohnehin per javascript dein "display:none" veränderst, musst du nur dein javascript entsprechend ergänzen und schon hast du deinen gewünschten effekt:

wenn du dein javascript kopierst, helfe ich gerne beim ergänzen...

Hi, hier ist der betroffene Teil aus dem head-bereich. Aber frage mich nicht was ich da ändern muss, da ich das nicht alleine programmiert habe:

<script type="text/javascript">
function show(me)
{if(document.getElementById(me).style.display == 'none') {document.getElementById(me).style.display = '';}
else {document.getElementById(me).style.display = 'none';}}
</script>

[der-daniel]

hi,

wie godlike schon schrieb, könntest du seinen vorschlag auch ohne extra onclick umsetzen:

<script type="text/javascript">
function show(me)
{
 if(document.getElementById(me).style.display == 'none')
 {
  document.getElementById(me).style.display = 'none';}
  document.getElementById(ueber).style.background-color = '#000000';}
 }
}
</script>

hab dein skript auch ein wenig gekürzt... ;)

lg,
der-daniel

p.s.: ich glaube es heisst background-color statt backgroundColor wie godlike schrieb...

[Rafael]

p.s.: ich glaube es heisst background-color statt backgroundColor wie godlike schrieb...

-> nein backgroundColor ist richtig. background-color ist die CSS-Vorschrift

[der-daniel]

ja, aber er hat's doch per css formatiert, somit muss man's auch per css umformatieren... ;)

[D.R.]

Hallo,

p.s.: ich glaube es heisst background-color statt backgroundColor wie godlike schrieb...

Du möchtest also background minus color rechnen?

http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

mfg. Daniel

[der-daniel]

Hallo,

hi!

Du möchtest also background minus color rechnen?

hehe, vielleicht gibt das eine ganz neue farb-erfahrung...
sorry, hatte ich nicht gewusst....

mfg,
der-daniel

[Chris]

Also ich habe es jetzt mehrfach probiert. dies ist mein header-code:

########################################
<script type="text/javascript">
function show(me)
{if(document.getElementById(me).style.display == 'none') {
 document.getElementById(me).style.display = '';
 document.getElementById(ueber).style.backgroundColor = '#000000';
 } else {
 document.getElementById(me).style.display = 'none';}}
</script>
########################################

und dann im text dieser code:

########################################

<td colspan="2" height="10" align="center" id="ueber">
<a href="javascript:show('test')">GROSSER TEXT</a>
<div id="test" class="margin" style="display:none;">
<center>
<table class="info" width="95%" cellspacing="0" cellpadding="0" border="0">
<?php
include ("test.html");
?>
</table>
</center>
</div>
</td>
########################################

Aber es funktioniert nicht mit der Hintergrundfarbe.
Das Skript an sich funktioniert aber.

Hab ich einen Fehler drin?

[Chris]

...der Fehler müsste darin liegen, das der Aufruf nicht in der funktion show(me) liegt. Da ja die id ausserhalb der funktion aufgerufen wird, aber die Änderung des BackgroundColors innerhalb der funktion definiert ist.

Was kann ich denn da machen?

[der-daniel]

hi chris,

tut mir leid, ich hab die anführungszeichen übersehen:

statt
document.getElementById(ueber).style.backgroundColor = '#000000';

funktioniert
document.getElementById('ueber').style.backgroundColor = '#000000';

weil me ist eine variable, während uerber die direkte angabe des namens ist.... ;)

lg,
der-daniel

[Chris]

hi chris,

tut mir leid, ich hab die anführungszeichen übersehen:

Ist nicht schlimm. Aber kannst du mir da jetzt weiterhelfen, was ich jetzt noch machen kann?

Danke Dir

[der-daniel]

Ist nicht schlimm. Aber kannst du mir da jetzt weiterhelfen, was ich jetzt noch machen kann?

was möchtest du denn noch machen? hab ich was übersehen?

lg,
der-daniel

[Chris]

was möchtest du denn noch machen? hab ich was übersehen?

Ja, hatte weiter oben schon geantwortet gehabt (weil der background so bleibt, auch wenn das div wieder geschlossen wurde):

wann soll sich denn das div wieder "rücksetzen"?

Na wenn man wieder auf den Link klickt, der auch das div geöffnet hat.

...wenn möglich, kann sich dass div auch rücksetzen, wenn wie gesagt der Link wieder angeklickt wird UND bzw. ODER ein anderer Link mit anderer funktion show(me) angeklickt wird.

Quasi habe ich ja mehr dieser links:

<a href="javascript:show('test')">test</a>
<div id="test" class="margin" style="display:none;">
blabla
</div>

<a href="javascript:show('test1')">test</a>
<div id="test1" class="margin" style="display:none;">
blabla
</div>

<a href="javascript:show('test2')">test</a>
<div id="test2" class="margin" style="display:none;">
blabla
</div>

..usw.

Also wenn dann test geöffnet ist, kann sich dieser auch schliessen wenn ich test2 aufrufe....

[der-daniel]

hi chris,

achso, jetzt weiss ich was du meinst.
ich dachte das hätte sich erledigt, weil du's ja schon mehr oder weniger selbst hingekriegt hast.
du kannst das analog zur display-eigenschaft machen:

function show(me)
{
 if(document.getElementById(me).style.display == 'none')
 {
  document.getElementById(me).style.display = '';
  document.getElementById('ueber').style.backgroundColor = '#ffffff';
 }
 else
 {
  document.getElementById(me).style.display = 'none';
  document.getElementById('ueber').style.backgroundColor = 'ALTE FARBE';
 }
}

lg,
der-daniel

[Chris]

Hi daniel nochmal. Aber was ist denn noch mit dem automatischen schließen des div's, wenn ich ein anderes aufgerufen habe? Das geht noch nicht.

Irgendwie kriege ich das mit der farbe nicht hin:

So geht es:

<script type="text/javascript">
function show(me)
{if(document.getElementById(me).style.display == 'none') {
 document.getElementById(me).style.display = '';
 document.getElementById('ueber').style.backgroundColor = '#000000';
 } else {
 document.getElementById(me).style.display = 'none';}
}

und wenn ich es dann mit der alten farbe noch machen will, bleibt es weiß alles:

<script type="text/javascript">
function show(me)
{if(document.getElementById(me).style.display == 'none') {
 document.getElementById(me).style.display = '';
 document.getElementById('ueber').style.backgroundColor = '#000000';
 } else {
 document.getElementById(me).style.display = 'none';}
 document.getElementById('ueber').style.backgroundColor = '#ffffff';
}

[der-daniel]

hi, du hast einen kleinen klammer-fehler:

falsch:
else {
 document.getElementById(me).style.display = 'none';} <-- (!!!!!!!)
 document.getElementById('ueber').style.backgroundColor = '#ffffff';
}

richtig
else {
 document.getElementById(me).style.display = 'none';
 document.getElementById('ueber').style.backgroundColor = '#ffffff';}
}

lg,
der-daniel

[Chris]

hi, du hast einen kleinen klammer-fehler:

Hi stimmt, danke! Und wie kann ich das jetzt noch machen, dass sich die Links schließen, wenn ich einen anderen anklicke?

Danke nochmal! :)

[der-daniel]

hi nochmal!

Hi stimmt, danke! Und wie kann ich das jetzt noch machen, dass sich die Links schließen, wenn ich einen anderen anklicke?

meiner meinung anch ist die einfachste methode, wenn du alle funktionen einfach mit einer fortlaufenden nummern versiehst (test1, test2, test3...).
dann kannst du im skript einfach alle anderen, ausser die eben angeklickte, in einer schleife durchgehen und ausblenden:

function show(me)
{
 for(i=1; i<=10; i++) //angenommen es gibt test1-test10
 {
  var tmplnk = me+i;
  if(tmplnk == me)
  {
   document.getElementById(me).style.display = 'block';
   document.getElementById('ueber').style.backgroundColor = '#000000';
  }
  else
  {
   document.getElementById(me).style.display = 'none';
   document.getElementById('ueber').style.backgroundColor = '#ffffff';
  }
 }
}

Danke nochmal! :)

bitte gerne,
der-daniel ;)

[Chris]

gut, müsste ich mal probieren. Danke dafür.

Idee ist ja so nicht schlecht. Aber ist es schwer, es so zu machen, das wenn die ID nicht gleich ist, das es dann ausgeblendet wird?

Soll nicht heißen dass ich mit deinem Vorschlag zufrieden bin! :) Dann muss ich die ID´s halt so benennen.

Chris

[der-daniel]

Idee ist ja so nicht schlecht. Aber ist es schwer, es so zu machen, das wenn die ID nicht gleich ist, das es dann ausgeblendet wird?

das skript blendet alles aus, das nicht die id des angeklickten links hat.
du kannst ja die ids benennen wie du willst, nur müsstest du für jede einzelne id eine if-abfrage einfügen um ebenselbiges zu schließen:
document.getElementById('NAME DES IDS').style.display = 'none';

es ist schlichtweg effizienter, wenn du's so machst...

lg,
der-daniel

[Chris]

Hallo Daniel,

leider funktioniert es jetzt so auch nicht.

meiner meinung anch ist die einfachste methode, wenn du alle funktionen einfach mit einer fortlaufenden nummern versiehst (test1, test2, test3...).
dann kannst du im skript einfach alle anderen, ausser die eben angeklickte, in einer schleife durchgehen und ausblenden:

function show(me)
{
for(i=1; i<=10; i++) //angenommen es gibt test1-test10
{
  var tmplnk = me+i;
  if(tmplnk == me)
  {
   document.getElementById(me).style.display = 'block';
   document.getElementById('ueber').style.backgroundColor = '#000000';
  }
  else
  {
   document.getElementById(me).style.display = 'none';
   document.getElementById('ueber').style.backgroundColor = '#ffffff';
  }
}
}

Da ich ja auch bei jedem Link die id "ueber" vergebe, geht es immer nur bei dem ersten Link.
Kann man das nicht auch mit einem prefix machen? Das dann z.B. 1ueber, 2ueber, 3ueber usw geht?

Danke

[der-daniel]

Hallo Daniel,

hi chris!

Da ich ja auch bei jedem Link die id "ueber" vergebe, geht es immer nur bei dem ersten Link.
Kann man das nicht auch mit einem prefix machen? Das dann z.B. 1ueber, 2ueber, 3ueber usw geht?

natürlich, einfach copy/paste und fertig...

function show(me)
{
 for(i=1; i<=10; i++) //angenommen es gibt test1-test10
 {
  var tmplnk = me+i;
  var tmpcnt = i+ueber;
  if(tmplnk == me)
  {
   document.getElementById(me).style.display = 'block';
   document.getElementById(tmpcnt).style.backgroundColor = '#000000';
  }
  else
  {
   document.getElementById(me).style.display = 'none';
   document.getElementById(tmpcnt).style.backgroundColor = '#ffffff';
  }
 }
}

lg,
der-daniel

[chris]

natürlich, einfach copy/paste und fertig...

Mhh, leider nicht... dann gehen die divs garnicht auf!

Und ich rufe die links dann so auf:

<td id="1ueber">
<a href="javascript:show('test1')">TEST</a>
</td>
<td><div id="test1" style="display:none;">INHALT</div></td>

Mache ich was falsch?

[chris]

Hi Daniel, habe mal die Datei hochgeladen. Dort kannst du es dir genau ansehen.
Ich habe die Änderung die du gepostet hast verwendet.

Testseite

Gruß Chris

[Rafael]

Den Text erreichst du mit this.innerHTML und die Farbe per this.style.background oder so ähnlich.

Das schwarfe-s schreibt sich bei Großschreibung übrigens "SS".
Grüße.

[wucher wichtel]

Hallo!

Das schwarfe-s schreibt sich bei Großschreibung übrigens "SS".

Bist du sicher? AFAIK kann man nach langen Vokalen ein "ß" schreiben. Ob man das muss, weiß ich nicht.

ciao, ww

[GodLike]

Hallo Chris,

ich weiss nicht ob ich dich jetzt richtig verstanden habe.
Aber du möchtest einfach nur die Hintergrundfarbe des ersten <td> in deinem Code ändern, wenn auf den Link geklickt wurde?!

<a href="javascript:show('test1')">GROßER TEXT</a>

Mein Vorschlag:~~~html

<a href="javascript:show('test1');" onclick="document.getElementById('ueber').style.backgroundColor=[andereFarbe];return true;">

  
Du musst aber der <td> noch die id 'ueber' zuweisen. Du könntest den Zugriff auf das <td> natürlich auch anders gestalten.  
  
GodLike  
  
PS: Das ist aber nicht unbedingt ein PHP-Problem oder?! (Mich stört es zwar nicht, aber trotzdem;-))

[Chris]

Hi GodLike, der Vorschlag ist gut und verständlich. Werds mal probieren ob ich es hinbekomme. :)

PS: Das ist aber nicht unbedingt ein PHP-Problem oder?! (Mich stört es zwar nicht, aber trotzdem;-))

Habe ich jetzt auch mit bekommen auf Grund der Antworten. Dachte es lösen zu können mittels php und if - else oder so...

Naja, nun weiß ich das es auch anders geht!

[Chris]

So habe es jetzt mal getestet, aber mit deinem code hat es nicht funktioniert.
Mit diesem schon:
          <td colspan="2" height="10" align="center" style="background-color:white;color:#770000;font-weight:bold;" id="ueber">
<a href="javascript:show('test')" onclick="document.getElementById('ueber').style.background='blue';return true;">test</a>

So das Problem ist aber weiterhin, dass ich die Änderungen nur haben will wenn das div geöffnet wurde mit dem Link. Also nicht wenn der link quasi geschlossen ist und style=none ist.

Weil so müsste ich  die Seite immer wieder aktualisieren um die onclick sache wieder weg zu bekommen.

[der-daniel]

Weil so müsste ich  die Seite immer wieder aktualisieren um die onclick sache wieder weg zu bekommen.

wann soll sich denn das div wieder "rücksetzen"?
einfach so geht das nicht, du musst das ja irgendwie auslösen, z.b. wenn ein anderer inhalt angezeigt werden soll, oder wenn nochmal geklickt wurde, oder so...

[Chris]

wann soll sich denn das div wieder "rücksetzen"?
einfach so geht das nicht, du musst das ja irgendwie auslösen, z.b. wenn ein anderer inhalt angezeigt werden soll, oder wenn nochmal geklickt wurde, oder so...

Na wenn man wieder auf den Link klickt, der auch das div geöffnet hat.

[Chris]

wann soll sich denn das div wieder "rücksetzen"?

Na wenn man wieder auf den Link klickt, der auch das div geöffnet hat.

...wenn möglich, kann sich dass div auch rücksetzen, wenn wie gesagt der Link wieder angeklickt wird UND bzw. ODER ein anderer Link mit anderer funktion show(me) angeklickt wird.

Quasi habe ich ja mehr dieser links:

<a href="javascript:show('test')">test</a>
<div id="test" class="margin" style="display:none;">
blabla
</div>

<a href="javascript:show('test1')">test</a>
<div id="test1" class="margin" style="display:none;">
blabla
</div>

<a href="javascript:show('test2')">test</a>
<div id="test2" class="margin" style="display:none;">
blabla
</div>

..usw.

Also wenn dann test geöffnet ist, kann sich dieser auch schliessen wenn ich test2 aufrufe....