Pixel addieren und Element somit neu positionieren schlägt fehl

litterauspirna · 29.10.2010, 14:04

Tach alle miteinander,

ich versuche mal wieder ein wenig meine JS Kenntnisse (die sind nicht sehr hoch) auszuweiten, jedoch komme ich grad nicht weiter, so richtig habe ich auch über Google nichts finden können.

Zum testen geht das ganze hier http://www.lit-web.de/js_test/elem_pos.html da seht ihr einen kleinen Container wo #1 drin steht und unten seht ihr Links wie man den Container nun hin und her positionieren kann (momentan nur hoch und runter möglich). Verschieben kann man es auch, jedoch momentan nur nach unten egal ob man hoch oder runter wählt und es wir auch nicht nur um ein Pixel pro Klick verschoben.

Hier mal die zwei Funktionen.

Code:

function editTop ( elementId ) {
        
        var element = document.getElementById( elementId );
        var top = getPositionX( element );
        
        if ( document.getElementById( 'idTop' ) ) {
            
            top--;
        }
        
        var newPosX = document.getElementById( elementId ).style.top = top;
        
        return newPosX;
    }


function editBottom ( elementId ) {
        
        var element = document.getElementById( elementId );
        var bottom = getPositionX( element );
        
        if ( document.getElementById( 'idBottom' ) ) {
            
            bottom++;
        }
        
        var newPosX = document.getElementById( elementId ).style.top = bottom;
        
        return newPosX;
    }

Und hier nur die zwei Links mit denen man das machen kann.

Code:

<a href="#" id="idTop" onClick="editTop('elem1')">Hoch</a> - 

<a href="#" id="idBottom" onClick="editBottom('elem1')">Runter</a>

Könnt ihr mir da weiter helfen, dass sich wenn ich auf hoch klicke der Container um ein Pixel pro Klick nach oben verschiebt und wenn ich auf unten klicke das der Container sich um ein Pixel pro Klick nach unten verschiebt?

Vielen Dank für eure Hilfe Gruß Litter

eagle275 · 29.10.2010, 14:12

erm .. hoch / runter .. warum holst du dann

getPositionX( element ); ??

das ist passender für Links / Rechts ...

hoch / runter sollte doch eher mit getPositionY(element); zu tun haben .....

sorry hab jetzt erst den Seitenquellcode gesehen .... die Funktionen sind ja selbst geschrieben . aber nicht besonders sinnvoll benannt ....

cycap · 29.10.2010, 14:26

Dein Problem ist das du mit 2 verschiedenen Angaben arbeitest: offsetTop != style.top

litterauspirna · 29.10.2010, 14:44

Zitat:

Zitat von cycap

Dein Problem ist das du mit 2 verschiedenen Angaben arbeitest: offsetTop != style.top

Wie kann ich das offsetTop ind style.top umwandeln?

Hatte das so schon probiert.

Code:

var posX;

posX = document.getElementById( elementId ).style.top;

return posX;

So wurde aber am Ende über ein alert nur was mit undefined ausgegeben. Wie kann ich also über das DOM richtig auf die top Angabe zur Position zugreifen?

Gruß Litter

cycap · 29.10.2010, 14:51

Wieso offsetTop umwandeln? Du kannst doch einfach das auslesen ändern:

Code:

	function getPositionX ( element ) {
		
		var posTop = parseInt(element.style.top.replace(/px/, ''));
		
		return posTop;
	}

litterauspirna · 29.10.2010, 19:27

Ich habe das jetzt so gemacht, aber nun bekomme ich in der Fehlerkonsole gleich beim aktualisieren eine Fehlermeldung.

Code:

Fehler: missing ; before statement
Quelldatei: http://www.lit-web.de/js_test/elem_pos.html
Zeile: 8, Spalte: 19
Quelltext:
  var posTop = (int)element.style.top.replace(/px/, '');

Und wenn ich dann auf Hoch drücke kommt zusätzlich noch diese Meldung.

Code:

Fehler: editTop is not defined
Quelldatei: http://www.lit-web.de/js_test/elem_pos.html
Zeile: 1

Was läuft denn da noch schief? Ich tue mich doch recht schwer JS zu rappeln, ich hoffe mein Buch ist bald da.

Danke für die Hilfe.

Gruß Litter

ChrisB · 29.10.2010, 20:11

