Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Barriereproblem mit Javascript

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Barriereproblem mit Javascript

    Hi,

    ich hab folgendes Problem: Ich hab ein Code, der mehrere Div's ausblendet. Im Firefox funktioniert das ganz gut, aber nicht im IE. Im IE wird das ganze nicht im Interval ausgeführt, d.h. es wird zwar transparen, aber man muss immer auf den Link klicken und die display='none' passiert nie.

    Hier das Skript:

    Code:
    function schliessen(elemente, zeit, diffs) {
      var element = elemente.split("&&");
      diff = diffs.split("&&");
      
      for(var i = 0; i < element.length; i++) {
        var opacity = document.getElementById(element[i]).style.opacity;
        var new_opacity = opacity - diff[i];
        
        var ie_debug = Math.floor(new_opacity * 100);
        
        document.getElementById(element[i]).style.opacity = new_opacity;
        document.getElementById(element[i]).style.filter = "Alpha(opacity="+ie_debug+")";
        document.getElementById(element[i]).style.MozOpacity = new_opacity;
        document.getElementById(element[i]).style.KhtmlOpacity = new_opacity;
        
        if(document.getElementById(element[i]).style.opacity <= 0) {    
          document.getElementById(element[i]).style.display = 'none';
        }  
      }
    }
    
    function fehlerschliessen() {
      
      var zeit = 10;
      var elemente = "error_outbox&&error_box";
      
      var element = elemente.split("&&");
      var diffs = "";
      for(var i = 0; i < element.length; i++) {
        var opacity = document.getElementById(element[i]).style.opacity;
        
        diffs = diffs + (opacity / zeit);
        if(i < (element.length - 1)) {
          diffs = diffs + "&&";
        } 
      }
      var intzeit = zeit / 1000;
      var transparenz = window.setInterval("schliessen('"+elemente+"', '"+zeit+"', '"+diffs+"')", intzeit);     
    }
    Div's:

    PHP-Code:
    switch($_GET['error']) {
      case 
    1:
        echo 
    "
        <div id=\"error_outbox\" class=\"error_outbox\" style=\"opacity: 0.6; filter:alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6;\"></div>
        <div id=\"error_box\" class=\"error_box\" align=\"center\" style=\"opacity: 1.0; filter:alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0;\">
        Bitte füllen Sie alle Felder aus!<br>
        <a href=\"javascript:fehlerschliessen();\">Schließen</a>
        </div>
        </div>
        "
    ;
        break;

    Ach und wieso geht eig clearInterval nicht? Ich habe window.clearInterval(tranparenz); über das display='none' geschrieben, aber es kam nur transparenz is not defined...

  • #2
    Zitat von Ryuuzaki93 Beitrag anzeigen
    Ach und wieso geht eig clearInterval nicht? Ich habe window.clearInterval(tranparenz); über das display='none' geschrieben, aber es kam nur transparenz is not defined...
    Logisch, transparenz ist eine lokale Variable in der Funktion fehlerschliessen und außerhalb von dieser nicht verfügbar.
    [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

    Kommentar


    • #3
      Vielleicht auch mal lesen: Warum man bei setInterval aufpassen sollte
      I like cooking my family and my pets.
      Use commas. Don't be a psycho.
      [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

      Kommentar


      • #4
        Also hab das jetzt mal mit Timeout geändert:

        Code:
        function schliessen(elemente, zeit, diffs) {
          var element = elemente.split("&&");
          diff = diffs.split("&&");
          
          for(var i = 0; i < element.length; i++) {
            var opacity = document.getElementById(element[i]).style.opacity;
            var new_opacity = opacity - diff[i];
            
            var ie_debug = Math.floor(new_opacity * 100);
            
            document.getElementById(element[i]).style.opacity = new_opacity;
            document.getElementById(element[i]).style.filter = "Alpha(opacity="+ie_debug+")";
            document.getElementById(element[i]).style.MozOpacity = new_opacity;
            document.getElementById(element[i]).style.KhtmlOpacity = new_opacity;
            
            if(document.getElementById(element[i]).style.opacity <= 0) {    
              document.getElementById(element[i]).style.display = 'none';
            }  
          }
        }
        
        function fehlerschliessen() {
          
          var zeit = 10;
          var elemente = "error_outbox&&error_box";
          
          var element = elemente.split("&&");
          var diffs = "";
          for(var i = 0; i < element.length; i++) {
            var opacity = document.getElementById(element[i]).style.opacity;
            
            diffs = diffs + (opacity / zeit);
            if(i < (element.length - 1)) {
              diffs = diffs + "&&";
            } 
          }
          var intzeit = zeit / 1000;
          window.setTimeout("schliessen('"+elemente+"', '"+zeit+"', '"+diffs+"')", intzeit);
          var x = element.length - 1; 
          while(document.getElementById(element[x]).style.display != 'none') {
             fehlerschliessen();
          }    
        }
        Allerdings geht das jetzt in keinem Browser. FF meldet too much recursion und IE kommt ein alert: Out of memory at line: 31
        Allerdings wird bei beiden nun display = 'none' ausgeführt, nur wird es nicht schritt für schritt transparenter...

        Kommentar


        • #5
          versuchs mal mit jQuery alle deine zeilen Quellcode, kannst mir einer zeile ersetzen(und in allen browsern funktioniert es)

          Code:
           <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script type="text/javascript">
          $(document).ready(function(){
          $('.schliesenButton').click(function(){ // wenn man auf ein element klickt ..
          $('#elementID').fadeOut('slow'); // blende das fenster langsam aus
          });
          });
          </script>
          hier mal eine beschreibung dazu http://api.jquery.com/fadeOut/
          apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

          Kommentar


          • #6
            Also mit jQuery kenn ich mich leider nicht aus, und so wies aussieht kann ich damit nur ein Element verschwinden lassen. Ich muss aber 2 Div's gleichzeitig verschwinden lassen -.-
            Was bedeutet denn too much recursion bzw. Out of memory at line: 31???

            Kommentar


            • #7
              Zitat von Ryuuzaki93 Beitrag anzeigen
              Ich muss aber 2 Div's gleichzeitig verschwinden lassen -.-
              Was hindert dich daran?

              Code:
              $("#div1").hide();
              $("#div2").hide();
              ACHTUNG!!! SIGNATUR!!!
              PHP-Code:
              var_dump($gehirn); exit; 
              0 ??? WTF ? nervtag.de | freutag.net | friendmetr.com

              Kommentar


              • #8
                Also z.b. so?

                Code:
                <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                <script type="text/javascript">
                function schliessen() {
                  $("#error_outbox").fadeOut('fast');
                  $("#error_box").fadeOut('fast');
                }
                </script>
                und dann einfach

                Code:
                <a href="javascript:schliessen();">Schließen</a>
                und das läuft zugleich ab? Macht der dann ein display:none? Weil ich müsste die gelöscht haben, weil sonst ihr z-index wieder alles blockiert^^

                Kommentar


                • #9
                  ausprobieren...
                  Wenn es dann nicht klappt, solltest du eine Suchmaschine deiner Wahl benutzen und wenn du dann nichts findest erneut hier fragen.
                  ACHTUNG!!! SIGNATUR!!!
                  PHP-Code:
                  var_dump($gehirn); exit; 
                  0 ??? WTF ? nervtag.de | freutag.net | friendmetr.com

                  Kommentar


                  • #10
                    nein ... du hast die beiden divs verschachtelt.. somit musst du das nur auf das übergeordnete element einsetzen, der innere div verschwindet mit automatisch..

                    somit würde folgendes schon ausreichen:

                    Code:
                    function schliessen() {
                      $("#error_outbox").fadeOut('fast');
                    
                    }
                    </script>
                    besser wäre natürlich

                    Code:
                    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                    
                         $('a.close').click(function(){
                               $("#error_outbox").fadeOut('fast');
                         });
                    })
                    </script>
                    und dein link sollte so aussehen
                    Code:
                    <a href="#" class="close">Schließen</a>
                    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                    Kommentar


                    • #11
                      Danke, funktioniert!

                      Kommentar


                      • #12
                        ließ mein beitrag, den ich davor geschrieben habe.. wegen 2 elementen ausblenden
                        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                        Kommentar


                        • #13
                          Nunja, die beiden zwar verschachtel, allerdings haben die ja einen anderen z-index und sind position:absolute

                          Mal sehn ob ich das versteh:
                          das ready bedeutet, das das ganze nur möglich ist, wenn die seite voll geladen hat richtig?
                          aber wieso ist es besser den Link über eine Klasse laufen zu lassen und bei click eine neue funktion aufzurufen?

                          So hab ichs bis jetzt getestet und es funktioniert:

                          Code:
                          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
                          <script type="text/javascript">
                          function schliessen() {
                            $("#error_outbox").fadeOut('fast');
                            $("#error_box").fadeOut('fast');
                          }
                          </script>
                          
                          <a href="javascript:schliessen();">Schließen</a>

                          Kommentar


                          • #14
                            naja die klasse habe ich nur gesetzt , damit du das element irgendwie identifizieren kannst. sonst wüstest ja nicht welchen <a element du einen onclick effekt eifügen könntest. zusätzlich hättest du die möglichkeit statt <a href... einen div einzufügen der zb eine schließen button als hintergrund bild hat, damit das ganze schöner aussieht dann könntest du dadurch deinem div einen event zuweisen und beim klicken wird das fenster ausgeblendet.. sind halt tipps


                            zu den unterschiedlichen z-index.. wenn das eltern element nicht mehr zu sehen ist , sieht man die kind elemente auch nicht, denn display:none ist nicht das gleiche wie opacity 1. display:none bedeutet dass das element nicht mehr im design vorhanden ist(also nicht einfach nur durchsichtig sondern wird von anderen elementen komplett ignoriert).. probier ruhig nur das eine auszublenden..
                            apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                            Kommentar


                            • #15
                              Ja, in das a setz ich dann sowieso ein bild, ich schreib das immo nur, bis der designer das layout fertig hat^^

                              habs jetzt probiert, nur die #error_outbox verschwinden zu lassen und wie ich erwartet habe - die gelbe Box in der Mitte bleibt...

                              Kommentar

                              Lädt...
                              X