selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

display none mit Javascript schlägt fehl

Autor: FelixF
Datum: 04.03.2010 12:22:41

Hallo alle zusammen,
ich habe mal wieder ein kleines Problem und weiß nicht, wo der Fehler liegt.
Ich will ein div-Tag ausblenden, wenn Javascript aktiviert ist. Also dachte ich mir, dass ganze mit Javascript selbst zu lösen.

Mein Ansatz ist folgender:
<script type="text/javascript">
$(function() {
function runEffect(){
var selectedEffect = 'clip';
$("#hinweis").toggle(selectedEffect,1000);
};
$("#ein-aus").click(function() {
runEffect();
return false;
});
});
document.getElementById('hinweis').style.display=="none";
</script>

...

<div class="fehler" style="font-size: 0.8em; text-align: left; margin-top: 5px;" id="hinweis">
            Die Formtierungen k&ouml;nnen auch durch markieren des Textes eingef&uuml;gt werden.
            <br />
            Verf&uuml;gbare Farben: Die Farben k&ouml;nnen durch die englischen Worte beschrieben werden ode durch #rgb dargestellt werden.
            <br />
            Als Schriftgr&ouml;&szlig;e werden Nummern verwendet. Z.B. size="+1" = Schrift um 1 vergr&ouml;&szlig;ern, size="-1" = Schrift um 1 verkleinern
            <br />
            Um einen Absatz zu erzeugen einfach die "Enter"-Taste benutzen.
            </div>
            <br />
<a href="#" id="ein-aus">Hinweise ein-/ausblenden</a>


Firebug gibt mir den Fehler aus: document.getElementById("hinweis") is null.

Kann mir einer von euch sagen, wo der Fehler liegt.
Oder wie kann man mit jquery sagen, dass das Menü im eingeklappten Zustand anfangen soll?

Ist bisher leider nur offline bei mir auf dem Rechner, sodass ich erstmal nichts zum zeigen habe, tut mir Leid.

Lg Felix

Re: display none mit Javascript schlägt fehl

Autor: reporter
Datum: 04.03.2010 13:22:14

Hallo,

> Oder wie kann man mit jquery sagen [...]

Gut zu wissen das du jquery nutzt. :-)


Hier mein Vorschlag:
<style type="text/css">
  .noneClass {dispaly:none;}
</style>
<script type="text/javascript">
  $(document).ready(function ()
  {
   $("#ein-aus").click(function()
   {
    runEffect();
    return false;
   });
   $("#hinweis").toggleClass("noneClass");
  });
  function runEffect()
  {
   var selectedEffect = 'clip';
   $("#hinweis").toggle(1000, selectedEffect);
  };
</script>

Anmerkung: Mir ist die Zeile '$("#hinweis").toggle(1000, selectedEffect);' völlig unverständlich

> Firebug gibt mir den Fehler aus: document.getElementById("hinweis") is null.

Wenn du diese Zeile allein im script-Tag stehen läßt, wirst du ganz leicht erkennen, weshalb es zu dieser Fehlermeldung kommt ;-)

Re: display none mit Javascript schlägt fehl

Autor: gaby
Datum: 04.03.2010 13:30:32

> ich habe mal wieder ein kleines Problem und weiß
> nicht, wo der Fehler liegt.
> Ich will ein div-Tag ausblenden, wenn Javascript
> aktiviert ist.


Hallo,

<noscript> <p>dieser absatz erscheint nur bei deaktiviertem js</p></noscript>



> Ist bisher leider nur offline bei mir auf dem
> Rechner, sodass ich erstmal nichts zum zeigen
> habe, tut mir Leid.


Es gibt auch noch diese Möglichkeit:

http://www.sve-fre.de/selfhtml/netiquette/index.php?a=text5_2#text5_2



Grüße
gaby

Re: display none mit Javascript schlägt fehl

Autor: FelixF
Datum: 07.03.2010 03:36:15

Hallöchen,


> Hier mein Vorschlag:
>  <style type="text/css">
>   .noneClass {dispaly:none;}
>  </style>
>  <script type="text/javascript">
>   $(document).ready(function ()
>   {
>    $("#ein-aus").click(function()
>    {
>     runEffect();
>     return false;
>    });
>   
> $("#hinweis").toggleClass("noneClass");
>   });
>   function runEffect()
>   {
>    var selectedEffect = 'clip';
>    $("#hinweis").toggle(1000,
> selectedEffect);
>   };
>  </script>


Ich habe deinen Vorschlag noch ein bisschen abgeändert.
<style type="text/css">
  #hinweis.noneClass {display:none;}
</style>
<script type="text/javascript">
$(function() {
function runEffect(){
var selectedEffect = 'clip';

$("#hinweis").toggleClass('noneClass',selectedEffect,1000);
};
$("#ein-aus").click(function() {
runEffect();
return false;
});
});
</script>
Mein div Container sieht folgender maßen aus:

<div class="fehler noneClass" style="font-size: 0.8em; text-align: left; margin-top: 5px;" id="hinweis">
...
</div>

Ich habe jetzt nur noch zwei Probleme, sowohl mit deiner Version als auch mit meiner. Das erste Problem wäre, dass nach dem ich auf den LInk geklickt habe, die Seite wieder nach oben springt und mein zweites Problem wäre, dass sich der div-Container nicht mehr einfahren lässt.

> Anmerkung: Mir ist die Zeile
> '$("#hinweis").toggle(1000, selectedEffect);'
> völlig unverständlich

Okay, die 1000 gibt die Geschwindigkeit an, wie schnell der Effekt durchgeführt wird und mit selectedEffect kann man verschiedene Effekte wählen, wie das Ein-/Ausblenden aussehen soll.

> > Firebug gibt mir den Fehler aus:
> document.getElementById("hinweis") is null.
>
> Wenn du diese Zeile allein im script-Tag stehen
> läßt, wirst du ganz leicht erkennen, weshalb es
> zu dieser Fehlermeldung kommt ;-)

Tut mir Leid, aber irgendwie komm ich nicht drauf, ich bekomme immernoch den Fehler, wenn ich es alleine stehen lasse. Muss ich es vielleicht in eine if-Funktion packen?

Zu noscript: Das verwende ich schon in meiner Seite, also die Funktion ist mir soweit bekannt, nur will ich dieses mal, dass bei deaktivertem JS der div-Tag gleich angezeigt wird und bei aktivertem JS erst nach einem Klick auf einen Link.

Deshalb wollte ich versuchen, den Container mit JS auf display: none setzen, weil er dann gleich angezeigt wird, wenn JS deaktiviert ist und ausgeblendet wird, wenn JS aktivert ist.

LG Felix

Re: display none mit Javascript schlägt fehl

Autor: gaby
Datum: 07.03.2010 13:10:18

Du hättest größere Chancen auf eine schnelle Antwort, wenn du den Absatz aus dem Link meines Vorpostings beherzigen würdest.

| ... und auch keine CSS-, Script- und HTML- Schnipsel,
| die sich Deine Helfer erst mühsam zusammensetzen
| und ergänzen müssen, sondern eine lauffähige Datei
| von <html> bis </html> inkl. Doctype, mit den CSS-
| und/oder den Script-Anweisungen im HEAD-Bereich der Datei.

Keiner hat Lust oder Zeit, sich deine Codefragmente zum Testen erst zusammenzusetzen und zu ergänzen.

Wahrscheinlich möchtest du so eine Funktionsweise wie auf Wikipedia (unter "Inhaltsverzeichnis")

http://de.wikipedia.org/wiki/Berners-Lee


Grüße
gaby

Re: display none mit Javascript schlägt fehl

Autor: FelixF
Datum: 08.03.2010 12:21:34

> Du hättest größere Chancen auf eine schnelle
> Antwort, wenn du den Absatz aus dem Link meines
> Vorpostings beherzigen würdest.

Ja das stimmt, deshalb werde ich mir beim nächsten Mal auch mehr Zeit nehmen um die Beiträge zu lesen und sie auch zu schreiben.
Doch die Lösung von reporter funktioniert, ich hatte mich nur beim übernehmen des Codes verschrieben.


> Keiner hat Lust oder Zeit, sich deine
> Codefragmente zum Testen erst zusammenzusetzen
> und zu ergänzen.

Ja auch in dem Punkt gebe ich dir Recht ;)

> Wahrscheinlich möchtest du so eine Funktionsweise
> wie auf Wikipedia (unter "Inhaltsverzeichnis")
>
> http://de.wikipedia.org/wiki/Berners-Lee

Genau so eine Funktion hatte ich ja, nur eben möchte ich, dass diese Funktion im "geschlossenen" Modus anfängt und dann geöffnet werden kann.

Meine Lösung sieht jetzt so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
  .noneClass {display:none;}
</style>
<script type="text/javascript">
  $(document).ready(function ()
  {
   $("#ein-aus").click(function()
   {
    runEffect();
    return false;
   });
   $("#hinweis").toggleClass("noneClass");
  });
  function runEffect()
  {
   $("#hinweis").toggle();
  };
</script>

</head>
<body>
<div id="hinweis">
            Die Formtierungen k&ouml;nnen auch durch markieren des Textes eingef&uuml;gt werden.
            <br />
            Verf&uuml;gbare Farben: Die Farben k&ouml;nnen durch die englischen Worte beschrieben werden ode durch #rgb dargestellt werden.
            <br />
            Als Schriftgr&ouml;&szlig;e werden Nummern verwendet. Z.B. size="+1" = Schrift um 1 vergr&ouml;&szlig;ern, size="-1" = Schrift um 1 verkleinern
            <br />
            Um einen Absatz zu erzeugen einfach die "Enter"-Taste benutzen.
            </div>
            <a href="#" id="ein-aus">Hinweise ein-/ausblenden</a>
</body>
</html>

Liebe Grüße Felix

PS: Aber vielleicht kann mir einer trotzdem sagen, warum document.getElementById('...').style.display=="none"; nicht funkioniert?