Code:

  var posTop = (int)element.style.top.replace(/px/, '');

Diese Art von TypeCast gibt es in JavaScript nicht.

infi · 29.10.2010, 20:30

Guten Abend,

ich habe dein Script (eine Funktion) und ein paar andere Kleinigkeiten mal ein wenig verändert, den rest schaffst du bestimmt allein.

Code:

...
<script type="text/javascript">
function editTop ( elementId ) {
var element = document.getElementById( elementId );
var top = getPositionX( element );
		
	if ( document.getElementById( 'idTop' ) ) {
	top--;
	}
		
element.style.top = top+"px";
}
</script>
</head>
<body>
...
<a href="javascript:editTop('elem1')" id="idTop">Hoch</a>
...

VG
infi

litterauspirna · 29.10.2010, 21:32

Hallo infi,

ich habe das mal so angepasst, nun habe ich das Problem das beim Start des Scriptes die Position nicht erkannt wird und somit der Wert als Start fehlt, dass kann man sehen wenn man auf den Link Position prüfen klickt.

Wenn ich einmal auf den Link Hoch klicke dann springt der Container einen Satz nach oben und erst dann existiert ein Wert aber im - Bereich, wenn ich dann weiter klicke funktioniert es.

Ich weis momentan nicht wirklich weiter.

Gruß Litter

infi · 29.10.2010, 22:04

Zitat:

Zitat von litterauspirna

Hallo infi,
ich habe das mal so angepasst, nun habe ich das Problem das beim Start des Scriptes die Position nicht erkannt wird und somit der Wert als Start fehlt, dass kann man sehen wenn man auf den Link Position prüfen klickt.

Im Anhang mal ein Auszug aus deinem Code, siehst du den Unterschied?

Code:

function getPositionX ( element ) {
		
		var posTop = element.style.top.replace(/px/, '');
		
		return posTop;
	}
	
	function getPositionY ( element ) {
		
		var posLeft = element.offsetLeft;
		
		return posLeft;
	}

Zitat:

Zitat von litterauspirna

Wenn ich einmal auf den Link Hoch klicke dann springt der Container einen Satz nach oben und erst dann existiert ein Wert aber im - Bereich, wenn ich dann weiter klicke funktioniert es.

einfach mal noch folgendes machen

Code:

<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
</style>

Gute Nacht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Regulärer Ausdruck schlägt fehl	HSFighter	PHP Tipps 2010	2	20.08.2010 21:16
Einfache Abfrage schlägt fehl...	GoPeter	Datenbanken	2	16.06.2010 13:19
IE, replaceChild, name-Attribut identisch, Zugriff schlägt fehl	Chriz	JavaScript, Ajax und mehr	3	27.04.2010 16:47
[Erledigt] in_array schlägt fehl obwohl werte um array vorhanden sind	litterauspirna	PHP Tipps 2010	8	13.03.2010 14:57
Instanziierung schlägt bei bestimmten Versionen fehl	biertje	PHP Tipps 2010	6	27.02.2010 16:51
[Erledigt] Eintrag schlägt fehl	Extremefall	PHP Tipps 2009	17	19.12.2009 17:42
[Erledigt] Aktuellen Tag der aktuellen Kalenderwoche ermitteln schlägt fehl	litterauspirna	PHP Tipps 2009	8	08.12.2009 13:46
MySQL Verbindung schlägt fehl, trotz richtigem USER/PW	CyberNibbler	Datenbanken	5	24.09.2009 19:43
[Erledigt] DB-Abfrage -> Ausgabe schlägt fehl	kalli.c0re	PHP Tipps 2009	12	31.07.2009 16:11
Funktionsaufruf schlägt fehl	KönigDerHerzen	PHP-Fortgeschrittene	3	05.06.2009 11:07
ReflectionClass export schlägt fehl bei Zugriff auf Klassenkonstante	tereano	PHP-Fortgeschrittene	4	30.03.2009 13:16
Gier unterdrücken schlägt fehl:(	WAY_KOW	PHP Tipps 2009	5	20.02.2009 17:07
.htaccess login schlägt fehl	sternschnuppe99	Server, Hosting und Workstations	6	07.02.2008 13:37
login schlägt immer fehl	sternschnuppe99	Server, Hosting und Workstations	3	07.02.2008 13:28
element am unteren rand positionieren	AliceD	HTML, Usability und Barrierefreiheit	1	07.09.2005 08:40

29.10.2010, 14:04
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Pixel addieren und Element somit neu positionieren schlägt fehl Tach alle miteinander, ich versuche mal wieder ein wenig meine JS Kenntnisse (die sind nicht sehr hoch) auszuweiten, jedoch komme ich grad nicht weiter, so richtig habe ich auch über Google nichts finden können. Zum testen geht das ganze hier http://www.lit-web.de/js_test/elem_pos.html da seht ihr einen kleinen Container wo #1 drin steht und unten seht ihr Links wie man den Container nun hin und her positionieren kann (momentan nur hoch und runter möglich). Verschieben kann man es auch, jedoch momentan nur nach unten egal ob man hoch oder runter wählt und es wir auch nicht nur um ein Pixel pro Klick verschoben. Hier mal die zwei Funktionen. Code: function editTop ( elementId ) { var element = document.getElementById( elementId ); var top = getPositionX( element ); if ( document.getElementById( 'idTop' ) ) { top--; } var newPosX = document.getElementById( elementId ).style.top = top; return newPosX; } function editBottom ( elementId ) { var element = document.getElementById( elementId ); var bottom = getPositionX( element ); if ( document.getElementById( 'idBottom' ) ) { bottom++; } var newPosX = document.getElementById( elementId ).style.top = bottom; return newPosX; } Und hier nur die zwei Links mit denen man das machen kann. Code: <a href="#" id="idTop" onClick="editTop('elem1')">Hoch</a> - <a href="#" id="idBottom" onClick="editBottom('elem1')">Runter</a> Könnt ihr mir da weiter helfen, dass sich wenn ich auf hoch klicke der Container um ein Pixel pro Klick nach oben verschiebt und wenn ich auf unten klicke das der Container sich um ein Pixel pro Klick nach unten verschiebt? Vielen Dank für eure Hilfe Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.10.2010, 14:12
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	erm .. hoch / runter .. warum holst du dann getPositionX( element ); ?? das ist passender für Links / Rechts ... hoch / runter sollte doch eher mit getPositionY(element); zu tun haben ..... sorry hab jetzt erst den Seitenquellcode gesehen .... die Funktionen sind ja selbst geschrieben . aber nicht besonders sinnvoll benannt .... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste Geändert von eagle275 (29.10.2010 um 14:30 Uhr).

29.10.2010, 14:26
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Dein Problem ist das du mit 2 verschiedenen Angaben arbeitest: offsetTop != style.top

29.10.2010, 14:51
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Wieso offsetTop umwandeln? Du kannst doch einfach das auslesen ändern: Code: function getPositionX ( element ) { var posTop = parseInt(element.style.top.replace(/px/, '')); return posTop; } Geändert von cycap (29.10.2010 um 14:55 Uhr).

29.10.2010, 19:27
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ich habe das jetzt so gemacht, aber nun bekomme ich in der Fehlerkonsole gleich beim aktualisieren eine Fehlermeldung. Code: Fehler: missing ; before statement Quelldatei: http://www.lit-web.de/js_test/elem_pos.html Zeile: 8, Spalte: 19 Quelltext: var posTop = (int)element.style.top.replace(/px/, ''); Und wenn ich dann auf Hoch drücke kommt zusätzlich noch diese Meldung. Code: Fehler: editTop is not defined Quelldatei: http://www.lit-web.de/js_test/elem_pos.html Zeile: 1 Was läuft denn da noch schief? Ich tue mich doch recht schwer JS zu rappeln, ich hoffe mein Buch ist bald da. Danke für die Hilfe. Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

29.10.2010, 20:11
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Code: var posTop = (int)element.style.top.replace(/px/, ''); Diese Art von TypeCast gibt es in JavaScript nicht. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

29.10.2010, 21:32
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Hallo infi, ich habe das mal so angepasst, nun habe ich das Problem das beim Start des Scriptes die Position nicht erkannt wird und somit der Wert als Start fehlt, dass kann man sehen wenn man auf den Link Position prüfen klickt. Wenn ich einmal auf den Link Hoch klicke dann springt der Container einen Satz nach oben und erst dann existiert ein Wert aber im - Bereich, wenn ich dann weiter klicke funktioniert es. Ich weis momentan nicht wirklich weiter. Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de