Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript / Ajax Tooltip Div Position

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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==&& 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 '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


  • #2
    Zitat von 22hase Beitrag anzeigen
    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
    @fschmengler - @fschmengler - @schmengler
    PHP Blog - Magento Entwicklung - CSS Ribbon Generator

    Kommentar


    • #3
      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.

      Kommentar


      • #4
        jQuery:

        Mausposition
        Breite (z.B. der Seite)
        "Mein Name ist Lohse, ich kaufe hier ein."

        Kommentar


        • #5
          Zitat von Chriz Beitrag anzeigen
          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 ^^

          Kommentar


          • #6
            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"><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

            Kommentar


            • #7
              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.
              "Mein Name ist Lohse, ich kaufe hier ein."

              Kommentar


              • #8
                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: {pagelinkId},
                            
                            
                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';

                Kommentar

                Lädt...
                X