# About modifying each item's element

**URL:** <https://forums.fusetools.com/t/about-modifying-each-items-element/3317>\
**Category:** How-to Discussions\
**Created:** [July 17, 2015, 8:58am UTC](https://forums.fusetools.com/t/about-modifying-each-items-element/3317 "2015-07-17T08:58:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mao](https://avatars.discourse-cdn.com/v4/letter/m/eb9ed0/32.png) [@Mao](https://forums.fusetools.com/u/Mao)\
**Post date:** [July 17, 2015, 8:58am UTC](https://forums.fusetools.com/t/about-modifying-each-items-element/3317/1 "2015-07-17T08:58:32Z")

</div>

There is a panel showing a list of image.

Outside:

```auto
<StackPanel>
    <Each Items="{image_list}">
        <DisplayImage />
    </Each>
</StackPanel>

```

Inside:

```auto
<DockPanel ux:Name="DisplayImage" >
    <Clicked Handler="{resizing}"/>
    <Image ux:Name="{test_img}" Url="{url}" StretchMode="UniformToFill" />
</DockPanel>

```

js:

```auto
var test_img = Observable();

function resizing(args)
{
    Question:
    I am able to modify the args.data here.
    But how can I modify the specific test_img's height and width here according to the args?
}

module.exports = {
    test_img : test_img
};

```

Thanks!

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 17, 2015, 10:16am UTC](https://forums.fusetools.com/t/about-modifying-each-items-element/3317/2 "2015-07-17T10:16:11Z")

</div>

Hi!

For the most part, we reccommend animation of visual parameters is done in UX markup using triggers and animators, e.g.

```auto
<Image ux:Name="img">
    <Clicked>
        <Set img.Width="100" />
    </Clicked>
</Image>

```

This is much faster than going throught he async javascript thread.

If you want to change visual parameters from JS, you have to data-bind `Width` and `Height` to your data source, e.g.

```auto
function TestImage()
{
   this.width = Observable(100);
   this.height = Observable(100);
}

var images = Observable(
    new TestImage(),
    new TestImage());

module.exports = {
    images: images
};

```

And in UX:

```auto
<Each Items="{images}">
    <Image Width="{width}" Height="{height}" />
</Each>

```

---

<div class="post-metadata">

**Author:** ![Mao](https://avatars.discourse-cdn.com/v4/letter/m/eb9ed0/32.png) [@Mao](https://forums.fusetools.com/u/Mao)\
**Post date:** [July 20, 2015, 6:51am UTC](https://forums.fusetools.com/t/about-modifying-each-items-element/3317/3 "2015-07-20T06:51:49Z")

</div>

hi thank you!

If I want to do calculation to resize in ux, is it possible?

something like that but I failed

```auto
<Image ux:Name="img">
  <Clicked>
        <Set img.Width="img.Height*0.5" />
  </Clicked>
</Image>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 20, 2015, 8:06pm UTC](https://forums.fusetools.com/t/about-modifying-each-items-element/3317/4 "2015-07-20T20:06:01Z")

</div>

Hi,

Nope, for now this is not possible in UX, but you can do

```auto
this.width = this.height*0.5

```

In JS if you data-bind the sizes.