# alternativen oder verbesserungen zu alert()?



## TheGreenDragon (24. Juli 2009)

Hallo,

ich bin schon ein ganz klein wenig am verzweifeln. Und zwar habe ich ein PHP Skript geschrieben in dessen Verlauf zur Zeit eine alert Meldung ausgeführt wird doch hierbei stören mich zwei Punkte.

Zum einen: Das alert sieht aus wie eine Fehlermeldung dabei soll es doch nur informieren! und den user nicht verunsichern!

Zum anderen: Die Seite wird nur zu hälfte geladen und dann wird eben das echo irgendwann ausgeführt, welches das Stück Skript enthält.


Habt ihr paar Lösungen?

Der Code sieht so aus:

```
if( $existenceStatus["NUMBER"] != 0 ) {
$fehlerBeschreibung = "Es trat ein Fehler auf. Vom System generierter Fehlertext: " . $existenceStatus["MESSAGE"];
echo "<script langauge=\"javascript\">alert(\"$fehlerBeschreibung\");</script>";
}
```

Zu erwähnen ist noch ich befinde mich ganze zeit im PHP Skript.

Beste Grüße


----------



## queicherius (24. Juli 2009)

PHP hat hiermit aber gar nichts zu tun. Das ist einzig und allein Javascript.

http://forum.de.selfhtml.org/archiv/2004/11/t93554/

Hier wurde das auch schon mal erörtert


----------



## Paspirgilis (24. Juli 2009)

Jo hab ich.
erstens um deine lösung die du bis jetzt hast mal zu verbessern:

```
echo "<script langauge=\"javascript\">setTimeout('alert(\"$fehlerBeschreibung\");',1000);</script>";
```
Dann wird das mit 1 sekunde verzögerung alertet.

Besser aussehende möglichkeit:
Eine div mit rein zustellen welches mittig positioniert ist und in einem div was als grau schleier dient. Hast du bestimmt schon ma in webseiten gesehen.
Oder du speicherst die Meldung in ner variable ab und machst mitten ins Template (ziehmlich) weit oben ein:

```
<?php if(isset($fehelrmeldungsvariable)){echo '<div>' . $fehelrmeldungsvariable . '</div>';}
```

Das sollte dir auf jeden fall weiterhelfen.

MFG
Mark Paspirgilis


----------



## TheBodo (24. Juli 2009)

Hi, ich würde dir auch eine Abwandlung der <div>-Variante empfehlen:


```
<div id="infodiv" style="visibility:hidden;position:absolute;"></div>

<script language="JavaScript">
function showInfo(infomsg) {
    if (navigator.appName == "Microsoft Internet Explorer") {
	  document.getElementById("infodiv").style.top = iebody().scrollTop + event.clientY    - (screen.height  / 2 )  + "px";
    } else {
  	  document.getElementById("infodiv").style.top = ereig.pageY - (screen.height  / 2 ) + "px";
    }
    document.getElementById("infodiv").style.left = screen.width / 2 + "px";

    document.getElementById("infodiv").innerHTML = "[Deine Formatierung]" + infomsg + "[Ende deiner Formatietung]";

    document.getElementById("infodiv").style.visibility = "visible";
}

function hideInfo() {
document.getElementById("infodiv").style.visibility = "hidden";
}
</script>
```

Hierbei wird ein Div erstellt, dass du selbst designen kannst, und das wird ca. mittig über den Bildschirm gelegt:

screen.width / 2
screen.height / 2

WICHTIG: Es ist nich ganz mittig, je nach Design des divs musst du die Hälfte des Divs (Breit, bzw Höhe) abziehen, damit es genau mittig ist!

Ansonsten sollte es genauso aufgerufen werden wie alert();
Nur halt zum ausblenden hideInfo()!

Viel Spaß damit!


----------



## Paspirgilis (24. Juli 2009)

Ich würd da noch ne Css änderung machen.
Also eine Klasse auf das äußere div legen und dann auch in das mittige div und das mit folgendem mittig setzen:

```
display: absolute;
margin:-50% auto;
top: 50%;
width:600px;
height:300px;
display: block;
```

MFG
Mark Pasirgilis


----------



## Quaese (24. Juli 2009)

Hi,

@TheBodo
Das Script wird so, wie du es gepostet hast, nicht korrekt laufen. Es liefert *screen.width* die gesamte Breite des Bildschirms. Es ist jedoch nicht gewährleistet, dass jeder Anwender seinen Browser maximiert hat.

Zum anderen verwendest du eine Funktion zum Ermitteln des richtigen body-Elements im IE. Diese ist jedoch nirgends definiert.

Du greifst auf ein Objekt *ereig* zu, dass ebenfalls nicht existiert. Für Mozillas wird die Scrollhöhe im Allgemeinen über *window.pageYOffset* ermittelt.

Die Breite bzw. Höhe des Elements zum Korrigieren der Zentrierung könnten über *offsetWidth* bzw. *offsetHeight* festgestellt werden.

Beispiel:

```
function showInfo(infomsg) {
  var objBody =(window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == "Microsoft Internet Explorer") {
    document.getElementById("infodiv").style.top = (objBody.scrollTop + (intScrH/2) - (document.getElementById("infodiv").offsetHeight/2))  + "px";
  } else {
    document.getElementById("infodiv").style.top = (window.pageYOffset + (intScrH/2) - (document.getElementById("infodiv").offsetHeight/2)) + "px";
  }

  document.getElementById("infodiv").style.left = ((intScrW/2) - (document.getElementById("infodiv").offsetWidth/2)) + "px";
  document.getElementById("infodiv").innerHTML = "[Deine Formatierung]" + infomsg + "[Ende deiner Formatietung]";
  document.getElementById("infodiv").style.visibility = "visible";
}
```
Desweiteren könnten die Browser sicherlich eleganter ermittelt werden. Wurde im Script aber nicht berücksichtigt.


@Paspirgilis
Es existiert kein Wert *absolute* zur Eigenschaft *display*. Sicherlich wolltest du *position* verwenden.

Ausserdem wird zur Zentrierung eines Elements im Browser die *top*- und *left*-Eigenschaft auf 50 Prozent gesetzt. Über die negativen *margin*-Werte, die der Hälfte der Höhe und Breite des Elements entsprechen, wird das Objekt endgültig ausgerichtet.


```
#infodiv{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px auto auto -300px;
  width: 600px;
  height: 300px;
  display: block;
}
```
 
Ciao
Quaese


----------



## TheBodo (24. Juli 2009)

Hi, danke für deine Erläuterungen... hab mal wieder etwas gelernt.

Aber, bist du sicher, dass es pageXOffset für die Scrollhöhe ist? Das wäre meiner Meinung nach die falsche Achse, und pageYOffset funktioniert bei mir einwandfrei!

Das ich die Funktion iebody() vergessen habe tut mir Leid, die verwende ich nur als Standardimport, während ich das andere nur in Galerien (dafür hab ich es geschrieben) verwende, hab das deswegen übersehen.

Das ereig-Objekt wird bei mir in der Funktion wiedergegeben, hab ich leider auch vergessen, da ich die Argumente rausgenommen hatten, da es ja keine Bilder mehr waren.

Ich möchte mich hier aber einmal ganz doll entschuldigen, dass ich derart fehlerhaften Code hier reinstelle, kommt davon, wenn man denkt man könne mal eben "schnell" helfen. Falls sich irgendwer damit rumgeärgert hat, bitte ich um Verzeihung.

Hier eine Variante mit meiner Funktion und den Änderungen von Quaese.

Ich hpffe diesmal korrekt!


```
function iebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showInfo(infomsg, ereig) {

  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == "Microsoft Internet Explorer") {
    document.getElementById("infodiv").style.top = (iebody().scrollTop + (intScrH/2) - (document.getElementById("infodiv").offsetHeight/2))  + "px";
  } else {
    document.getElementById("infodiv").style.top = (window.pageYOffset + (intScrH/2) - (document.getElementById("infodiv").offsetHeight/2)) + "px";
  }

  document.getElementById("infodiv").style.left = ((intScrW/2) - (document.getElementById("infodiv").offsetWidth/2)) + "px";
  document.getElementById("infodiv").innerHTML = "[Deine Formatierung]" + infomsg + "[Ende deiner Formatietung]";
  document.getElementById("infodiv").style.visibility = "visible";
}
```

Viel Spaß damit!


----------



## Quaese (24. Juli 2009)

Hi,

sollte natürlich *pageYOffset* heissen. Im Quellcode stand es richtig.

Danke für den Hinweis - hab es ausgebessert.

Ciao
Quaese


----------



## TheGreenDragon (25. Juli 2009)

Hi,

danke für die vielen Antworten! Leider funktioniert das mit dem setTimeout() bei mir nicht. Ich kann die Zahl noch so hoch eingeben.. kein unterschied.

