• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV mit Javascript an verschiedenen Elementen positionieren

Status
Für weitere Antworten geschlossen.

maxm

Neues Mitglied
Liebe Forum-Gemeinschaft,

ich habe eine Anfängerfrage! Bitte nicht böse sein :).

Ich möchte gerne an oder neben einigen Form-Elementen ein Hilfe-Div per Mausklick anzeigen lassen. Ich weiß wie man ein DIV anzeigen/verbergen kann aber nicht wie ich ein DIV in an verschiedenen stellen anzeigen kann. Wichtig ist für mich, dass es ein und derselbe DIV ist und nicht viele verschiedene Divs sind!

Vielleicht kann man es per javascript machen?

Vielen herzlichen Dank für Eure Hilfe!


<html>
<body>

<form>
<input type="input" name="vorname" id="vorname" value="Max">
<h1>TEXT</h1>
<input type="input" name="nachname" id="nachname" value="Mustermann">
<h1>TEXT</h1>
<input type="input" name="email" id="email" value="[email protected]">
</form>

<div id="hilfe">...hilfe...</div>
</body>
</html>
 
Zunächst einmal sollte das div am besten genau so groß wie die Formular Felder sein ( Von der Höhe her). Dann solltest du die Position des Elementes ermitteln über das du garde hoverst. Da dies nur im Body teil immer ohne Aufwand klappt hier eine Funktion mit der das immer klappen sollte.

Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) - Einzelnen Beitrag anzeigen - Koordinate in HTML-Seite prüfen

Damit solltets du dann x und y koordinaten haben.
Dann setzt du die position deines Hilfe divs auf absolute und positionierst es an der stellen:

element.x + element.width , element.y

Musst das Hilfe element dann dementsprechend noch beschreiben.
Ich würde eventuell ein assoziatives array machen. Und dem Element eine id vergeben. Im asoziativen Array (im JSON Format) auch ein Feld mit dem Namen beschreiben und den Wert dafür auslesen.
Im Grunde genommen so was

HTML
HTML:
<input type="text" name="username" id="username" >

Script
HTML:
messageArray = {
 "username":"Bitte hier den Usernamen eingeben",
 "password":"Das Passwort muss aus 6-12 Zeichen bestehen"
};

document.getElementById('username').onmouseover = function() {
  var message = messageArray[this.id];
  var pos = getPageCoords(this.id);

 // Position und Message setzen
 document.getElementById('hilfe').style.position = "absolute";
  document.getElementById('hilfe').style.left = pos.x + this.width;
  document.getElementById('hilfe').style.top = pos.y;
  document.getElementById('hilfe').innerHTML = message;
};

Das sollte helfen und hoffentlich auch funktionieren. Hab hier shcnell hingeschrieben :P Wenn wem was auffällt einfach melden ;)

Du musst dann nur noch machen, das bei mouseover wieder die Position und Message gelöscht wird ;)
 
Du hast gesagt, per Mausklick, also gehe ich davon aus, dass du einen feststehenden Div anzeigen lassen willst? Oder willst du wie über mir beschrieben einen Div per Hover anzeigen lassen, der auch an verschiedenen Stellen auftaucht, bzw. sich immer nach dem Cursor richtet?
 
Du hast gesagt, per Mausklick, also gehe ich davon aus, dass du einen feststehenden Div anzeigen lassen willst? Oder willst du wie über mir beschrieben einen Div per Hover anzeigen lassen, der auch an verschiedenen Stellen auftaucht, bzw. sich immer nach dem Cursor richtet?

Stimmt. Er wills per Mausklick machen :D Grade gesehen. Finde es nur von der Logik her mit dem hover günstiger gemacht, deswegen hab ich das wohl intuitiv gemacht. Mal schauen ob er sich meldet :)
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben