Good night. This is a question about Brython and any help will be welcome.
I'm looking for a way of moving elements (for example, a div) some pixels to the left (or to the right, top etc.) every time interval (perhaps 200 milliseconds). Can anyone help me?
And it would be great to delete the element once he arrived on the left margin. (:
[update] Here's a starting point. I won't polute it with wrong brython code, follow your creativity ;)
<html><head>
<style>
* { margin: 0; padding: 0; outline: 0; border: 0; }
.block {
display: inline-block;
margin: 1em;
padding: 1em;
background: steelblue;
color: white;
font: 14pt/1.2 georgia,cambria;
border-radius: .2em;
}
</style></head><body>
<div class="block">
Test
</div>
</body></html>
Here is how you can do it :
<html>
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; outline: 0; border: 0; }
.block {
display: inline-block;
/*margin: 1em;*/
padding: 1em;
background: steelblue;
color: white;
font: 14pt/1.2 georgia,cambria;
border-radius: .2em;
}
</style>
<script src="/src/brython.js"></script>
<script type="text/python">
import time
elt = doc["moving"]
def move():
elt.style.left = "%spx" %(elt.left+10)
if(elt.left > 500):
time.clear_interval(timer)
del doc["moving"]
timer = time.set_interval(move,200)
</script>
</head>
<body onload="brython(1)">
<div class="block" id="moving" style="position:absolute;top:10;left:20;">
Test
</div>
</body>
</html>
Pretty straightforward, eh ? A few comments :
the DIV element must be set with position = absolute
in the Brython program, you get a reference to the object by doc[object_id]
(doc is a built-in name for the document). To delete the object : del doc[object_id]
this object has an attribute left : an integer measuring the distance to the document left border
set_interval and clear_interval are methods added to the built-in module time, they have the same syntax as their Javascript equivalents