Is it possible to retrieve a CSS element?
I recently found myself in a situation where I needed to add some code to an Adobe Edge project, specifically involving the manipulation of margin-top and margin-left properties. While experimenting with moving an element named "woo", I struggled to call upon these elements within my custom code block. The code snippet provided successfully moves "woo" in different directions, but I'm unsure how to reference the margins when adding conditions like "sym.$("woo").css({"margin-left">0px"}) to the left movement code.
//Move RIGHT
if (e.which == 39) {
sym.$("woo").css({"margin-left":"+=10px"});
}
//Move UP
else if (e.which == 38) {
sym.$("woo").css({"margin-top":"-=10px"});
}
//Move Left
else if (e.which == 37) {
sym.$("woo").css({"margin-left":"-=10px"});
}
//Move DOWN
else if (e.which == 40) {
sym.$("woo").css({"margin-top":"+=10px"});
}
EDIT:
In an attempt to rectify the issue, I modified the Left conditional statement as follows:
else if (e.which == 37 && ($("woo").css("margin-left")>0)) {
While this seemed to partially resolve the problem, now the element refuses to move left altogether! I even tried using "<0" instead in case there was a mistake with the sign, but still no success achieving leftward movement.
ANSWER:
All things considered, I realized that returning values requires a slightly different syntax than initially anticipated. To retrieve the left margin value, rather than setting it with a dash as done previously, I had to use the following method.
sym.$("woo").css('marginLeft')
Subsequently, in order to convert the retrieved value into an integer for comparison, I utilized the following approach.
if(parseInt(sym.$("woo").css('marginTop'))>0)