Da ich absoluter Neuling in Javascript bin hab ich folgendes mal versucht umzusetzen, leider wird aber garnichts angezeigt 

```
<?php
$message = "hallo";
echo "<script language=\"JavaScript\">
function showInfo(infomsg) {
  var objBody =(window.document.compatMode == \"CSS1Compat\")? window.document.documentElement : window.document.body || null;
  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == \"Microsoft Internet Explorer\") {
    document.getElementById(\"infodiv\").style.top = (objBody.scrollTop + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2))  + \"px\";
  } else {
    document.getElementById(\"infodiv\").style.top = (window.pageYOffset + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2)) + \"px\";
  }

  document.getElementById(\"infodiv\").style.left = ((intScrW/2) - (document.getElementById(\"infodiv\").offsetWidth/2)) + \"px\";
  document.getElementById(\"infodiv\").innerHTML = \"[Deine Formatierung]\" + infomsg + \"[Ende deiner Formatietung]\";
  document.getElementById(\"infodiv\").style.visibility = \"visible\";
}
showInfo($message);
</script>";
?>
```

beste Grüße


----------



## TheBodo (26. Juli 2009)

```
<?php
$message = "hallo";
echo "<div id=\"infodiv\" style=\"position:absolute;visibility:hidden;\"></div>
<script language=\"JavaScript\">
function showInfo(infomsg) {
  var objBody =(window.document.compatMode == \"CSS1Compat\")? window.document.documentElement : window.document.body || null;
  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == \"Microsoft Internet Explorer\") {
    document.getElementById(\"infodiv\").style.top = (objBody.scrollTop + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2))  + \"px\";
  } else {
    document.getElementById(\"infodiv\").style.top = (window.pageYOffset + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2)) + \"px\";
  }

  document.getElementById(\"infodiv\").style.left = ((intScrW/2) - (document.getElementById(\"infodiv\").offsetWidth/2)) + \"px\";
  document.getElementById(\"infodiv\").innerHTML = \"[Deine Formatierung]\" + infomsg + \"[Ende deiner Formatietung]\";
  document.getElementById(\"infodiv\").style.visibility = \"visible\";
}
showInfo($message);
</script>";
?>
```

Du hattest das div vergessen, probier es einfach so nochmal!


----------



## TheGreenDragon (26. Juli 2009)

Hallo und Danke,

ich hab das div nun drin, doch immer noch keine Ausgabe ... nichts passiert.
Der IE meint: 
hallo ist undefiniert                       Zeile 18

sehr seltsam die ganze Angelegenheit.

Beste Gruesse


----------



## TheBodo (26. Juli 2009)

```
<?php
$message = "hallo";
echo "<div id=\"infodiv\" style=\"position:absolute;visibility:hidden;\"></div>
<script language=\"JavaScript\">
function showInfo(infomsg) {
  var objBody =(window.document.compatMode == \"CSS1Compat\")? window.document.documentElement : window.document.body || null;
  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == \"Microsoft Internet Explorer\") {
    document.getElementById(\"infodiv\").style.top = (objBody.scrollTop + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2))  + \"px\";
  } else {
    document.getElementById(\"infodiv\").style.top = (window.pageYOffset + (intScrH/2) - (document.getElementById(\"infodiv\").offsetHeight/2)) + \"px\";
  }

  document.getElementById(\"infodiv\").style.left = ((intScrW/2) - (document.getElementById(\"infodiv\").offsetWidth/2)) + \"px\";
  document.getElementById(\"infodiv\").innerHTML = \"[Deine Formatierung]\" + infomsg + \"[Ende deiner Formatietung]\";
  document.getElementById(\"infodiv\").style.visibility = \"visible\";
}
showInfo(\"$message\");
</script>";
?>
```

Dann versuchs mal so, du hattest das hallo als Objekt übergeben, nur mit den *Anführungstrichen* wird es zum *gewünschten String*


----------



## TheGreenDragon (26. Juli 2009)

Hi,

es wird langsam ^^ leider neue Fehlermeldung ... hier mal eine Kopie davon

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Sat, 25 Jul 2009 22:50:05 UTC


Meldung: 'offsetHeight' ist Null oder kein Objekt
Zeile: 5
Zeichen: 3
Code: 0
URI: http://127.0.0.1/test.php


----------



## TheBodo (26. Juli 2009)

Das liegt damit zusammen, dass du das nich definiert hast.

