Um Mouseout erweitern

[DerHund]

Hallo erst mal...

Ich sitze nun schon länger dran, aber komme einfach auf kleine Lösung...

Ich habe folgenden Codeschnipsel:

<script type="text/javascript">
function refresher() {
$(document).ready(function() {
$("#refresh").load("1.html").empty().html('<center><img src="lader.gif" /></center><br>');
});
}
</script>

Wie kann man diesen erweitern, so das "#refresh" nur dann neu geladen wird, wenn im #refresh div kein Mauszeiger ist. Also es sollte nur ein neu laden erfolgen wenn der Mauszeiger außerhalb des #refresh ist.

Als i Tüpfelchen wäre natürlich auch eine Lösung für Mobiltelefone. Aber dies hat derzeit die geringste Priorität.

 

[Sempervivum]

Mir unklar, wie das funktionieren soll: Das document-ready triggert doch, wenn die Seite geladen wird. Dann hat der Benutzer gar keine Möglichkeit, die Maus über #refresh zu bewegen? Erklär doch mal den Hintergrund, was Du damit bezwecken willst.

 

[DerHund]

Mir unklar, wie das funktionieren soll: Das document-ready triggert doch, wenn die Seite geladen wird. Dann hat der Benutzer gar keine Möglichkeit, die Maus über #refresh zu bewegen? Erklär doch mal den Hintergrund, was Du damit bezwecken willst.

Oh Mann bin ich dein Doofkopf

Zuerst wird 1.php (nicht wie oben 1.html) geladen... Mit dieser wird aus der Datenbank Inhalt geladen...

Dann wird mittels:

<script type="text/javascript">
$(document).ready(function() {
$("#refresh2").load("2.php");
var refreshId = setInterval(function() {
$("#refresh2").load('2.php?' + 1*new Date());
}, 5000);
});
</script>

Überprüft ob neuer Inhalt verfügbar ist und wenn ja löst die 2.php ...

<script type="text/javascript">
refresher();
</script>

... aus um eben die 1.php neu laden zu lassen...
Funktioniert so ganz gut, ist aber dann für den Besucher sehr bescheiden, wenn er gerade unterm lesen ist und dann plötzlich neuer Inhalt geladen wird.... Das würde ich gerne unterbinden und bin auf die Lösung mit der Maus gekommen weil dies am plausibelsten ist, weil man kein Augentracking machen kann

 

[Sempervivum]

Jaaa, so macht es natürlich viel mehr Sinn. Ich würde folgendes empfehlen: Registriere Eventhandler für mouseover und mouse out. Dort setzt bzw. löschst Du eine Variable oder ein data-Attribut, das anzeigt, ob die Maus inner- oder außerhalb ist und unterbindest entspr. das Nachladen. Allerdings ist die Mouseposition auch kein zuverlässiges Kriterium ob der Benutzer gerade am Lesen ist. Das kann er auch, wenn die Maus außerhalb ist.

 

[DerHund]

Registriere Eventhandler für mouseover und mouse out. Dort setzt bzw. löschst Du eine Variable oder ein data-Attribut, das anzeigt, ob die Maus inner- oder außerhalb ist und unterbindest entspr. das Nachladen.

Das ist ja der Punkt warum ich mich nun ins Forum getraut habe...
Ich sitze nun schon Tage lang an verschiedenen Varianten und komme auf keine Lösung...
Hab bisher immer nur mich mit PHP beschäftigt und dies geht nun leider nicht mit PHP...

Ich habe es zwar schon hin gebracht das es so einigermaßen funktioniert hat, aber dann hat es plötzlich immer neu geladen wenn man mit der Maus den Bereich verlassen hat... Das ist natürlich auch nicht sinn der Sache weil ja nur die 2.php das neu laden veranlassen soll...

Allerdings ist die Mouseposition auch kein zuverlässiges Kriterium ob der Benutzer gerade am Lesen ist. Das kann er auch, wenn die Maus außerhalb ist.

Ich weiss... Aber wie gesagt Augentracking wird schwer... Deswegen dieser "kleine" Ansatz das neu laden zu unterbinden... *gg*

 

[Sempervivum]

Dieses funktioniert bei mir:

        $(document).ready(function () {
            $("#refresh2").on("mouseover", function() {
                $(this).addClass("mousein");
            });
            $("#refresh2").on("mouseout", function() {
                $(this).removeClass("mousein");
            });
            $("#refresh2").load("testpost.php");
            var refreshId = setInterval(function () {
                if (!$("#refresh2").hasClass("mousein")) {
                    console.log("load");
                    $("#refresh2").load('testpost.php?' + 1 * new Date());
                }
            }, 500);
        });

Ich habe ein eigenes Testscript verwendet und das Intervall auf 500ms herunter gesetzt. Musst Du dann wieder ändern.