Schreikramp! Top/Left Werte werden ignoriert!

Dilirias Cortez · 02.04.2009

Hallöchen meine lieben. Brauche mal wieder Hilfe. Schreibe derzeit ein kleines Javascript Webtool für meinen Job in das ich später ein paar Produktinfos einpflegen will damit ich und meine Kollegen eine gute Übersicht über alles haben und Kunden besser beraten können. So schön so gut.

Habe einen Ausschnitt der Datei angehangen. Das ganze muss eigentlich nur im IE laufen. Teste aber auch mit Firefox. In der oberen Leiste der Datei ist ein bzw. später mehrere Button. Sobald ich da drauf klicke ändert der die Klasse und sieht eingedrückt aus und gleichzeitig soll ein Popup kommen. Gut. Das klappt. Sobald der User drauf klickt werden die Position des Buttons ausgelesen und auf das Popup übertragen, sodass es wie ein Dropdown Menü wirkt. Auch das klappt.

Ich setze im Javascript also quasi die ausgelesenen Werte mit den top und left werden des spans gleich. Aber alle Browser ignorieren es.

Hoffe das war auch nur irgendwie brauchbar erklärt. Kurz um. Das zu öffnene Popup soll genau unter die buttons. Ich bin übrigens ne Niete in sauberer JS-Programmierung und der Ordnung von Quelltexten. Schlagt mich also nicht

Firefox gibt mir folgende Meldung:

Warnung: Fehler beim Verarbeiten des Wertes für Eigenschaft 'left'. Deklaration ignoriert.
Quelldatei: file:///C:/Benutzer/xxx/Desktop/index1.html
Zeile: 0

Ich habe echt keinen Plan. Für mich sieht alles richtig aus. Zieht euch bitte mal die Datei im Anhang und guckt mal rein. Brauche das bis morgen und komm nciht weiter

dms · 02.04.2009

Magst Du die betreffenden Zeilen nicht einfach hier posten? Zumindest ich bin recht Ladefaul.

bardiir · 02.04.2009

dms schrieb:
Magst Du die betreffenden Zeilen nicht einfach hier posten? Zumindest ich bin recht Ladefaul.

Dito.. das liegt sonst in 2 Wochen noch auf meinem Desktop rum

Dilirias Cortez · 02.04.2009

Mhhh ... habs extra gepackt damit der ganze CSS und JS-Code drin ist

Habs auf meinen Webspace geladen.

Also. Legt los

Saugkraft · 02.04.2009

Zu spät. Bei mir ist es schon zur Desktopleiche mutiert.. :hehehe:

Code:

