Padarom
Neues Mitglied
Hallo,
ich versuche mich seit einiger Zeit ein wenig an AJAX, was mit meiner eigentlichen Idee auch funktioniert. Alle 3,5 Sekunden wird ein AJAX-Request durchgeführt, der in einer MySQL-Datenbank alle Einträge ausliest und sie auf die jeweilige Position auf der Karte setzt. Dazu werden einige Informationen in eine DIV geschrieben, die mit ihrer ID eindeutig der Position auf der Karte zugeordnet ist. Dieses div erhält direkt beim Erstellen das Style-Attribut visibility: hidden, sodass es nicht angezeigt wird.
Wenn ich nun über das jeweilige Symbol gehe, erscheint darüber das DIV an der richtigen Position (Visibility wird auf Visible gesetzt, beim Mouseout wieder auf Hidden). Da jedoch alle 3,5 Sekunden alle MySQL-Daten neu eingelesen werden und damit auch die divs "neu" erstellt werden (egal ob der Inhalt gleich ist, oder nicht), wird im Moment der Aktualisierung ihre Sichtbarkeit wieder auf versteckt gesetzt. Dann muss man wieder die Maus ein wenig bewegen, damit das onmouseover greift und die Box wieder visible ist.
Nun meine Frage: Kann ich diese Notwendigkeit des Mausbewegens auch entfernen? Später sollen die Abfragen etwa im Sekundentakt laufen, sodass die Positionen einigermaßen flüssig sind. Dann muss man jedoch selbstverständlich jede Sekunde seine Maus wieder bewegen.
Hier eine Livevorschau.
Ich hoffe mal, dass das verständlich genug erklärt war.
Den "unwichtigen" Teil habe ich gekürzt.
Ich hoffe jemand kann mir einen Tipp geben, wie ich meinen Code so ändern/verbessern kann, dass diese div nicht mehr versteckt wird.
Danke im Voraus.
Mit freundlichen Grüßen
Padarom
ich versuche mich seit einiger Zeit ein wenig an AJAX, was mit meiner eigentlichen Idee auch funktioniert. Alle 3,5 Sekunden wird ein AJAX-Request durchgeführt, der in einer MySQL-Datenbank alle Einträge ausliest und sie auf die jeweilige Position auf der Karte setzt. Dazu werden einige Informationen in eine DIV geschrieben, die mit ihrer ID eindeutig der Position auf der Karte zugeordnet ist. Dieses div erhält direkt beim Erstellen das Style-Attribut visibility: hidden, sodass es nicht angezeigt wird.
Wenn ich nun über das jeweilige Symbol gehe, erscheint darüber das DIV an der richtigen Position (Visibility wird auf Visible gesetzt, beim Mouseout wieder auf Hidden). Da jedoch alle 3,5 Sekunden alle MySQL-Daten neu eingelesen werden und damit auch die divs "neu" erstellt werden (egal ob der Inhalt gleich ist, oder nicht), wird im Moment der Aktualisierung ihre Sichtbarkeit wieder auf versteckt gesetzt. Dann muss man wieder die Maus ein wenig bewegen, damit das onmouseover greift und die Box wieder visible ist.
Nun meine Frage: Kann ich diese Notwendigkeit des Mausbewegens auch entfernen? Später sollen die Abfragen etwa im Sekundentakt laufen, sodass die Positionen einigermaßen flüssig sind. Dann muss man jedoch selbstverständlich jede Sekunde seine Maus wieder bewegen.
Hier eine Livevorschau.
Ich hoffe mal, dass das verständlich genug erklärt war.
PHP:
$query = "SELECT * FROM `active`";
$abfrage = mysql_query($query) or die("Fehlermeldung: ".mysql_error());
while( $ergebnis = mysql_fetch_object($abfrage))
{
echo '<img src="inc/plane_icon.png" alt="plane"
id="'.$ergebnis->Flugnummer.'" onmouseover="info(this.id, true)" onmouseout="info(this.id, false)" />';
echo '<div style="position: absolute; visibility: hidden; class="info" id="'.$ergebnis->Flugnummer.'_info"></div>';
}
Code:
[COLOR=#4F76AC][FONT=Consolas]var[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]new[/FONT][/COLOR][COLOR=black][FONT=Consolas] XMLHttpRequest[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]();
[/FONT][/COLOR][COLOR=black][FONT=Consolas]setTimeout[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"updateMap()"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]5000[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]0[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=black][FONT=Consolas] updateMap[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]()[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.onreadystatechange [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]()[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas] if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]ajax.readyState [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]==[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]4[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]&&[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.status [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]==[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]200[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=black][FONT=Consolas] document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"images"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].innerHTML [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.responseText[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas] }
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas] }
[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.open[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"get"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"inc/request.php"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]true[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=black][FONT=Consolas] ajax.send[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]();
[/FONT][/COLOR][COLOR=black][FONT=Consolas] setTimeout[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"updateMap()"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]5000[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]0[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]);
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]}
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas]function[/FONT][/COLOR][COLOR=black][FONT=Consolas] info[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas],[/FONT][/COLOR][COLOR=black][FONT=Consolas] visible[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]{
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas] if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]visible [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]== [/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]true[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas] document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]+[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"_info"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].style.visibility [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]'visible'[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#4F76AC][FONT=Consolas] if[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]visible [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]== [/FONT][/COLOR][COLOR=#9B5F9B][FONT=Consolas]false[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas] document.getElementById[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]([/FONT][/COLOR][COLOR=black][FONT=Consolas]a [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]+[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]"_info"[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas])[/FONT][/COLOR][COLOR=black][FONT=Consolas].style.visibility [/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]=[/FONT][/COLOR][COLOR=#823125][FONT=Consolas]'hidden'[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas];
[/FONT][/COLOR][COLOR=#1E7C70][FONT=Consolas]}[/FONT][/COLOR]
Ich hoffe jemand kann mir einen Tipp geben, wie ich meinen Code so ändern/verbessern kann, dass diese div nicht mehr versteckt wird.
Danke im Voraus.
Mit freundlichen Grüßen
Padarom