alternativen oder verbesserungen zu alert()?

T

TheGreenDragon

Erfahrenes Mitglied
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:
Code: 
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
 
Jo hab ich.
erstens um deine lösung die du bis jetzt hast mal zu verbessern:
PHP: 
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: 
<?php if(isset($fehelrmeldungsvariable)){echo '<div>' . $fehelrmeldungsvariable . '</div>';}

Das sollte dir auf jeden fall weiterhelfen.

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

HTML: 
<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!
 
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:
Code: 
display: absolute;
margin:-50% auto;
top: 50%;
width:600px;
height:300px;
display: block;

MFG
Mark Pasirgilis
 
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:
Code: 
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.

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

Ciao
Quaese
 
Zuletzt bearbeitet:
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!

Code: 
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!
 
Hi,

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

Danke für den Hinweis - hab es ausgebessert.

Ciao
Quaese
 
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 :confused:
Code: 
<?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
 
PHP: 
<?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!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück