Having trouble shrinking width or a div once a button is clicked

I've tried several methods but I'm having trouble grabbing the concept of how using either the loop or set Interval to reduce a number while setting the smaller number to the width of a div,

I think every time it loops it checks the width again and sets the same number basically resetting it the default variable, so to sum up what im trying to achieve is once a button is clicked a specified object (div) width will shrink to 20px when currently it is 150px +,

here is my fiddle im playing with.
https://jsfiddle.net/kxczejpe/
easyrider439Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sjef BosmanGroupware ConsultantCommented:
Basically, you don't need the while-loop (that's where the interval comes in), and you have to decrement origionalWidth.

function shrink() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequesstAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var element = document.getElementById("item1");
    var origionalWidth = element.clientWidth;
    var init = new Date().getTime();
    var timer = setInterval(function () {
        debugger;
        if (origionalWidth > 20) {
            origionalWidth--;
            element.style.width = origionalWidth + 'px';
        } else {
            alert("no go");
            element.style.width = origionalWidth + 'px';
            clearInterval(timer);
        }
    }, 100);
}

Open in new window

easyrider439Author Commented:
Thanks mr bossman, it works in my fiddle great, what I did figure out is, using this method will not work while using flex as display and with flex-grow to the child objects.
easyrider439Author Commented:
Thanks for your time also!
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Sjef BosmanGroupware ConsultantCommented:
Ah, flex... I have yet to use it for the first time, but I think you could dynamically change the flex-grow value, and reduce it the same way you reduced the div width. Try it, and post a new fiddle!
easyrider439Author Commented:
so i was doing some research just now and you cant animate with flex-box but you can transition to a different spacing with flex-shrink or flex-grow but you cant specify a specific width desired

I got my info here:
https://dev.opera.com/articles/animating-flexboxes-the-lowdown/

good read, flex is a excellent tool very handy, so to accomplish what i wanted using java script I changed the display to inline block to all objects and animation succeeded. here is the updated fiddle
https://jsfiddle.net/kxczejpe/5/

Thanks again
Sjef BosmanGroupware ConsultantCommented:
Fiddle this please:

<div id="container">
    <div id="item1" style="flex-grow: 74">hello</div>
    <div id="item2">jack</div>
</div>
<button onclick="shrink();">Shrink</button>

#container {
    height: 350px;
    width: 165px;
    border: 1px solid black;
    display: flex;
}
#item1 {
    height: 100%;
    border: 1px solid red;
    flex-grow: 75;
    margin: 1px;
}
#item2 {
    height: 100%;
    border: 1px solid green;
    flex-grow: 75;
    margin: 1px;
}

function shrink() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequesstAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var element = document.getElementById("item1");
    var fg = element.style.flexGrow;
    alert("fg: " + fg);
    var init = new Date().getTime();
    var timer = setInterval(function () {
        if (fg > 25) {
            fg--;
            element.style.flexGrow= fg;
        } else {
            alert("no go");
            element.style.width = fg;
            clearInterval(timer);
        }
    }, 100);
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.