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

wachsendes div verändert seine position ?

L

Lotus

Mitglied
Hallo, ich habe ein Problem:

Ich habe einen Bereich, wenn ich dort mit der Maus drüberfahre, dann wird ein div sichtbar, im Prinzip eine Art Tooltip.

Hier mal ein Bild (das ganze ist wie ihr sehen könnt in der oberen rechten Ecke)
fehler2.jpg

Wenn das div jetzt wachsen soll, dann wächst es nach oben :/
fehler3.jpg

Es soll aber natürlich nur nach unten hin wachsen/verschieben wie auch immer.
Hier mal der Code des Tooltip-divs:
HTML: 
.tooltip {
    display:none;
    background: #6f7072;
    min-height:163px;
    margin-top:220px; /*hiermit hab ich eigentlich den abstand nach oben gesetzt*/
    margin-left:-70px;
    width:310px;
    font-size:11px;
    color:#fff;
}

Wisst ihr nen rat?
 
Hallo,
für mich sieht es so aus als würde nur die Abgerundete Box über der grauen box ("this is my Div del") fehlen.
Ansonsten liegt es wahrscheinlich eher an dem Div was außen drum ist, bei .tooltip kann ich ohne Weiteres keine Fehler erkennen.
 
Hi, danke für das Beispiel.
Jetzt sehe ich zumindest, dass durch JQuery so weit nach oben geschoben wird, hat bei der Version mit viel Inhalt top:-271px; .
Warum JQuery das so macht weis ich im Moment noch nicht, aber du hast doch schon ein paar Fehler im Code, wie z.B. die fehlende Type Angabe im script-Tag.
 
So, also das Javascript nimmt sich die Höhe deines Tooltip-Divs und richtet es mit dieser Höhe nach oben negativ aus.

Bsp: Höhe des Divs = 200px - Dann macht JQuery top:-202px; (Weis nicht warum die 2 extra Pixel).

Somit ist immer die Unterkannte deines Tooltips auf der gleichen Höhe, wenn mehr inhalt kommt wirds durch JQuery halt weiter nach oben verschoben.
Dass bei geringer Höhe der Tooltip-Container noch zu sehen ist, liegt am margin-top, somit fängt dein Tooltip-Div ca. 200px unter dem Oberen Browserrand an.

Die positionierung für "top:;" sollte also dein script nicht weiter als -165 setzten dürfen, dann würde es klappen.
 
Hm
ich kenne mich leider auch nicht so gut mit JQuery / Javascript aus,
eventuell würde ich das nicht als Tooltip sondern mit animate und einem Slide-Effekt oder so ähnlich machen, wo du dann auch genau die Manipulation des Containers beeinflussen kannst.
Die Klasse Toopltip dient wahrscheinlich auch eher für andere Zwecke.

Eventuell stellst du dein Problem nochmal im Javascript Forum, oder es meldet sich noch jemand der mehr Ahnung auf dem Gebiet hat als ich.
 
Also ich hab jetzt mal ne Variante mit slideToggle (Aussliden und wieder zurück) bei Hover des Äußeren Divs und die Klassen leicht verändert.
Das sähe dann so aus :

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
/* trigger button */
.card_wrapper	{
	margin-left:auto; margin-right:0;
	width:159px;
}
#download_now {
	display:block;
	height:44px;
	border:1px solid #aaaaaa;
	-moz-border-radius:10px;
	-khtml-border-radius:30px;
	width:310px;
}


/* tooltip styling */
 #cartItems	{
	display:none;
	background: #6f7072;
	margin-left:-134px;
	width:310px;
	font-size:11px;
	color:#fff;
}


.tablehead {
	padding-top: 25px;
	padding-left: 30px;
}

h2 {
	display:inline;
	padding-top:20px;
}

.s1 {
width:200px;
}
</style>

<script type="text/javascript">
$(document).ready(function() {

	$(".card_wrapper").hover(function () {
	$("#cartItems").slideToggle("slow");
	});   

});
</script>

</head>
<body>

<div class="card_wrapper">
	<!-- Box oben -->
	<div id="download_now">This is my Div
		<a href="javascript:void(0)" onclick="deleteCart();">del</a>
	</div>

	<!-- tooltip element -->

	<div id="cartItems">
		<div class="info">
			<div class="tablehead">
			<p style="width: 180px; display:inline; ">Artikel</p><p style="width: 64px; display:inline; ">Preis</p>
			</div>
			<table id="cartContent" width="280" border="1">
				<colgroup>
					<col width="200" />
					<col width="60" />

					<col width="20" />
				</colgroup>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
				<tr>
					<td>Der alte König in seinem Exil</td>
					<td><h2>12.99&euro;</h2></td>
					<td>x</td>
				</tr>
			</table>
		</div>
	</div>
</div>

</body>
</html>


ob, und wie dass dann von unten nach oben sliden würde weis ich leider nicht. JQuery hat glaube ich so eine Methode gar nicht,
nur slideUp aber das versteckt Container anstatt sie anzuzeigen denke ich.
 
Ich habs mal ausprobiert, sah auf den ersten Blick ganz gut aus.
Unbenanntes Dokument

Allerdings wenn man jetzt ganz schnell über den Div drüber und runter und drüber und runter.... fährt, dann öffnet sich das tausendmal oder so xD
Der merkt sich das quasi wie oft man darauf geht..
Das ist natürlich nicht unbedingt gewollt..
 
hmm, da weis ich auch nicht, wie man das gescheit lösen könnte.
Eventuell ist es ja sinnvoller, die Card per Klick zu öffnen.

HTML: 
<script type="text/javascript">
$(document).ready(function() {

	$(".card_wrapper").click(function () {
	$("#cartItems").slideToggle("slow");
	});   

});
</script>
 
lieb von dir, aber das wäre dann nicht mehr wirklich intuitiv ^^'
ich werd mal schaun ob ich irgendwie weiter komme.. ich versteh nicht wieso jquery so nen scheiss da macht :/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben