3

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>
leonardo_assumpcao
  • 684
  • 7
  • 17
  • 2
    Please post your code to give us a starting point. – Liam Jul 14 '13 at 23:45
  • 1
    Wait so you are using a none standard web scripting language to reimplement the `` tag. *Why?* –  Jul 14 '13 at 23:49
  • Lego, because it is deprecated... and also I would like to learn it in brython. @Liam, I just wanted a simple, working example with explanation. If you want so, I'll update with a simple starting point. – leonardo_assumpcao Jul 15 '13 at 00:10

1 Answers1

5

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

marqueemoon
  • 376
  • 2
  • 5
  • 2
    update for 2014: The recomended now is to use `from browser import timer` instead of `import time`. (The direction of the project is of equivalence to the python stdlib libraries) So brython's `set_interval` and "set_timeout" are both in the `browser.timer` module – jsbueno Dec 02 '14 at 21:59