[Erledigt] Barriereproblem mit Javascript

Ryuuzaki93 · 14.07.2010, 15:14

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...

ChrisB · 14.07.2010, 17:17

Zitat:

Zitat von Ryuuzaki93

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.

rudygotya · 14.07.2010, 17:27

Vielleicht auch mal lesen: Warum man bei setInterval aufpassen sollte

Ryuuzaki93 · 15.07.2010, 08:46

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...

BlackScorp · 15.07.2010, 09:55

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/

Ryuuzaki93 · 15.07.2010, 10:28

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???

MaiKaY · 15.07.2010, 10:34

Zitat:

Zitat von Ryuuzaki93

Ich muss aber 2 Div's gleichzeitig verschwinden lassen -.-

Was hindert dich daran?

Code:

$("#div1").hide();
$("#div2").hide();

Ryuuzaki93 · 15.07.2010, 10:53

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^^

MaiKaY · 15.07.2010, 11:17

ausprobieren...
Wenn es dann nicht klappt, solltest du eine Suchmaschine deiner Wahl benutzen und wenn du dann nichts findest erneut hier fragen.

BlackScorp · 15.07.2010, 11:29

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>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
[Erledigt] Ersatz für Javascript	Mort1ferus	JavaScript, Ajax und mehr	6	12.10.2009 09:35
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] Ist das ok, wenn eine Webseite nur in PHP ist und komplett auf JavaScript	coffeyn	Off-Topic Diskussionen	15	21.08.2009 15:11
[Erledigt] JavaScript Weiche bei Formular?	markus228	JavaScript, Ajax und mehr	1	09.08.2009 14:16
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
[Erledigt] Javascript in PHP Aufrufen	coyboc	PHP Tipps 2009	17	10.04.2009 15:28
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
PHP + Javascript + MYSQL	socke	PHP Tipps 2006	4	02.04.2006 22:02
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.07.2010, 17:27
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Vielleicht auch mal lesen: Warum man bei setInterval aufpassen sollte __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

15.07.2010, 09:55
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	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/ __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (15.07.2010 um 10:01 Uhr).

15.07.2010, 10:28
Ryuuzaki93 Erfahrener Benutzer Registriert seit: 11.12.2009 Beiträge: 117 PHP-Kenntnisse: Fortgeschritten	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???

15.07.2010, 10:53
Ryuuzaki93 Erfahrener Benutzer Registriert seit: 11.12.2009 Beiträge: 117 PHP-Kenntnisse: Fortgeschritten	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^^

15.07.2010, 11:17
MaiKaY Erfahrener Benutzer Registriert seit: 17.09.2009 Beiträge: 633 PHP-Kenntnisse: Anfänger	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 ? freutag.net

15.07.2010, 11:29
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	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> __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (15.07.2010 um 11:33 Uhr).