<html>
<head>
	<script type="text/javascript">
		function wechsel(x,y) {
			var posx = document.getElementById(x).offsetLeft;
			var posy = document.getElementById(x).offsetTop+document.getElementById(y).offsetHeight;

			if (document.getElementById(y).style.visibility != "visible") {
				document.getElementById(y).style.left = posx;
				document.getElementById(y).style.top = posy;
				document.getElementById(y).style.visibility = "visible";
				document.getElementById(x).className = "navigation_horizontal_button_aktiv";
				
			} else {
				document.getElementById(y).style.visibility = "hidden";
				document.getElementById(x).className = "navigation_horizontal_button_inaktiv";
			}
		}
	</script>
	<style>
		body {
			background-color: #FFFFFF;
			margin: 0px;
			cursor: default;
		}

		span.navigation_horizontal {
			display: block;
			background-color: #D0D0D0;
			border-left-width: 0px;
			border-right-width: 0px;
			border-top-width: 2px;
			border-bottom-width: 2px;
			border-style: outset;
			border-color: #FFFFFF;
			padding: 5px;
			margin: 0px;
		}

		span.navigation_horizontal_button_inaktiv {
			display: inline-block;
			background-color: #D0D0D0;
			border-width: 2px;
			border-style: outset;
			border-color: #FFFFFF;
			font-family: MS Sans Serif;
			font-size: 10px;
			color: #000000;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 3px;
			padding-bottom: 3px;
			margin-left: 0px;
			margin-right: 5px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		span.navigation_horizontal_button_aktiv {
			display: inline-block;
			background-color: #C0C0C0;
			border-width: 2px;
			border-style: inset;
			border-color: #FFFFFF;
			font-family: MS Sans Serif;
			font-size: 10px;
			color: #000000;
			padding-left: 6px;
			padding-right: 4px;
			padding-top: 4px;
			padding-bottom: 2px;
			margin-left: 0px;
			margin-right: 5px;
			margin-top: 0px;
			margin-bottom: 0px;
		}

		div.menu {
			width: 100px;
			background-color: #D0D0D0;
			border-width: 2px;
			border-style: outset;
			border-color: #FFFFFF;
			font-family: MS Sans Serif;
			font-size: 10px;
			color: #000000;
			position: absolute;
			visibility: hidden;
		}

		div.menu_kopf {
			display: block;
			background-color: #000080;
			font-family: MS Sans Serif;
			font-size: 10px;
			font-weight: bold;
			color: #FFFFFF;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 3px;
			padding-bottom: 3px;
		}

		a.menu:link, a.menu:visited, a.menu:active {
			font-family: MS Sans Serif;
			font-size: 10px;
			color: #000000;
			text-decoration: none;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 3px;
			padding-bottom: 3px;
		}

		a.menu:hover {
			background-color: #000080;
			font-family: MS Sans Serif;
			font-size: 10px;
			color: #FFFFFF;
			text-decoration: none;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 3px;
			padding-bottom: 3px;
		}
	</style>
</head>

<body onselectstart="return false;">

<span class="navigation_horizontal">
	<span class="navigation_horizontal_button_inaktiv" onClick="wechsel('button_01','menu_01');" id="button_01">Button</span>
</span>

<div class="menu" id="menu_01">
	<div class="menu_kopf">Test</div>
	<a href="index1.html" class="menu">Blubb</a>
	<a href="index1.html" class="menu">Blubb</a>
	<a href="index1.html" class="menu">Blubb</a>
	<a href="index1.html" class="menu">Blubb</a>
	<a href="index1.html" class="menu">Blubb</a>
</div>

Dilirias Cortez · 02.04.2009

Jaja. Die leichen. Okay. Jetzt liegts aufm Space, einmal hier und als Anhang. GOGOGO

Wie gesagt. Entweder ich bin blind oder es liegt an der Urzeit. Nur irgendwie find ich den Fehler nicht. Wenn ich die posx und posy einfach mal mit Alert ausgebe stimmen die Koordinaten. Also an den ersten beiden Zeilen liegts schonmal nicht bzw. am auslesen der Position. Nur das gleichsetzen will nicht so ganz.

Ach und bevor dir Frage kommt. Ey der Code sieht ja schei*e aus ey und warum sind da immer die gleichen Links. Ich arbeite noch dran

So. Muss nochmal außer Haus. Meld mich nachher nochmal. Danke schonmal für eure Ideen und Hilfen

Saugkraft · 02.04.2009

Und was klappt jetzt genau nicht? In Firefox hab ich keine Fehler in der Fehlerkonsole. Das Popup ist mit der linken Kante am Button ausgerichtet.

bardiir · 02.04.2009

Saugkraft schrieb:
Und was klappt jetzt genau nicht? In Firefox hab ich keine Fehler in der Fehlerkonsole. Das Popup ist mit der linken Kante am Button ausgerichtet.

Vermutlich ein IE-only Problem :hehehe:

Kann ich aber jetzt aus Ermangelung von IE auch ned testen... :kopfkratz:

Dilirias Cortez · 02.04.2009

Was? Mhhh ... Also in der Fehlerkonsole seh ich jetzt auch nichts mehr. Allerdings sieht es bei mir wie folgt aus.

http://www.dark-echoes.de/screenshot.jpg

Ja ne. Ich bekomm das Problem primär im Firefox. Der IE bekommt wenigstens den Left-Abstand noch hin. Aber der Abstand von oben klappt nicht. Einfach verrückt. Hab hier auf der Dose leider nur den IE7 :/

Ach und ... ja der IE ist Dreck

Edit. Nun aber wech. Werd hin und wieder mit dem iPhone reingucken und Posten. Danke schonmal.

bardiir · 02.04.2009

Dilirius Cortez schrieb:
Was? Mhhh ... Also in der Fehlerkonsole seh ich jetzt auch nichts mehr. Allerdings sieht es bei mir wie folgt aus.

http://www.dark-echoes.de/screenshot.jpg

Ja ne. Ich bekomm das Problem primär im Firefox. Der IE bekommt wenigstens den Left-Abstand noch hin. Aber der Abstand von oben klappt nicht. Einfach verrückt. Hab hier auf der Dose leider nur den IE7 :/

Ach und ... ja der IE ist Dreck

Jo so sieht das bei mir auch aus... :kopfkratz:

Wenn das unter den Button soll ist dashier falsch:
document.getElementById

.offsetHeight;

das muss dann
document.getElementById(x).offsetHeight;

heissen in der Höhenberechnung.
y is in deinem Fall ja das Popup, das Popup wird also AbstandRand des Buttons x + Höhe des Popups y von oben Abstand halten...

Dilirias Cortez · 02.04.2009

Autsch. Logisch. Waren wohl beide Faktoren. Spät und Blind. Danke. Jetzt gehts

Ich liebe diese Comunity

Saugkraft · 02.04.2009

Bei mir sieht das auch so aus. Aber jetzt kapier ich das. Das Popup soll direkt am/auf dem Button angenagelt sein?

Dann nimm mal offsetParent statt offsetTop. offsetTop berechnet relativ zum Elternelement.

Da du zwei Spans ineinander verschachtelst, vermute ich, dass das Padding draufgeschlagen wird. Oder irgendsowas. Keinen Schimmer. Ich bin auch nicht der Javascript Profi, hab aber dunkel in Erinnerung, dass offsetParent unkomplizierter ist.

Saugkraft · 02.04.2009

Ist ja mal geil.

Mit offsetParent sieht es so aus.. Und wie mir scheint, wird der Fehler damit auch nur umgangen.

Dilirias Cortez · 02.04.2009

Werds nachher auch mal testen. Bin auch kein JS-Meister. Guck mir Parent nachher mal an

Danke

Dilirias Cortez · 03.04.2009

So. Das mit Parent bekomm ich zwar nicht (bin halt ne hohle Nuss

), aber letztendlich würde sich das Parent wie auf deinem Bild auf die weite Leiste beziehen. Wollte es direkt unter dem Button. Da das ganze aber eh nur intern auf ein paar PCs verwendet wird ist es Bockwurst. Hauptsache der IE zeigt den Kram so an wie er es soll

Danke nochmal

Schreikramp! Top/Left Werte werden ignoriert!

Dilirias Cortez

unregistriert

dms

bardiir

Aktives Mitglied

Dilirias Cortez

unregistriert

Saugkraft

Aktives Mitglied

Dilirias Cortez

unregistriert

Saugkraft

Aktives Mitglied

bardiir

Aktives Mitglied

Dilirias Cortez

unregistriert

Anhänge

bardiir

Aktives Mitglied

Dilirias Cortez

unregistriert

Saugkraft

Aktives Mitglied

Saugkraft

Aktives Mitglied

Anhänge

Dilirias Cortez

unregistriert

Dilirias Cortez

unregistriert