schließenbutton erstellen

  • hallo 70abc,

    danke für die antwort :)

    ich hab es mal ausprobiert und im moment geht gar nichts mehr (siehe hier )
    dreamweaver sagt mir beim debugen im IE das ab hier (<!-- hier -->) etwas falsch ist:

    Quellcode

    1. if(types[i] != type && document.getElementById(types[i] + id) <!-- hier -->{
    2. document.getElementById(types[i] + id).display = 'none';
    3. }
    4. }
    5. }


    ich hatte mich für deine erste variante entschieden und später gemerkt das du beim befehl toogle zahlen zugewiesen hattest, die aber im script nicht vorkommen (für mich nicht zu sehen). in dem fall ist es die 15 vor 'Text'

    Quellcode

    1. "javascript:toggle(15, 'Text');"


    nun weiß ich nicht ob es damit etwas zu tun hat, das da nix funktioniert. ich müsste die dann, wie in dem fall die 15 in den div-zuweisungen mit einfügen :?:

    Quellcode

    1. <div id=15, "Text" class="container">


    ('container' ist die zuweisung für die sich schließenden divs)

  • "laco1" schrieb:


    Quellcode

    1. if(types[i] != type && document.getElementById(types[i] + id) <!-- hier -->{
    2. document.getElementById(types[i] + id).display = 'none';
    3. }
    4. }
    5. }



    Sorry, da fehlt eine Klammer:

    Quellcode

    1. if(types[i] != type && document.getElementById(types[i] + id)){
    2. document.getElementById(types[i] + id).display = 'none';
    3. }


    "laco1" schrieb:


    ich hatte mich für deine erste variante entschieden und später gemerkt das du beim befehl toogle zahlen zugewiesen hattest, die aber im script nicht vorkommen (für mich nicht zu sehen). in dem fall ist es die 15 vor 'Text'

    Quellcode

    1. "javascript:toggle(15, 'Text');"


    nun weiß ich nicht ob es damit etwas zu tun hat, das da nix funktioniert. ich müsste die dann, wie in dem fall die 15 in den div-zuweisungen mit einfügen :?:


    Nein, in die Divs musst Du nichts einfügen, die Divs haben doch schon IDs...

    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan

  • ja, also dann text01 02 etc... ok

    die 15 hat also nichts mit den zuweisungen zu tun?

    Quellcode

    1. "javascript:toggle(15, 'Stills');"


    wenn ich 15 drin lasse öffnet sich gar nichts, lass ich sie weg öffnet sich der "klapptext"

    für den close-button habe ich jetzt folgenden code genommen. beim anklicken des buttons werden aber immer noch alle und nicht nur die angegebene id geschlossen z.b. 'Text' und 'Stills'

    Quellcode

    1. <a href=""javascript:closenfo('Stills');" ');"');"');"');"');"');"">


    merkwürdigerweise wurden diese mehrfachklammern dazugeneriert

    Quellcode

    1. ;" ');"');"');"');"');"');""




    nach etwas suchen bin ich noch auf eine funktion in eine.js datei einer anderen seite gestoßen - ich kann damit leider gar nichts anfangen, nur stand da darüber, das es eine funktion zum ein- und ausklappen eines elements ist. ich dachte nur, vielleicht kann man auch diese nutzen?

    Quellcode

    1. ////////// Element auf- oder zuklappen //////////////////////////////
    3. function popupOrHide(elementId) {
    4. with(document.getElementById(elementId).style) {
    5. if (display == 'block') display = 'none';
    6. else display = 'block';
    7. }
    8. }


    ich wüsste aber auch nicht wie da die id zuweisung funktioniert... :?:

  • "laco1" schrieb:

    ja, also dann text01 02 etc... ok

    die 15 hat also nichts mit den zuweisungen zu tun?

    Quellcode

    1. "javascript:toggle(15, 'Stills');"



    Deine Divs schaun doch so aus:

    Quellcode

    1. <div id="Text15" class="container">...
    2. </div>
    3. <div id="Stills15" style="display: none;"> ..
    4. </div>
    5. <div id="Text14" class="container">...
    6. </div>
    7. ...


    Die 15 hier

    Quellcode

    1. "javascript:toggle(15, 'Stills');"

    Steht für alle Divs wo die Zahl in der Id 15 ist, also "Text15", "Stills15".
    D.h. wenn Du obige Zele aufrufst, sollten alle Divs die mit 15 geschlossen werden und das Div "Stills15" sollte geöffnet werden.

    Der Button für die "14"-Divs müsste dann so aussehen:

    Quellcode

    1. "javascript:toggle(14, 'Stills');"


    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan

  • "laco1" schrieb:

    hallo 70abc,

    es funktioniert zwar der schließmechanismus, aber leider nur global d.h. er schließt alle geöffenten texte trotz zuweisung

    Quellcode

    1. <a href=""javascript:closenfo(15, 'Stills');" ');"');"">

    oder

    Quellcode

    1. <a href=""javascript:closenfo(15, 'Text');" ');"');"">


    siehe hier
    hier


    Sorry, aber ich werde aus dem was Du da oben schreibst nicht wirklich schlau und wenn ich mir den Link anschaue, dann kann ich da nicht's erkennen, was mich an meinen Code erinnert.

    Mach doch mal eine Bsp-Seite mit nur zwei Elementen und dem von mir vorgeschlagenen Code und ich schau's mir dann mal an...

    Und schau Dir Deinen HTML-Code nochmal genau an, da sind immer noch Fehler drin...

    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan

  • Hallo,

    ich hab mir jetzt mal die Mühe gemacht den original Code Deiner Seite runter zu laden und ein funtkionierendes Bsp mit zwei Filmen zu machen. Der Rest müsste dann analog angepasst werden.

    Bei der Gelegenheit würde ich mir mal überlegen den HTML-Code komplett zu überarbeiten...

    Quellcode

    1. <html>
    2. <head>
    3. <title>Martin D'Costa, Dschungelfilm, Kamera, Schnitt, Produktion - Alle Projekte</title>
    4. <link href="http://www.dschungelfilm.de/scripte/css.css" rel="stylesheet" type="text/css">
    5. <script language="JavaScript" src="http://www.dschungelfilm.de/scripte/java.js" type="text/JavaScript"></script>
    6. <script type="text/javascript">
    7. function toggle(id, type)
    8. {
    9. types = new Array('Text', 'Stills');
    10. var ans = document.getElementById(type + id);
    11. var strId;
    12. if (ans) {
    13. if (ans.style.display != 'block') {
    14. ans.style.display = 'block';
    15. } else {
    16. ans.style.display = 'none';
    17. }
    18. }
    20. for (var i = 0; i < types.length; ++i) {
    21. strId = types[i] + id;
    22. if(types[i] != type && document.getElementById(strId)) {
    23. document.getElementById(strId).style.display = 'none';
    24. }
    25. }
    26. }
    27. </script>
    28. </head>
    29. <body onLoad="MM_preloadImages('http://www.dschungelfilm.de/bilder/testg.jpg','http://www.dschungelfilm.de/bilder/tests.jpg')">
    30. <div align="left">
    31. <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="560" id="AutoNumber1">
    32. <tr>
    33. <td width="80">&nbsp;</td>
    34. <td width="85" rowspan="2">&nbsp;</td>
    35. <td width="40" height="30" rowspan="2" colspan="4">
    36. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin.jpg" width="43" height="24">
    37. </td>
    38. <td width="355" height="7">
    39. <p style="margin-left: 10"><b>FOTOS: "ICH BIN FÜR DICH DA"</b></p>
    40. </td>
    41. </tr>
    42. <tr>
    43. <td width="80">&nbsp;</td>
    44. <td width="355" height="8"><p style="margin-left: 10">Musikvideo / 2006</p></td>
    45. </tr>
    46. <tr>
    47. <td width="80">&nbsp;</td>
    48. <td width="85">&nbsp;</td>
    49. <td width="8" height="12">
    50. <a href="javascript:toggle(15, 'Text');" title="info" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image48','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    51. <img name="Image48" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    52. </a>
    53. </td>
    54. <td width="8" height="12">
    55. <a href="javascript:toggle(15, 'Stills');" title="stills" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image47','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    56. <img name="Image47" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    57. </a>
    58. </td>
    59. <td width="8" height="12">
    60. <a href="#" onClick="MM_openBrWindow('http://www.dschungelfilm.de/filme/ich_bin.html','','width=325,height=290')" title="film" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    61. <img name="Image46" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    62. </a>
    63. </td>
    64. <td width="16" height="12">
    66. <td width="355" height="12">&nbsp;
    67. </tr>
    68. <tr>
    69. <td width="80">&nbsp;</td>
    70. <td width="85">&nbsp;</td>
    71. <td width="40" colspan="4">&nbsp;</td>
    72. <td width="355">
    73. <div id="Text15" class="container">
    74. <font color="#999933"><b>INFO</b></font><br>
    75. Nachfolger der Single „Giganten“. Ein actionreiches, mehrfach ironisch
    76. gebrochenes Box-Video, in dem die angeschlagene Band von einer verdammt
    77. coolen Frau ordentlich auf die Fresse kriegt...<br>
    78. <font color="#FFFFFF"><b><span style="background-color: #999933">Kamera</span></b></font><span style="background-color: #999933"><font color="#FFFFFF">
    79. / 4 min., DigiBeta, gedreht auf 16mm / für Labels Musik & Filmlounge
    80. Berlin / Regie: Christian Theede&nbsp;</font> </span>
    81. &nbsp;<span style="font-size: 7pt; font-weight:bold; cursor:pointer" onclick="document.getElementById('Text15').style.display = 'none'">CLOSE</span>
    82. </div>
    83. </td>
    84. </tr>
    85. <tr>
    86. <td width="80">&nbsp;</td>
    87. <td width="475" colspan="6">
    88. <div id="Stills15" style="display: none;">
    89. <font color="#999933"><b><span style="margin-left: 135">STILLS</span></b></font>
    90. <p style="margin-left: 0"><img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_1.jpg" width="152" height="85">&nbsp;&nbsp;
    91. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_2.jpg" width="152" height="85">&nbsp;&nbsp;
    92. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_3.jpg" width="152" height="85"></p>
    93. <p><img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_4.jpg" width="152" height="85">&nbsp;&nbsp;
    94. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_5.jpg" width="152" height="85">&nbsp;&nbsp;
    95. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Ich_bin/Ich_bin_6.jpg" width="152" height="85">
    96. <span style="margin-left: 147; font-size: 7pt; font-weight:bold; cursor:pointer" onclick="document.getElementById('Stills15').style.display = 'none'">CLOSE</span>
    97. </p>
    98. </div>
    99. </td>
    100. </tr>
    101. <tr>
    102. <td width="80">&nbsp;</td>
    103. <td width="85">&nbsp;</td>
    104. <td width="40" colspan="4">&nbsp;</td>
    105. <td width="355">&nbsp;</td>
    106. </tr>
    107. <tr>
    108. <td width="80">&nbsp;</td>
    109. <td width="85" rowspan="2">&nbsp;</td>
    110. <td width="40" height="30" rowspan="2" colspan="4">
    111. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten.jpg" width="43" height="24"></td>
    112. <td width="355" height="7"><p style="margin-left: 10"><b>FOTOS: &quot;GIGANTEN&quot;</b></p></td>
    113. </tr>
    114. <tr>
    115. <td width="80">&nbsp;</td>
    116. <td width="355" height="8"><p style="margin-left: 10">Musikvideo / 2006</p></td>
    117. </tr>
    118. <tr>
    119. <td width="80">&nbsp;</td>
    120. <td width="85">&nbsp;</td>
    121. <td width="8" height="12">
    122. <a href="javascript:toggle(14, 'Text');" title="info" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image45','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    123. <img name="Image45" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    124. </a>
    125. </td>
    126. <td width="8" height="12">
    127. <a href="javascript:toggle(14, 'Stills');" title="stills" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image44','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    128. <img name="Image44" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    129. </a>
    130. </td>
    131. <td width="8" height="12">
    132. <a href="#" onClick="MM_openBrWindow('http://www.dschungelfilm.de/filme/giganten.html','','width=325,height=290')" title="film" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image43','','http://www.dschungelfilm.de/bilder/testg.jpg',1)">
    133. <img name="Image43" border="0" src="http://www.dschungelfilm.de/bilder/tests.jpg" width="4" height="12">
    134. </a>
    135. </td>
    136. <td width="16" height="12">
    137. <td width="355" height="12">&nbsp;
    138. </tr>
    139. <tr>
    140. <td width="80">&nbsp;</td>
    141. <td width="85">&nbsp;</td>
    142. <td width="40" colspan="4">&nbsp;</td>
    143. <td width="355">
    144. <div id="Text14" class="container">
    145. <font color="#999933"><b>INFO</b></font><br>
    146. Urlaubsclip f&uuml;r eine vierk&ouml;pfige, deutschrockpopspielende
    147. „Jungs-Band“. Eine Fahrt mit BMW 635CSI zum Strand. Ein grandioser Sonnenuntergang.
    148. Echt wahr...<br>
    149. <font color="#FFFFFF"><b><span style="background-color: #999933">Kamera
    150. </span></b><span style="background-color: #999933">/ 4 min., DigiBeta,
    151. gedreht auf 16mm / f&uuml;r Labels Musik / Regie &amp; Kamera: Christian
    152. Theede&nbsp;</span></font>
    153. &nbsp;<span style="font-size: 7pt; font-weight:bold; cursor:pointer" onclick="document.getElementById('Text14').style.display = 'none'">CLOSE</span>
    154. </div>
    155. </td>
    156. </tr>
    157. <tr>
    158. <td width="80">&nbsp;</td>
    159. <td width="475" colspan="6">
    160. <div id="Stills14" style="display: none;">
    161. <font color="#999933"><b><span style="margin-left: 135">STILLS</span></b></font>
    162. <p style="margin-left: 0"><img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_1.jpg" width="152" height="85">
    163. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_2.jpg" width="152" height="85">
    164. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_3.jpg" width="152" height="85"></p>
    165. <p><img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_4.jpg" width="152" height="85">
    166. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_5.jpg" width="152" height="85">
    167. <img border="0" src="http://www.dschungelfilm.de/bilder/thumbs/2006_Giganten/Giganten_6.jpg" width="152" height="85">
    168. <span style="margin-left: 147; font-size: 7pt; font-weight:bold; cursor:pointer" onclick="document.getElementById('Stills14').style.display = 'none'">CLOSE</span>
    169. </p>
    170. </div>
    171. </td>
    172. </tr>
    173. <tr>
    174. <td width="80">&nbsp;</td>
    175. <td width="85">&nbsp;</td>
    176. <td width="40" colspan="4">&nbsp;</td>
    177. <td width="355">&nbsp;</td>
    178. </tr>
    179. </table>
    180. </div>
    181. </body>
    182. </html>
    Alles anzeigen


    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan

  • Moin

    "laco1" schrieb:

    ok,

    ich hab noch mal eine gebaut mit einem einzigen button - leider funktioniert da im moment gar nichts, warum weiß ich noch nicht...

    der schwarze button ganz oben

    achso, die close-button-funktion kam von bendtit


    was meinst du genau für fehler?

    .



    Die Funktion die ich gepostet hab (s.o.) SOLL auch alle ellemente schließen (die in der schleife definiert werden). Wenn du diese funktion aufrufst bevor du ein neues ellement öffnest hast du genau den effekt den du haben willst. lies dir das am besten nochmal durch (z.b. 11 postings weiter oben) und meld dich falls noch was unklar ist.
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • @70abc :)
    gefällt mir,
    aber wenn man es so anlegt, könnte man ja eigentlich den close button auch ganz weglassen - geht das? also bei jedem klick auf einen button (wie hier - nur bleibt bei dem klick auf die nächste videoinfo die vorherige videoinfo offen) werden alle anderen geöffneten id geschlossen (an diese funktion hatte ich noch gar nicht gedacht - der betreiber der homepage wollte zwar einen button zum schließen - finde diese version besser)
    wäre das ^^ die lösung von bendit?

  • "laco1" schrieb:

    @70abc :)
    gefällt mir,
    aber wenn man es so anlegt, könnte man ja eigentlich den close button auch ganz weglassen - geht das? also bei jedem klick auf einen button (wie hier - nur bleibt bei dem klick auf die nächste videoinfo die vorherige videoinfo offen) werden alle anderen geöffneten id geschlossen (an diese funktion hatte ich noch gar nicht gedacht - der betreiber der homepage wollte zwar einen button zum schließen - finde diese version besser)
    wäre das ^^ die lösung von bendit?


    Klar geht's auch ohne den Close-Button, lass den Code halt einfach weg. Du hattest ja geschrieben, das immer nur die anderen Divs innerhalb eines Films zu gehen sollen und NICHT alle anderen Divs. Ob das mit bendit's Lösung geht kann ich nicht sagen, weil ich mir die nicht angeschaut habe. Aber ich habe weiter oben eine Lösung dafür gepostet:

    Sollen die Divs aller anderen Filme auch geschlossen werden, dann müsste man einen anderen Ansatz verfolgen:

    Ich gehe jetzt mal davon aus, das die CSS-Klasse "container" nur von den ein/auszublendenden Divs verwendet wird, falls nicht, musst Du deine HTML-Code entsprechen ab ändern!

    Quellcode

    1. function toggle(name)
    2. {
    3. for (var i = 0; i < document.getElementsByTagName('div').length; i++) {
    4. if(document.getElementsByTagName('div')[i].className == 'container') {
    5. document.getElementsByTagName('div')[i].display = 'none';
    6. }
    7. }
    8. var ans = document.getElementById(name);
    9. if (ans) {
    10. if (ans.style.display != 'block') {
    11. ans.style.display = 'block';
    12. } else {
    13. ans.style.display = 'none';
    14. }
    15. }
    16. }
    Alles anzeigen



    Der Aufruf der Funktion muss dann aber wieder so aussehen: <a href="javascript:toggle('Text15');" .......
    70abc
    We raise hopes, here ... until they're old enough to fend for themselves.
    - Mike Callahan