Das must du im style="[...]"-teil des divs machen, damit bestimmst du die ausmaße etc des divs.. das musste aber selbst designen!


----------



## TheGreenDragon (26. Juli 2009)

Hi,

hab jetzt sowas probiert, .... scheint nicht zu klappen


```
style=\"position:absolute;offsetHeight:20;offsetWidth:40;visibility:hidden;\"
```

werde mal morgen mich dazu schlau machen, besten Dank fuer deine Zeit und Antworten. 

beste Gruesse


----------



## TheBodo (26. Juli 2009)

```
<?php
$message = "hallo";
echo "<div id=\"infodiv\" style=\"position:absolute;visibility:hidden;\"></div>
<script language=\"JavaScript\">
function showInfo(infomsg) {
  var objBody =(window.document.compatMode == \"CSS1Compat\")? window.document.documentElement : window.document.body || null;
  var intScrH = (window.innerHeight)? window.innerHeight : ((objBody.offsetHeight)? objBody.offsetHeight : 0);
  var intScrW = (window.innerWidth)? window.innerWidth : ((objBody.offsetWidth)? objBody.offsetWidth : 0);

  if (navigator.appName == \"Microsoft Internet Explorer\") {
    document.getElementById(\"infodiv\").style.top = (objBody.scrollTop + (intScrH/2))  + \"px\";
  } else {
    document.getElementById(\"infodiv\").style.top = (window.pageYOffset + (intScrH/2)) + \"px\";
  }

  document.getElementById(\"infodiv\").style.left = ((intScrW/2)) + \"px\";
  document.getElementById(\"infodiv\").innerHTML = \"[Deine Formatierung]\" + infomsg + \"[Ende deiner Formatietung]\";
  document.getElementById(\"infodiv\").style.visibility = \"visible\";
}
showInfo(\"$message\");
</script>";
?>
```

Dann nimms halt erstmal raus


----------



## TheGreenDragon (26. Juli 2009)

Hi,

aber wenn ich es raus nehme, dann bekomme ich doch wieder die Fehlermeldung
'offsetHeight' ist Null oder kein Objekt
habe nun folgendes versucht:

```
style=\"position:absolute;offsetHeight:200px;visibility:hidden;\"
```


```
style=\"position:absolute;height:200px;visibility:hidden;\"
```
und weitere Abwandlungen...
immer wieder die gleiche Meldung. IE, Chrome, Firefox... alle scheinen zu streiken.

Funktioniert das jemanden?

Beste Gruesse


----------



## TheBodo (26. Juli 2009)

Hi, ich hab noch mal gebaut grade!

Das hier funktioniert bei mir im Firefox, Opera, Chrome und IE!


```
<div id="infodiv" style="position:absolute;width:200px;height:150px;visibility:hidden;">Hallo</div>

<script language="JavaScript">

function iebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showinfo(msg) {
  document.getElementById("infodiv").innerHTML = "<h3>" + msg + "</h3>";
  divWidth = document.getElementById('infodiv').style.width.replace("px" , "");
  divHeight = document.getElementById('infodiv').style.height.replace("px" , "");
  if (navigator.appName == "Microsoft Internet Explorer") {
	document.getElementById("infodiv").style.top = iebody().scrollTop + iebody().clientHeight / 2 - divHeight / 2 + "px";
	document.getElementById("infodiv").style.left = (iebody().clientWidth / 2) - (divWidth / 2) + "px"; 
  } else {
  	document.getElementById("infodiv").style.top = window.pageYOffset + window.innerHeight / 2 - divHeight / 2 + "px";
	document.getElementById("infodiv").style.left = (window.innerWidth / 2) - (divWidth / 2) + "px";
  }
  document.getElementById("infodiv").style.visibility = "visible";
}

function hideinfo() {
  document.getElementById("infodiv").style.visibility = "hidden";
}
</script>
<a href="http://www.google.de" onmouseover="JavaScript:showinfo('Sie werden zu Google gelangen')" onmouseout="JavaScript:hideinfo()">Maus hier drüber</a>
```

Das ist ohne event, also immer aufrufbar, das div musste allerdings evlt noch stylen!

Viel Spaß damit!


----------



## TheGreenDragon (26. Juli 2009)

Hi,

werde es nach meinen Wuenschen versuchen zu modifizieren aber eines ist klar DU BIST FANTASTISCH

Besten Dank und Gruesse


----------



## TheBodo (26. Juli 2009)

Gern geschehen


----------

