Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using tritium to move html elements

I'm using the Moovweb SDK to make a mobile version of a website and I need to move an image from one div to another. How can I do this using tritium?

<body>
  <div class="kittens">
    <img src="images/husky.jpg" id="husky">
  </div>

  ...

  <div class="puppies">
    [need to move img here]
  </div>
</body>  
like image 216
Alex De Simone Avatar asked Nov 23 '25 03:11

Alex De Simone


2 Answers

There are a few ways to do this.

The way I find most appealing is to use some XPath axes and the move_here command:

$("./body/div[contains(@class,'puppies')]") {
  move_here("ancestor::body/div[contains(@class,'kittens')]/img[@id='huskey']")
}

This way gets the same effect using fewer characters (but is slower):

$("//div[contains(@class,'puppies')]") {
  move_here("//img[@id='huskey']")
}

The reason I like doing it the first way is that, generally, the img you're looking for will not be so close to the body. Instead of doing the ancestor::body you could do //img[@id=''huskey] but this will likely be much slower. The other benefit to using ancestor is that it shows the connection between the two elements.

like image 158
Ben Thefbfairy Bayard Avatar answered Nov 26 '25 23:11

Ben Thefbfairy Bayard


You can either use move_to or move_here.

With move_to, it would look like this:

$("./div[contains(@class, 'kittens')]") {
  move_to("../div[contains(@class, 'puppies')]")
}

Test it live: http://play.tritium.io/311b7aad88ac174899dc4c2f7ebc7407db1ea08d

like image 32
fegemo Avatar answered Nov 26 '25 22:11

fegemo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!