# Dynamicly resizing and "fixed" positions

**URL:** <https://forum.kirupa.com/t/dynamicly-resizing-and-fixed-positions/255086>\
**Category:** Uncategorized\
**Created:** [March 18, 2008, 10:09pm UTC](https://forum.kirupa.com/t/dynamicly-resizing-and-fixed-positions/255086 "2008-03-18T22:09:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vintage](https://avatars.discourse-cdn.com/v4/letter/v/e68b1a/32.png) [@vintage](https://forum.kirupa.com/u/vintage)\
**Post date:** [March 18, 2008, 10:09pm UTC](https://forum.kirupa.com/t/dynamicly-resizing-and-fixed-positions/255086/1 "2008-03-18T22:09:40Z")

</div>

Hello reader, Im stuck on a piece of math.  
What Im trying to achieve, is some kind of menu with rollovers, where each button resizes on hover.  
The active button should grow, while the others shrink and change x position…

This is what I made so far: (just copy/paste to see it working)

```auto
var windowWidht:Number;
var windowMaxWidht:Number = 400;
var windowMinWidht:Number = 15;
var windowHeight:Number = 300;
var growSpeed:int = 3;
var activeWindow:String = "";
var amount:int = 4;
var actief:String;
var actiefGo:Boolean;

for (var i:Number = 0; i<amount; i++)
{
    windowWidht = stage.stageWidth/amount;
    var raam:MovieClip = new MovieClip();
    raam.graphics.lineStyle(1, 0);
    raam.graphics.beginFill(0xCCFF00);
    raam.graphics.drawRect(0, 0, windowWidht, windowHeight - (i * 20));
    raam.width = windowWidht;
    raam.x = i * windowWidht;
    raam.name = "raam"+i;
    addChild(raam);
}

addListeners();

function addListeners():void
{
    for (var i:int = 0; i < amount; i++)
    {
        getChildByName("raam" + i).addEventListener(Event.ENTER_FRAME, onEnter);
        getChildByName("raam" + i).addEventListener(MouseEvent.ROLL_OVER, putActive);
        getChildByName("raam" + i).addEventListener(MouseEvent.ROLL_OUT, putActive);
        getChildByName("raam" + i).addEventListener(MouseEvent.CLICK, putActive);
    }
}

function putActive(event:MouseEvent):void
{
    if (event.type == "rollOver")
    {
        activeWindow = event.target.name;
    }
    if (event.type == "rollOut")
    {
        activeWindow = "";
    }
}

function onEnter(e:Event):void
{
    for (var s:int = 0; s<amount; s++)
    {
        if (s != 0)
        {
            getChildByName("raam"+s).x = getChildByName("raam"+(s-1)).x + getChildByName("raam"+(s-1)).width;
        }
    }

    if (activeWindow != "")
    {
        var identifier:String = getChildByName(activeWindow).name.substr(4);

        for (var i:int = 0; i < amount; i++)
        {
            if (Number(identifier) != i && getChildByName("raam"+i).width >= windowMinWidht)
            {
                getChildByName("raam"+i).width -= growSpeed;
            }
            else
            {
                if (getChildByName(activeWindow).width < windowMaxWidht && Number(identifier) == i)
                {
                    getChildByName(activeWindow).width += growSpeed;
                }
            }
        }

    }
    else
    {
        for (var a:int = 0; a < amount; a++)
        {
            if (getChildByName("raam"+a).width < windowWidht)
            {
                getChildByName("raam"+a).width += growSpeed;
            }
            if (getChildByName("raam"+a).width > windowWidht)
            {
                getChildByName("raam"+a).width -= growSpeed;
            }
        }
    }
}

```

The thing is…I want the last “button” always stick on the right side of the stage, and everything in between should scale/reposition, depending on the width/position form the other buttons.

Inventually this code should serve as a mask for content “in” each button.

I hope any of you readers can help me out, or know a script that does simular.

Thx in advance  
Sidenote, the script dont have to be actionscript3, as2 will do fine too 🙂