• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Einfache Followfunktion - Javascript/Jquery

C

canbiz

New member
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 :)
 
Zuletzt bearbeitet von einem Moderator:
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.
 
Zuletzt bearbeitet:
canbiz schrieb:
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
Zum Vergrößern anklicken....
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>
 
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.
 
mikdoe schrieb:
OK und wenn jetzt einer versucht, den Code in ein Projekt mit uralt-Doctype einzubinden?
Zum Vergrößern anklicken....
hier sind nur 2 divs drinn

mikdoe schrieb:
Wäre es nicht sinnvoll, als Doctype wenigstens den kleinst möglichen anzugeben?
Zum Vergrößern anklicken....
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.
 
hesst schrieb:
ja, dann kann jeder den nehmen, den er möchte
Zum Vergrößern anklicken....
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.
 
da bin ich genau gegensätzlicher meinung
und wenn sie in einen fehler laufen, auch gut, dannach wissen sie was ein doctype ist
 
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...
 
kkapsner schrieb:
Aber ich sehe schon, dass das ist wieder etwas ist, bei dem wir uns nicht einig werden...
Zum Vergrößern anklicken....
mo hat dazu mal folgende Vorgabe gemacht:
mo schrieb:
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 :eek:)
da sich das forum aber an die breite masse richtet, liegt für mich der fokus auf der hilfreichen antwort.
Zum Vergrößern anklicken....
(Quelle: http://forum.jswelt.de/lounge/59194-forumver-nderungen-style-plugins.html#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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben