Javascript / Ajax Tooltip Div Position

16.08.2010, 07:42

Guten Morgen.

ich habe mal versucht ein Tooltip zuschreiben, dieserfunktioniert auch soweit.

PHP-Code:

  function showUser(str)
{    
    document.getElementById("content").onclick=mouseMove;

    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if(window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","ticket.php?page=" + str,true);
    xmlhttp.send();
}

function mouseMove(e)
{
    var x,y;
    if (!document.all) 
    {
        x=e.clientX;
            y=e.clientY;
    }
    else 
    {
        x=event.clientX;
        y=event.clientY;
    }
    document.getElementById("txtHint").style.left = x+20 + 'px';
    document.getElementById("txtHint").style.top = y + 'px';
    document.getElementById("txtHint").style.display = 'block';
}
    
function closed()
{
    document.getElementById("txtHint").style.display = 'none';
}

Leider brauche ich doch ein wenig Hilfe bei ein paar Änderungen und ich hoffe ihr gebt mir Rat.

Ich würde gern das sich die der Layer automatisch erkennt wo der Bildschirm zuende ist und sich statt rechts neben dem Layer dann eben links daneben öffnet. Desweiteren würde ich gern das er nur auf geht wenn man auch auf einen link klickt, denn derzeit ist es so das wenn er einmal auf ist und man ihn nicht schließt er bei jeden klick auf der Seite an die Mausposition springt. Liegt sicher an

Code:

document.getElementById("content").onclick=mouseMove;

.

Javascript und Ajax ist leider nicht so meins und verwende ich eher selten, deswegen bitte ich um Hilfe.

Lg und nice Day.

EDIT: ahhhh verdammt falsches Forum, scheiß Montage :/ bitte um Verschiebung

fab · 16.08.2010, 13:40

Zitat:

Zitat von 22hase

Liegt sicher an

Code:

document.getElementById("content").onclick=mouseMove;

.

Ich kann nur raten, da du sonst nichts von deiner Seite zeigst aber wenn content deine gesamte Seite ist und du content.onclick deine mouseMove Funktion zuweist, kommt dir das nicht selber falsch vor? Was willst du damit bezwecken?

1. sollte sich das Event doch auf die Links beziehen, denen du Tooltips zuweisen willst und nicht auf die gesamte Seite.

2. hat die Funktion einen irreführenden Namen, anscheinend soll sie ja beim Klick auf einen Link das Tooltip an der passenden Stelle anzeigen. Oder soll es doch bei mouseOver erscheinen und sich mitbewegen? Entscheide dich

16.08.2010, 14:23

Ja die funktion habe ich aus mein admin bereich übernommen, habse nur noch nicht umbenannt.

ich will schon ein Klick haben, nur sollte es eben erkennen wenn der Bildschirm zuende ist es dann keinen Scrolbalken horizontal gibt wie es derzeit der Fall ist, sondern sich in die andere Reichtung öffnet.

Mit contenthattest recht ^^ ist ja die gesamte page, hab mich da vertan.

Chriz · 16.08.2010, 19:35

jQuery:

Mausposition
Breite (z.B. der Seite)

16.08.2010, 21:45

Zitat:

Zitat von Chriz

jQuery:

Mausposition
Breite (z.B. der Seite)

jo danke, gabs von jquery net auch einen tooltip der daten dynamisch holen kann? weil ich glaub damit kommt manm doch besser als mit dem selbst geschriebenen mist ^^

17.08.2010, 09:07

So hab mich mal bissl reingefuxt und folgendes geschrieben. was auch soweit funktioniert.

PHP-Code:

  $(document).ready(function() 
{
    $("a.tooltip").click(function() 
    {
    var linkId = $(this).attr("id");

    $.ajax({
            type: "GET",
            url: "ajax.php",
            data: "page=" + linkId,
            success: function(data,e) 
                    {
                    $("#txtHint").html(data);
                    $("#txtHint").css("display","block"); 
                    $("#txtHint").css("top",  e.pageY+"px"); 
                    $("#txtHint").css("left", e.pageX+"px"); 
                    }
              });
       });
});

   $(document).click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 

$(document).ready(function(){
   $().click(function(e)
   {
       if(e.pageX <= 800)
    {
    $("#txtHint").css("top",  e.pageY+"px"); 
    $("#txtHint").css("left", e.pageX+"px"); 
    }
    else
    {
    $("#txtHint").css("top",  e.pageY+"px"); 
    $("#txtHint").css("left", e.pageX-320+"px"); 
    }
   }); 
});

function closed()
{
    document.getElementById("txtHint").style.display = 'none';
}

die Ausgabe der Links sieht so aus.

PHP-Code:

  <div id="content">
   <div class="content_kontinent">
     <div class="kontinent">Afrika</div>
       <div class="tickets"><a class="tooltip" id="24"><span class="start">Yola</span></a> <span class="center">-</span> <span class="preis">258 €</span></div>
   </div>
</div>

Da ich wie gesagt das net so häufig nutze, vielleicht habt ihr tipps oder verbesserungsvorschläge

Chriz · 17.08.2010, 09:44

Statt 8x $("#txtHint") zu schreiben, würde ich eine Variable verwenden, 2x $(document).ready() ist auch überflüssig, eine fixe Pixelzahl zum Linksausrichten würde ich auch nicht verwenden, versuch doch mal eine andere Auflösung und stattdessen $(window).width() minus die Breite des Tooltips. Statt data "page=" + linkId würde ich {page: linkId} verwenden, dann übernimmt jQuery für dich das korrekte escapen.

17.08.2010, 10:27

So habe das mal geändert. Danke für die Hinweise, hoffe ich hab es richtig umgesetzt

PHP-Code:

  $(document).ready(function() 
{
    var txtHint = "#txtHint";
    

   $().click(function(e)
   {
    var breite = $("#page").width()-$(txtHint).width();

       if(e.pageX < breite)
    {
    $(txtHint).css("top",  e.pageY+"px"); 
    $(txtHint).css("left", e.pageX+"px"); 
    }
    else
    {
    $(txtHint).css("top",  e.pageY+"px"); 
    $(txtHint).css("left", e.pageX-320+"px"); 
    }
   }); 
   

    $("a.tooltip").click(function() 
    {
    var linkId = $(this).attr("id");

    $.ajax({
            type: "GET",
            url: "ajax.php",
            data: {page: linkId},
            
            success: function(data,e) 
                    {
                    $(txtHint).html(data);
                    $(txtHint).css("display","block"); 
                    }
              });
       });
});

   $(document).click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 

function closed()
{
    document.getElementById("txtHint").style.display = 'none';
}

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
[Erledigt] ToolTip mit Grafik und spezielle Detail's anzeigen	localhost.	PHP Tipps 2010	32	09.06.2010 16:56
Ergebniswert an weiteres Javascript weitergeben (+Ajax?)	fryswe	JavaScript, Ajax und mehr	1	17.05.2010 13:43
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
Handbücher / Onlinetutos für JavaScript / Ajax	buggybugga	JavaScript, Ajax und mehr	4	07.08.2009 11:55
PHP Tooltip AJAX	webdino	PHP Tipps 2009	2	19.06.2009 11:26
javascript countdown mit ajax einbinden	chrismh	JavaScript, Ajax und mehr	1	18.04.2009 11:29
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
Kalender ohne Neuladen der Seite PHP, Javascript, Ajax	Earl3000	JavaScript, Ajax und mehr	16	11.12.2008 22:07
Ajax - PHP - XML - JavaScript	phpbeginner	HTML, Usability und Barrierefreiheit	2	26.11.2007 16:48
Javascript in Ajax responseText funktioniert nicht	Plague	PHP Tipps 2007	6	03.07.2007 21:08
JavaScript Tooltip funktioniert nicht	<Daniel>	HTML, Usability und Barrierefreiheit	2	13.09.2006 13:02
Javascript (AJAX) Error (Syntax-Fehler)	lomtas	HTML, Usability und Barrierefreiheit	4	04.08.2006 09:41
javascript probleme bei Ajax anwendung	Sclot	HTML, Usability und Barrierefreiheit	11	22.03.2006 13:06

16.08.2010, 07:42
22hase Gast Beiträge: n/a	Javascript / Ajax Tooltip Div Position Guten Morgen. ich habe mal versucht ein Tooltip zuschreiben, dieserfunktioniert auch soweit. PHP-Code: function showUser(str) { document.getElementById("content").onclick=mouseMove; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ticket.php?page=" + str,true); xmlhttp.send(); } function mouseMove(e) { var x,y; if (!document.all) { x=e.clientX; y=e.clientY; } else { x=event.clientX; y=event.clientY; } document.getElementById("txtHint").style.left = x+20 + 'px'; document.getElementById("txtHint").style.top = y + 'px'; document.getElementById("txtHint").style.display = 'block'; } function closed() { document.getElementById("txtHint").style.display = 'none'; } Leider brauche ich doch ein wenig Hilfe bei ein paar Änderungen und ich hoffe ihr gebt mir Rat. Ich würde gern das sich die der Layer automatisch erkennt wo der Bildschirm zuende ist und sich statt rechts neben dem Layer dann eben links daneben öffnet. Desweiteren würde ich gern das er nur auf geht wenn man auch auf einen link klickt, denn derzeit ist es so das wenn er einmal auf ist und man ihn nicht schließt er bei jeden klick auf der Seite an die Mausposition springt. Liegt sicher an Code: document.getElementById("content").onclick=mouseMove; . Javascript und Ajax ist leider nicht so meins und verwende ich eher selten, deswegen bitte ich um Hilfe. Lg und nice Day. EDIT: ahhhh verdammt falsches Forum, scheiß Montage :/ bitte um Verschiebung Geändert von 22hase (16.08.2010 um 07:46 Uhr).


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

16.08.2010, 14:23
22hase Gast Beiträge: n/a	Ja die funktion habe ich aus mein admin bereich übernommen, habse nur noch nicht umbenannt. ich will schon ein Klick haben, nur sollte es eben erkennen wenn der Bildschirm zuende ist es dann keinen Scrolbalken horizontal gibt wie es derzeit der Fall ist, sondern sich in die andere Reichtung öffnet. Mit contenthattest recht ^^ ist ja die gesamte page, hab mich da vertan.

16.08.2010, 19:35
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.069	jQuery: Mausposition Breite (z.B. der Seite) __________________ "Nuschel ich?" - "Was?"

17.08.2010, 09:07
22hase Gast Beiträge: n/a	So hab mich mal bissl reingefuxt und folgendes geschrieben. was auch soweit funktioniert. PHP-Code: $(document).ready(function() { $("a.tooltip").click(function() { var linkId = $(this).attr("id"); $.ajax({ type: "GET", url: "ajax.php", data: "page=" + linkId, success: function(data,e) { $("#txtHint").html(data); $("#txtHint").css("display","block"); $("#txtHint").css("top", e.pageY+"px"); $("#txtHint").css("left", e.pageX+"px"); } }); }); }); $(document).click(function(e){ $('#status2').html(e.pageX +', '+ e.pageY); }); $(document).ready(function(){ $().click(function(e) { if(e.pageX <= 800) { $("#txtHint").css("top", e.pageY+"px"); $("#txtHint").css("left", e.pageX+"px"); } else { $("#txtHint").css("top", e.pageY+"px"); $("#txtHint").css("left", e.pageX-320+"px"); } }); }); function closed() { document.getElementById("txtHint").style.display = 'none'; } die Ausgabe der Links sieht so aus. PHP-Code: `<div id="content"> <div class="content_kontinent"> <div class="kontinent">Afrika</div> <div class="tickets"><a class="tooltip" id="24"><span class="start">Yola</span></a> <span class="center">-</span> <span class="preis">258 €</span></div> </div> </div>` Da ich wie gesagt das net so häufig nutze, vielleicht habt ihr tipps oder verbesserungsvorschläge

17.08.2010, 09:44
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.069	Statt 8x $("#txtHint") zu schreiben, würde ich eine Variable verwenden, 2x $(document).ready() ist auch überflüssig, eine fixe Pixelzahl zum Linksausrichten würde ich auch nicht verwenden, versuch doch mal eine andere Auflösung und stattdessen $(window).width() minus die Breite des Tooltips. Statt data "page=" + linkId würde ich {page: linkId} verwenden, dann übernimmt jQuery für dich das korrekte escapen. __________________ "Nuschel ich?" - "Was?"

17.08.2010, 10:27
22hase Gast Beiträge: n/a	So habe das mal geändert. Danke für die Hinweise, hoffe ich hab es richtig umgesetzt PHP-Code: $(document).ready(function() { var txtHint = "#txtHint"; $().click(function(e) { var breite = $("#page").width()-$(txtHint).width(); if(e.pageX < breite) { $(txtHint).css("top", e.pageY+"px"); $(txtHint).css("left", e.pageX+"px"); } else { $(txtHint).css("top", e.pageY+"px"); $(txtHint).css("left", e.pageX-320+"px"); } }); $("a.tooltip").click(function() { var linkId = $(this).attr("id"); $.ajax({ type: "GET", url: "ajax.php", data: {page: linkId}, success: function(data,e) { $(txtHint).html(data); $(txtHint).css("display","block"); } }); }); }); $(document).click(function(e){ $('#status2').html(e.pageX +', '+ e.pageY); }); function closed() { document.getElementById("txtHint").style.display = 'none'; }