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

[GELÖST] Obere Ecke eines Input-Feldes ermitteln

R

Rupert

New member
Hallo,

ich habe eine HTML-Seite, bei dem ich per Javascript Elemente im oberen Bereich der Seite ausblenden kann.
Ich möchte nun im unteren Bereich eine Tabelle direkt unter ein Textfeld setzen.
HTML: 
  <input type="text" id="myinput"></input>
...

var div1 = document.createElement("div");
unterkante document.getElementById("myInput").style.top;
div1.setAttribute("style","left:85px; top:" + unterkante + "px; z-index:3;position:absolute; width:250px; height:200px;background-color:#0fffff;");
var table1 = document.createElement("table");
div1.appendChild(table1);


Vermutlich ist style.top hier nicht richtig. Ebenfalls probiert habe ich offsetTop, clientTop, pixelsTop, screenY, position.top und screenTop. Wenn ich mir diese Werte mit alert ausgebe erhalte ich entweder 0, nichts oder Fehlermeldungen. Die Tabelle im Div-Element soll andere Elemente überdecken. Wenn ich einen festen Wert für »unterkante« eintrage klappt es, allerdings liegt die Tabelle dann an der falschen Stelle, wenn sich oberhalb etwas ändert.

Im voraus vielen Dank für Eure Tipps.

Gruß,
Rupert
 
Zuletzt bearbeitet von einem Moderator:
Warum willst du das <input> eigentlich verdecken? Blende das <input> doch einfach mit display: none aus und platziere die Tabelle im DOM direkt unter dem <input>...
 
kkapsner schrieb:
Warum willst du das <input> eigentlich verdecken? Blende das <input> doch einfach mit display: none aus und platziere die Tabelle im DOM direkt unter dem <input>...
Zum Vergrößern anklicken....

Das <input> möchte ich nicht verdecken. Der Anwender gibt dort seinen Suchbegriff ein, die Tabelle, die direkt unter dem Suchbegriff erscheint, enthält die besten Treffer. Sie soll die Felder unterhalb des <input> überlagern.
 
Ah...

Durch geschicktes HTML und CSS brauchst du dich um die Positionierung im JS gar nicht kümmern:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.heightChange {
	height: 200px;
	border: 1px solid red;
	margin: 2px 0;
}
.heightChange:hover {
	height: 100px;
}
.widthChange {
	display: inline-block;
	height: 20px;
	width: 200px;
	border: 1px solid red;
	margin: 2px 0;
}
.widthChange:hover {
	width: 100px;
}
span.wrapper {
	display: inline-block;
	position: relative;
}
span.wrapper div {
	left: 85px;
	top: 100%;
	z-index: 3;
	position: absolute;
	width: 250px;
	height: 200px;
	background-color: #0FFFFF;
} 
</style>
</head>
<body>
	<div class="heightChange"></div>
	
	<span class="widthChange"></span>
	<span class="wrapper">
		<input>
		<table>
			<tr><td>test</td><td>Tabelle</td></tr>
		</table>
	</span>
</body>
</html>
 
Hatte im CSS einen kleine Fehler:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.heightChange {
	height: 200px;
	border: 1px solid red;
	margin: 2px 0;
}
.heightChange:hover {
	height: 100px;
}
.widthChange {
	display: inline-block;
	height: 20px;
	width: 200px;
	border: 1px solid red;
	margin: 2px 0;
}
.widthChange:hover {
	width: 100px;
}
span.wrapper {
	display: inline-block;
	position: relative;
}
span.wrapper table {
	left: 5px;
	top: 100%;
	z-index: 3;
	position: absolute;
	width: 250px;
	height: 200px;
	background-color: #0FFFFF;
} 
</style>
</head>
<body>
	<div class="heightChange"></div>
	
	<span class="widthChange"></span>
	<span class="wrapper">
		<input>
		<table>
			<tr><td>test</td><td>Tabelle</td></tr>
		</table>
	</span>
	text danach
	<div>
		text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter text darunter 
	</div>
</body>
</html>
 
Super. Jetzt klappt es. Vielen Dank. Deine Lösung ist viel eleganter, als meine Versuche, das per JavaScript zu basteln.

- - - Aktualisiert - - -

Kleiner Nachtrag: Ich wollte den Thread auf gelöst setzen, aber bei Bearbeiten habe ich kein Feld »Präfix«.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben