nicht angemeldet
Checkbox DIV einblenden (Flash)
0 0 
Gernot Back
0 0
Checkbox DIV einblenden (Flash)
Hallo,
ich möchte folgendes realisieren.
Wenn eine Checkbox angeklickt wird, soll eine Ebene eingeblendet werden. Wird die Checkbox deaktiviert, soll die Ebene wieder ausgeblendet werden.
Mein Script funktioniert ohne Flash bei IE, Firefox & Opera wunderbar.
Mit Flash funktioniert es leider nur bei Opera. Sollte aber auch bei IE und Firefox funktionieren.
Was muss ich im Script ändern, damit es auch mit dem Flash-Objekt funktioniert.
Wer kann mir bitte helfen. Ich komme leider nicht mehr weiter.
Hier mein Quellcode:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script language="JavaScript">
<!--
function showList(feld) {
if(feld=='0') {var f_id='sListe1';}
if (document.formular.elements[feld].checked == true) {
document.getElementById(f_id).style.display='';
}
else{
document.getElementById(f_id).style.display='none';
}
}
//-->
</script>
</head>
<body>
<form name="formular">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="430" height="40">
<param name="movie" value="swf/headline430x40-hexFFBE0A.swf?headline=text">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="swf/headline430x40-hexFFBE0A.swf?headline=text" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="430" height="40"></embed>
</object></div>
<input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(0)">Liste1
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
</form>
</body>
</html>
-
Hallo!
function showList(feld) {
if(feld=='0') {var f_id='sListe1';}
if (document.formular.elements[feld].checked == true) {
document.getElementById(f_id).style.display='';
}
else{
document.getElementById(f_id).style.display='none';
}
}Welchen Zustand soll Dein f_id bekommen wenn checked==true? block, inline, none... ?
Schönen Gruß
Afra
-
Welchen Zustand soll Dein f_id bekommen wenn checked==true? block, inline, none... ?
Hallo Afra,
kann leider mit Deiner Antwort nichts anfangen. Bin kein JavaScript Guru.
Beim ersten Aufruf der Seite soll die Ebene<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
nicht eingeblendet werden. Meinst du das?
Gruß
MG
-
-
Hallo Martin,
Mein Script funktioniert ohne Flash bei IE, Firefox & Opera wunderbar.
Mit Flash funktioniert es leider nur bei Opera. Sollte aber auch bei IE und Firefox funktionieren.Normalerweise gilt für eingebundene Flashfilme (z-index, visibility, display-Eigenschaft, etc):
einmal gerendert - nie mehr geändert.
Das heißt ohne ein komplettes Neuladen der Seite, in die der Film eingebunden ist, lief da bislang nichts. Es wundert mich, dass Opera da jetzt was möglich macht. Das muss ich selbst mal testen.
Gruß Gernot
-
Hallo Gernot,
wenn ich Dich richtig verstehe geht das überhaupt nicht, was ich möchte. Ist das Richtig?
Dann muss ich wohl oder übel das Flash-Objekt entfernen ;-(
Gruß
Ralf -
Hallo Gernot!
Ich glaube er will nicht _über_ (z-indizes) dem Flash Film, sondern nur nach dem Flash Film etwas einblenden. Das ging aber mit dem von ihm angegebenen JS Code so nicht.
Korrigiere mich, wenn ich es falsch verstanden haben sollte.
Schönen Gruß
Afra
-
Hallo afra,
Ich glaube er will nicht _über_ (z-indizes) dem Flash Film, sondern nur nach dem Flash Film etwas einblenden. Das ging aber mit dem von ihm angegebenen JS Code so nicht.
Korrigiere mich, wenn ich es falsch verstanden haben sollte.
Ja, jetzt wo ich mal genauer in den Quellcode geschaut habe, verstehe ich es auch so, dass Martin gar nicht den Flashfilm, sondern letztlich nur die Checkbox selbst ausblenden will, die im Quellcode nach dem Object (Flashfilm) kommt. Das müsste grundsätzlich möglich sein.
Was mich darüber hinaus auch noch verwirrt, ist dass Martin da häufig solche Begriffe wie "List" für seine Funktionen, Attribute und Variablen verwendet, obwohl man im HTML-Code weit und breit nichts Listenartiges sieht.
Gruß Gernot
-
Hallo Gernot,
ich möchte nur diese Ebene ein- bzw. ausblenden:
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
Das Flash-Objekt ist immer sichtbar.Später kommt hier eine Liste rein, daher sListe1
Und was muss ich jetzt ändern???
Gruß
MG-
Hallo Martin,
ich möchte nur diese Ebene ein- bzw. ausblenden:
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>Das Flash-Objekt ist immer sichtbar.
Gut, denn mit dieser Ebene den Flashfilm zu verdecken, das geht wie gesagt nicht.
Später kommt hier eine Liste rein, daher sListe1
Und was muss ich jetzt ändern???
Ich würde alles entrümpeln; wozu andere Übergabeparameter als
this, wozu überhaupt Übergabeparameter, ja wozu überhaupt Funktionen, wenn es auch ohne geht?<input type="Checkbox" onclick="if(checked)nextSibling.style.display=''; else nextSibling.style.display='none';"><input style="display:none" type="Text" name="input">Du kannst statt des Text-INPUT-Elements selbst verständlich auch ein DIV-Element so ein und ausblenden, in das du dann seinerseits wieder das INPUT-Element und eine Liste schachtelst.
Wichtig ist bei diesem Ansatz nur, dass alle Browser dasselbe nextSibling-Element wie du verstehen und nicht etwa bedingt durch einen Zeilenumbruch einen leeren Textknoten.
Wenn du es aus Gründen der Übersichtlichkeit im Quellcode anders haben möchtest, mussst du halt doch mit einer Funktion und dem Übergabeparameter
thisarbeiten. Dasselbe empfehle ich, wenn du mehrere Elemente auf deiner Seite in dieser Art ein und ausblenden möchtest.Gruß Gernot
-
Hallo nochmal,
So kann ich das mit dem Syntax-Highlighting nicht stehen lassen, da war ich diesmal extrem schlampig. Aber so stimmts:
<input type="Checkbox" onclick="[code lang=javascript]if(checked)nextSibling.style.display=''; else nextSibling.style.display='none'; ~~~"><input style="`display:none`{:.language-css}" type="Text" name="input"> [/code] Gruß Gernot-
<input type="Checkbox" onclick="[code lang=javascript]if(checked)nextSibling.style.display=''; else nextSibling.style.display='none';
Hallo Gernot, DANKE erstmal für Deine Mühe. Dein kleines Script geht gut. Was ich brauche ist aber in der Art: <input type="Checkbox" onclick="if(checked)nextSibling.style.display=''; else nextSibling.style.display='none';"> <div style="display:none">Eingabe: <input type="Text" name="input"></div> Was leider nicht geht. Kannst Du bitte dies Ändern. Es muss eine Ebene sein, da ich noch andere Sachen mit einblenden will. DANKE Gruß MG-
hi,
<input type="Checkbox" onclick="if(checked)nextSibling.style.display=''; else nextSibling.style.display='none';">
<div style="display:none">Eingabe: <input type="Text" name="input"></div>
Was leider nicht geht. Kannst Du bitte dies Ändern.
das kannst du bitte ändern.
wenn nextSibling hier nicht funktioniert, dann greife anders auf den div zu - per getElementById() beispielsweise.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo Martin,
Was ich brauche ist aber in der Art:
<input type="Checkbox" onclick="if(checked)nextSibling.style.display=''; else nextSibling.style.display='none';">
<div style="display:none">Eingabe: <input type="Text" name="input"></div>
Was leider nicht geht. Kannst Du bitte dies Ändern.
wenn du mal genau schaust, hast du da im Quellcode ja einen Umbruch und eine Leerzeile, in jedem fall also einen leeren Textknoten als nextSibling der Checkbox.
Wenn du aber das übernächste Geschwisterelement ansprichst, also
nextSibling.nextSiblingsollte das gehen.
Gruß Gernot
-
Hallo nochmal,
hier übrigens noch eine Luxusversion:
<!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>Formularelement und Liste per Checkbox ein- und ausblenden</title> <style type="text/css"> [code lang=css]/* damit 'einblenden' und 'ausblenden' gleich breit sind, sonst zappelt's! */ form, input { font-family:monospace; } form div { font-family:sans-serif; }</style>
<script type="text/javascript">function einaus (obj) { with(obj) if(checked) with(nextSibling) { data = ' ' + value + ' ausblenden'; nextSibling.style.display = ''; } else with(nextSibling) { data = ' ' + value + ' einblenden'; nextSibling.style.display = 'none'; } }</script>
</head>
<body>
<form action="">
<input type="checkbox" name="cListe1" value="Liste1" onClick="einaus(this)">
Liste1 einblenden
<div style="display:none;">
Eingabe: <input name="input" type="text">
<ol>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ol>
</div>
</form>
</body>
</html>[/code]... wobei ich mir allerdings nicht sicher bin, ob es von der Nutzerführung wirklich sinnvoll wäre, den Text 'Liste ausblenden' neben der gecheckten Box einzublenden, wenn die Liste darunter ja doch eingeblendet ist - soll eigentlich nur zur Demonstration dienen, was man mit DHTML sonst noch alles machen könnte.
Gruß Gernot
-
-
-
-
Hallo Gernot!
Gut, denn mit dieser Ebene den Flashfilm zu verdecken, das geht wie gesagt nicht.
Das stimmt nicht ganz. Wenn man dem object einen <param name="wmode" value="Transparent" /> mitgibt und dieses dann noch mittels der z-indizes niederer setzt, so kann man sehr wohl Blockelemente über Flash einblenden. Ich muss das gerade für einen Kunden zusätzlich über einen iFrame, der Flash enthält, machen. Nur der Opera hat damit Probleme und weigert sich stur die Blockelemente über dem Flash darzustellen. Der IE, Mozilla, und Safari können es.
Schönen Gruß
Afra
-
Hallo afra,
Das stimmt nicht ganz. Wenn man dem object einen <param name="wmode" value="Transparent" /> mitgibt und dieses dann noch mittels der z-indizes niederer setzt, so kann man sehr wohl Blockelemente über Flash einblenden. Ich muss das gerade für einen Kunden zusätzlich über einen iFrame, der Flash enthält, machen.
Ich lese es auch gerade, das ist aber neu:
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15523
Nur der Opera hat damit Probleme und weigert sich stur die Blockelemente über dem Flash darzustellen. Der IE, Mozilla, und Safari können es.
Das müsste sich dann aber mit der Version 8.02 (bisher nur Beta - Englisch) von Opera auch ändern, denn die unterstützt ja wmode "transparent.
http://www.opera.com/docs/changelogs/windows/operabeta/
Gruß Gernot
-
Hallo Gernot.
Das müsste sich dann aber mit der Version 8.02 (bisher nur Beta - Englisch) von Opera auch ändern, denn die unterstützt ja wmode "transparent.
Die 8.02 ist aber Stable.
Verwechselst du diese hier mit der 8.10 Alpha?Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hallo Ashura,
Das müsste sich dann aber mit der Version 8.02 (bisher nur Beta - Englisch) von Opera auch ändern, denn die unterstützt ja wmode "transparent.
Die 8.02 ist aber Stable.
Verwechselst du diese hier mit der 8.10 Alpha?Nein, ich schloss das aus dieser Seite:
http://www.opera.com/docs/changelogs/windows/operabeta/
Ich selbst habe ja noch nicht einmal Opera 8.02 sondern nur die Version 8.01, aber selbst da funktioniert wmode 'transparent', ob das allerdings auch bei standardkonformer Einbindung ohne EMBED-Element der Fall ist und ob dadurch auch DHTML-Z-Index-Spielereien ermöglicht werden, habe ich noch nicht getestet. Macromedia führt Opera ja hier auch noch nicht auf:
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201
Jedenfalls bin ich dank dieses Threads mal wieder schlauer geworden.
Gruß Gernot
-
Hallo Gernot.
Das müsste sich dann aber mit der Version 8.02 (bisher nur Beta - Englisch) von Opera auch ändern, denn die unterstützt ja wmode "transparent.
Die 8.02 ist aber Stable.
Verwechselst du diese hier mit der 8.10 Alpha?Nein, ich schloss das aus dieser Seite:
Und wenn du auf die Download-Seite gehst, siehst du, dass dort die 8.02 angeboten wird, mit einem kleinen Hinweis auf die deutsche 8.01.
Aber dass für eine deutsche 8.02 nur eine Datei erforderlich ist, steht dort leider nicht.
Macromedia führt Opera ja hier auch noch nicht auf:
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201
Kein Wunder:
Last updated: December 12, 2002
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software] -
Hallo nochmal,
Ich selbst habe ja noch nicht einmal Opera 8.02 sondern nur die Version 8.01, aber selbst da funktioniert wmode 'transparent', ob das allerdings auch bei standardkonformer Einbindung ohne EMBED-Element der Fall ist und ob dadurch auch DHTML-Z-Index-Spielereien ermöglicht werden, habe ich noch nicht getestet.
das habe ich mittlerweile getestet: es ist tatsächlich so, dass auch in Opera 8 mit seiner jetzt neu hinzugekommennen Fähigkeit wmode 'transparent' zu unterstützen der Fashfilm nicht mehr unbedingt den obersten Z-Index im Dokument haben muss.
Dies funktioniert (getestet unter Win98) in Netscape 7.1, Mozilla 1.7.2, Firefox 1.0.6 auch bei standardkonformer Einbindung ohne EMBED-Element, wenn das OBJECT-Element das folgende PARAM-Kindelement enthält:
<PARAM NAME="wmode" VALUE="transparent">Bei herkömmlicher Einbindung mit verschachteltem EMBED-Element funktioniert es, wenn dieses das Attribut
wmode="transparent"enthält.Im IE6 und in Opera8 laufen Flashfilme ohnehin auch bei herkömmlicher Einbindung über das OBJECT-Element und auch da ist das genannte PARAM-Element wirksam und ermöglicht eine Z-Index-Schichtung nach Gusto.
Gruß Gernot
-
-
-
-
-
-
-
Hallo nochmal,
..., sondern letztlich nur die Checkbox selbst ausblenden will,
natürlich auch nicht, sondern je nach Häkchen ein dahinter stehendes Textfeld. Auch da sollte Flash oder nicht irrelevant sein. Das müsste aber einfacher gehen, vielleicht mit nextSibling.style.display.
Gruß Gernot
-
Hallo Gernot & afra,
nochmal genau.
Ich möchte diese Ebene
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
ein- bzw. ausblendenMit der Checkbox
<input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(0)">LALALAOhne dieses Flash geht es
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="430" height="40">
<param name="movie" value="swf/headline430x40-hexFFBE0A.swf?headline=text">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="swf/headline430x40-hexFFBE0A.swf?headline=text" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="430" height="40"></embed>
</object></div>Mit dem Flash geht es nicht ;-(((
Was soll ich genau im Quellcode ändern, damit es mit Flash geht???
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script language="JavaScript">
<!--
function showList(feld) {
if(feld=='0') {var f_id='sListe1';}
if (document.formular.elements[feld].checked == true) {
document.getElementById(f_id).style.display='';
}
else{
document.getElementById(f_id).style.display='none';
}
}
//-->
</script>
</head>
<body>
<form name="formular">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="430" height="40">
<param name="movie" value="swf/headline430x40-hexFFBE0A.swf?headline=text">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="swf/headline430x40-hexFFBE0A.swf?headline=text" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="430" height="40"></embed>
</object></div>
<input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(0)">Liste1
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
</form>
</body>
</html>Gruß
MG-
hi,
Was soll ich genau im Quellcode ändern, damit es mit Flash geht???
<form name="formular">
<div id="flash">
<objectmuss das object denn ins formular hinein?
(nein, lediglich optische wünsche sind kein guter grund, es in formular mit hineinzupacken. probier mal, das object außerhalb des forms unterzubringen.)gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
muss das object denn ins formular hinein?
(nein, lediglich optische wünsche sind kein guter grund, es in formular mit hineinzupacken. probier mal, das object außerhalb des forms unterzubringen.)Hallo wahsaga,
Du hast recht, wenn ich das Flash ausserhalb lege, funktioniert es prima.
DANKE
ABER, gibt es keine Lösung wenn das Flash innerhalb des Formulares ist???
Gruß
MG-
Hallo Martin,
ABER, gibt es keine Lösung wenn das Flash innerhalb des Formulares ist???
Warum sollte man das wollen? Wenn dir der Abstand zwischen Formularelement und Flashfilm nicht gefällt, triff entsprechende Vorkehrungen mit CSS!
Gruß Gernot
-
-
-
Hallo Martin,
<form name="formular">
<div id="flash">
<object >(...)
</object></div>
<input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(0)">Liste1
<div id="sListe1" style="display:none;"><input name="input" type="text"></div>
</form>Mit dem Flash geht es nicht ;-(((
Es ist vielleicht auch nicht so günstig, einen Flashfilm in ein Formularelement zu schachteln.
Gruß Gernot
-
-
-
-
-