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?
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

0
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.
0
easyrider439Author Commented:
Thanks for your time also!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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!
0
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
0
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

0

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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.