jQuery. bei klick um x px nach links/ rechts bewegen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
addieren
after
aufrufen
auslese
beispielsweise folgendes schreiben
break
code
eigenschaft
einlesen
element
greifen
jemand
mechanismus
nachricht
not
position
semikolon
url
zahlenwert
zeile
-
hey Leute.
Bin grade an einem neuen Projekt. bei diesem wollte ich einfah ein paar neue sachen einfließen lassen sowie meine jQuery-kentnisse verbessern.
Nun die frage. ich habe eine ansatz für ein Script. mit desem möchte ich erreichen, dass jedes mal wenn man auf einen pfeil (a.left / a.right) klickt der umschließende div (#infobox) um 200px in die jeweilige richtung verschoben wird.
Nun tritt aber das Problem auf, dass ich nicht den wert nachhaltig verändern kann. also dass ich nur zwischen -200px und 200px wandern kann, und nicht den wert hochaddieren kann -_-
hier das bisherige Script:
<script type="text/javascript"> $(document).ready(function(){ $("#infobox a.slideloop").hover(function(){ $("#infobox #buttonleft").fadeIn(); $("#infobox #buttonright").fadeIn(); }); $("#infobox #buttonleft a.left").click(function(){ $("#sub-link-bar").animate({ margin-left: "-200px" }); }); $("#infobox #buttonright a.right").click(function(){ $("#sub-link-bar").animate({ margin-left: "200px" }); }); }); </script>
ich würde mich sehr über eure Hilfe und Tipps freuen
Gruß
Daniel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du kannst den Margin Wert doch lesen oder? dann mit parseInt lesen und den gelesen Wert mit dem zusätzlichen addieren und neu zuweisen.
-
evil-devil schrieb:
Du kannst den Margin Wert doch lesen oder? dann mit parseInt lesen und den gelesen Wert mit dem zusätzlichen addieren und neu zuweisen.
leide kann ich nicht auslesen -_- könntest du einen beispelcoe zeigen? kennt jemand zufällig ein tutorial was diese themen behandelt?
Gruß
Daniel -
Na mit $("#sub-link-bar") greifst du auf das Element zu. und dann ganz normal mit styles.marginLeft erhälst du den Wert. Ich bin nur gerade nicht sicher ob da lediglich der Zahlenwert oder auch das "px" drin steht. Sofern nur der Zahlenwert drin steht, dann kannst du es einfach mit parseInt($("#sub-link-bar").styles.marginLeft) einlesen in eine beliebige Variable. Abschließend zu der Variable die 200 hinzuaddieren und dem ELement wie auch jetzt schon zuweisen.
-
goldeneye schrieb:
evil-devil schrieb:
Du kannst den Margin Wert doch lesen oder? dann mit parseInt lesen und den gelesen Wert mit dem zusätzlichen addieren und neu zuweisen.
leide kann ich nicht auslesen -_-
doch klar, mit $("element").css("eigenschaft") lassen sich die Eigenschaften auslesen. Oder du verwendest direkt position (empfehlenswert, wenn die Eigenschaft left und top nicht gesetzt wurden, da das dann dennoch die Position zurück gibt). -
evil-devil schrieb: Na mit $("#sub-link-bar") greifst du auf das Element zu. und dann ganz normal mit styles.marginLeft erhälst du den Wert. Ich bin nur gerade nicht sicher ob da lediglich der Zahlenwert oder auch das "px" drin steht. Sofern nur der Zahlenwert drin steht, dann kannst du es einfach mit parseInt($("#sub-link-bar").styles.marginLeft) einlesen in eine beliebige Variable. Abschließend zu der Variable die 200 hinzuaddieren und dem ELement wie auch jetzt schon zuweisen.
mein noch nicht funktionierender Code:
<script type="text/javascript"> $(document).ready(function(){ var width = parseInt($("#sub-link-bar").styles.marginLeft) $("#infobox a.slideloop").hover(function(){ $("#infobox #buttonleft").fadeIn(); $("#infobox #buttonright").fadeIn(); }); $("#infobox #buttonleft a.left").click(function(){ $("#infobox").animate({ width - 200; }); }); $("#infobox #buttonright a.right").click(function(){ $("#infobox").animate({ width + 200; }); $('#infobx').css("left", (width)+"px"); }); </script>
könnte mir jemand erklären was falsch ist?
gruß
daniel
Beitrag zuletzt geändert: 4.9.2009 17:33:39 von goldeneye -
Lerne bitte lesen!
In deinem Code ziehst du von der Weite 200 ab, aber du weist das Ergebnis nirgends zu.
Du müsstest also beispielsweise folgendes schreiben:
$("#infobox").styles.marginLeft = (width - 200) + 'px';
anstatt wie bisher
width - 200 -
evil-devil schrieb:
Du müsstest also beispielsweise folgendes schreiben:
$("#infobox").styles.marginLeft = (width - 200) + 'px';
anstatt wie bisher
width - 200
habe das jetzt ausgebessert:
<script type="text/javascript"> $(document).ready(function(){ var width = parseInt($("#sub-link-bar").styles.marginLeft) $("#infobox #buttonleft a").click(function(){ $("#infobox").animate({ $("#infobox").styles.marginLeft = (width - 200) + 'px'; }); });
leider funktioniert der Code so immernochnicht. könnte mir jemand sagen was hierbei der Fehler ist?
Gruß
Daniel
-
Wird der Bereich überhaupt erreicht? SOfern du Firebug für Firefox installiert hast oder jquerie debug Möglichkeiten bietet, dann versuch den Bereich zu debuggen. So ins blaue Raten ist schlecht ;)
-
evil-devil schrieb:
Wird der Bereich überhaupt erreicht? SOfern du Firebug für Firefox installiert hast oder jquerie debug Möglichkeiten bietet, dann versuch den Bereich zu debuggen. So ins blaue Raten ist schlecht ;)
ok
das erklär viel, aber ermöglicht keine antwort: jquery verändert nichts wenn der button geklickt wird. es werden noch nicht ml die typischen jquery-dinge angezeigt(wie display: block usw.). genauso funktioniert diese zweite funktion nicht:
<script type="text/javascript"> $(document).ready(function(){ $("#infobox").hover(function(){ $("#infobox #buttonleft").fadeIn(); $("#infobox #buttonright").fadeIn(); }); }); </script>
wodran könnte das liegen? jQuery beziehe ih von:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
somit müsste das auch funktionieren -_-
hat jemand eine idee, was passiert ist, dass jquery nicht mehr funktioniert?
-
evil-devil schrieb:
ich würde jquerie lokal in deiner website aufrufen und nicht extern. Denn von Extern kann es sehr gut passieren das Anti XSS Mechanismen der Browser greifen.
Wird der $(document).ready(function() Berech denn jemals erreicht /aufgerufen?
ok
habe jetzt beides...
trotzdem keine funktion.
vielleicht einfach um sich die sche anzusehen. Hier der link:
http://www.goldeneye.lima-city.de/unzip_latest/wordpress/
hoffe ihr findet etwas
Gruß
Daniel -
Installier dir mal Firebug für den Firefox!
Direkt beim aufrufen deiner verlinkten Seite:
missing : after property id
[Break on this error] $("#infobox").styles.marginLeft = (width - 200) + 'px';\nwordpress (Zeile 416)
$("#s3slider").s3Slider is not a function
anonymous()wordpress (Zeile 26)
anonymous()jquery.js (Zeile 2294)
anonymous()jquery.js (Zeile 2314)
anonymous([function()], function(), Object name=args)jquery.js (Zeile 745)
anonymous()jquery.js (Zeile 2313)
[Break on this error] timeOut: 4000 });\n -
evil-devil schrieb:
Installier dir mal Firebug für den Firefox!
Direkt beim aufrufen deiner verlinkten Seite:
missing : after property id
[Break on this error] $("#infobox").styles.marginLeft = (width - 200) + 'px';\nwordpress (Zeile 416)
$("#s3slider").s3Slider is not a function
anonymous()wordpress (Zeile 26)
anonymous()jquery.js (Zeile 2294)
anonymous()jquery.js (Zeile 2314)
anonymous([function()], function(), Object name=args)jquery.js (Zeile 745)
anonymous()jquery.js (Zeile 2313)
[Break on this error] timeOut: 4000 });\n
habe das problem mit diesem s3slider gelöst. aber die nachricht bei meinem code verstehe ich nicht. was sagt firefox damit? -
Wenn du die die Zeile anschaust, wirst du sehen das am Ende ein Semikolon fehlt. ;)
-
evil-devil schrieb:
Wenn du die die Zeile anschaust, wirst du sehen das am Ende ein Semikolon fehlt. ;)
wieso funktioniert jQuery nicht. bin am verzweifeln.
nun kommt prinzipiell die nachricht:
$.fn.betterTooltip = function(options){ $ is not defined
wtf?
irgendwie sollte es ja wohl möglich sein irgendetwas mit jQuery anzufangen, ohne das es selber fehler produziert -_-
hat jemand eine idee, was der fehler sein könnte?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
