Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 17
Like Tree2Likes

Thema: Einfache Followfunktion - Javascript/Jquery

  1. #1
    canbiz ist offline Jungspund
    registriert
    09-05-2014
    Beiträge
    13

    Einfache Followfunktion - Javascript/Jquery

    Hallo!

    Ich habe ein Problem, welches mich seit heute morgen beschäftigt,

    ich habe 2 deklarierte Divs, das eine ist 125px Breit und 75px hoch, in dem soll sich ein kleineres DIV (b1) bewegen, bzw meiner Maus folgen.
    Dafür müssen ja die Positionen ermittelt werden.

    Anfangs wollte ich es mit einen Hover machen, ist aber unnötig, da es für mich nur zum lernen ist (Grundbasics).

    Nun habe ich schon einmal die offset von dem gesamten HTML - DOM, und die offsets von A1 (großes DIV).
    und noch eine Click-Funktion um die genauen Standorte zu sehen.

    Das kleine DIV (b1) muss sich 105px von links nach rechts oder umgedreht bewegen und 55px von oben nach unten/unten nach oben.

    Leider klappt das nicht wirklich wie ich es mir gedacht habe..

    ich habe euch das (jetzt) kleine Script mal auf jsfiddle hochgeladen.

    (Es ist jetzt klein, da ich meine alte Followfunktion entfernt habe, da die, die linken und rechten Ränder um 10px verfehlt hat (Math.sqrt Funktion)


    Hier ist der Link: Edit fiddle - JSFiddle


    Ich hoffe ihr könnt mir helfen!

    Danke schonmal im vorraus!

    - - - Aktualisiert - - -

    €: Nicht wundern, dass es englisch ist, war auch in einen anderen Forum die geben aber keine Auskunft (leicht arrogant die Amerikaner)

    Hoffe ihr seid freundlicher
    Geändert von mikdoe (04-06-2014 um 16:38 Uhr) Grund: Gelöst gesetzt

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    und was genau ist jetzt dein problem?
    das ändern der position?
    das bestimmen der grenzen?
    ???
    canbiz likes this.

  3. #3
    canbiz ist offline Jungspund
    registriert
    09-05-2014
    Beiträge
    13

    AW: Einfache Followfunktion - Javascript/Jquery

    Das Problem ist, ich möchte:
    1. Meine Maus im Dokument bewegen und das soll mir b1 (das kleine div) folgen
    und 2. dabei soll es sich nur in den großen DIV bewegen und nicht über die Grenzen gehen

    Bestes Beispiel ist (hat zwar nichts damit zutun aber ist sehr anschaulich): Cut & Paste Xeyes (eyes following cursor)


    so von der funktionsweiße.

    Liebe grüße.
    Geändert von canbiz (04-06-2014 um 15:06 Uhr)

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von canbiz Beitrag anzeigen
    Das Problem ist, ich möchte:
    1. Meine Maus im Dokument bewegen und das soll mir b1 (das kleine div) folgen
    und 2. dabei soll es sich nur in den großen DIV bewegen und nicht über die Grenzen gehen
    das ist nicht das problem, sondern was du möchtest.

    Code:
    <html>
      <head>
        <title></title>
        <style type="text/css">
          .outher {
            width:200px;
            height:200px;
            background-color:#ff0000;
          }
          .inner {
            position:absolute;
            width:50px;
            height:50px;
            background-color:#0000ff;
          }
        </style>
    	  <script type="text/javascript" src="jquery.js"></script>
    	  <script type="text/javascript">
    	    $(document).ready(function()
    	    {
    	      $(".outher").on("mouseover", function()
    	      {
    	        $(document).on("mousemove.follow", function(event)
      	      {
      	        var $outher = $(".outher");
      	        if (event.clientX >= $outher.offset().left + 25 
      	          && event.clientX <= $outher.offset().left + $outher.width() - 25)
      	        {
      	          $(".inner") .css({
                    left: ((event.clientX - 25) + "px")
                  });
      	        }
      	        else if (event.clientX < $outher.offset().left + 25)
      	        {
      	          $(".inner") .css({
                    left: (($outher.offset().left) + "px")
                  });
      	        }
      	        else if (event.clientX > $outher.offset().left + $outher.width() - 25)
      	        {
      	          $(".inner") .css({
                    left: (($outher.offset().left + $outher.width() - 50) + "px")
                  });
      	        }
      	        if (event.clientY >= $outher.offset().top + 25 
      	          && event.clientY <= $outher.offset().top + $outher.height() - 25)
      	        {
        	        $(".inner") .css({
                    top: ((event.clientY - 25) + "px")
                  });
                }
                else if (event.clientY < $outher.offset().top + 25)
      	        {
        	        $(".inner") .css({
                    top: (($outher.offset().top) + "px")
                  });
                }
                else if (event.clientY > $outher.offset().top + $outher.height() - 25)
      	        {
        	        $(".inner") .css({
                    top: (($outher.offset().top + $outher.height() - 50) + "px")
                  });
                }
              });
            });
            $(".outher").on("mouseout", function()
    	      {
    	        $(document).off("mousemove.follow");
            });
          });  
        </script>
      </head>
      <body>
        <div class="outher">
          <div class="inner">
            
          </div>
        </div>
      </body>
    </html>
    canbiz likes this.

  5. #5
    canbiz ist offline Jungspund
    registriert
    09-05-2014
    Beiträge
    13

    AW: Einfache Followfunktion - Javascript/Jquery

    Ich danke dir, genau das was ich gesucht habe
    kann geschlossen werden

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Einfache Followfunktion - Javascript/Jquery

    @hesst: Hat es einen Grund wieso dein HTML keine DocType hat?

  7. #7
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von kkapsner Beitrag anzeigen
    @hesst: Hat es einen Grund wieso dein HTML keine DocType hat?
    ja, dann kann jeder den nehmen, den er möchte

  8. #8
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von hesst Beitrag anzeigen
    ja, dann kann jeder den nehmen, den er möchte
    Müssen Doctype und JS/HTML nicht ein bisschen zueinander passen? Sonst wäre die Angabe doch unnötig, oder?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  9. #9
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von mikdoe Beitrag anzeigen
    Müssen Doctype und JS/HTML nicht ein bisschen zueinander passen? Sonst wäre die Angabe doch unnötig, oder?
    wenn du html 5 elemente verwendest, solltest du auch den html 5 Doctype nehmen, sonst tut es der 4er genauso gut

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

    AW: Einfache Followfunktion - Javascript/Jquery

    OK und wenn jetzt einer versucht, den Code in ein Projekt mit uralt-Doctype einzubinden? Wäre es nicht sinnvoll, als Doctype wenigstens den kleinst möglichen anzugeben? Frage ist ernst gemeint, weil ich die Sache mit dem Doctype auch immer nur annähernd verstanden habe. Ganz früher gab es das noch nicht.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  11. #11
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von mikdoe Beitrag anzeigen
    OK und wenn jetzt einer versucht, den Code in ein Projekt mit uralt-Doctype einzubinden?
    hier sind nur 2 divs drinn

    Zitat Zitat von mikdoe Beitrag anzeigen
    Wäre es nicht sinnvoll, als Doctype wenigstens den kleinst möglichen anzugeben?
    mmn nicht, sinn macht MEINER MEINUNG nach nur html4, der derzeitige standard oder html 5, der aber noch nicht standard ist, MEINER MEINUNG nach.
    und nachdem hicksi den living standard ausgerufen hat ist die frage, ob es jemals wieder einen echten standard geben wird.

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von hesst Beitrag anzeigen
    ja, dann kann jeder den nehmen, den er möchte
    OK - ist bei Anfängern aber eher schlecht, da sie dann einfach dein HTML übernehmen und dann gar keine haben.

    Hier wird das zwar alles durch JQuery erschlagen, aber gerade Mauspositionen sind im Quirksmode extrem unterschiedlich in den verschiedenen Browsern.

  13. #13
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Einfache Followfunktion - Javascript/Jquery

    da bin ich genau gegensätzlicher meinung
    und wenn sie in einen fehler laufen, auch gut, dannach wissen sie was ein doctype ist

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: Einfache Followfunktion - Javascript/Jquery

    Ich halte diesen pädagogischen Ansatz für eher fragwürdig (sogar gefärhlich). V.A. da du deinen Code oben so präsentiert hast, dass das die Art und Weise ist, das Problem gut zu lösen. Und das ist er ohne DocType eben nicht, da HTML ohne DocType zum Einen invalide und zum Anderen einfach eine schlechte Idee ist.

    Aber ich sehe schon, dass das ist wieder etwas ist, bei dem wir uns nicht einig werden...

  15. #15
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

    AW: Einfache Followfunktion - Javascript/Jquery

    Zitat Zitat von kkapsner Beitrag anzeigen
    Aber ich sehe schon, dass das ist wieder etwas ist, bei dem wir uns nicht einig werden...
    mo hat dazu mal folgende Vorgabe gemacht:
    Zitat Zitat von mo Beitrag anzeigen
    die grundsätzliche frage stellt sich ja dann nun, was gefällt dem user. entweder eine hilfreiche antwort und/oder eine fachlich hochwertige antwort. der user wird mit beiden antworten zufrieden sein. der js-freak nur mit der letzteren :o)
    da sich das forum aber an die breite masse richtet, liegt für mich der fokus auf der hilfreichen antwort.
    (Quelle: http://forum.jswelt.de/lounge/59194-...tml#post378336 )

    Das würde ich auf diesen Fall hier so anwenden, dass der Doctype angegeben wird oder zumindest ein Hinweis darauf gegeben werden muss, dass der User sich da noch um etwas kümmern muss.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Einfache Frage zu JS und jQuery
    Von ranger im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 05-03-2012, 23:28
  2. MINIJOB: Einfache JavaScript Sache!!!
    Von shyne im Forum Jobs
    Antworten: 0
    Letzter Beitrag: 02-11-2009, 21:01
  3. Antworten: 0
    Letzter Beitrag: 26-11-2006, 13:11
  4. Antworten: 3
    Letzter Beitrag: 09-04-2005, 14:35
  5. Einfache Javascript Frage. Komme nicht weiter :(
    Von Macus im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-01-2005, 12:16

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •