JavaScript Resize w/ CSS3 Issue

Question

I'm writing a Firefox extension, and one of the features is to be able to add an extra "row' of icons in the interface. I'm doing this using a combination of CSS and JavaScript, but I'm getting a weird issue if I click too quickly on the "expand" or "contract" button, where it's adding a random amount of pixels to the height. I think it's because it's getting the height from the css, and while it's transitioning, it has a "growing" height, so it does the JS equation with the wrong height.

CSS:

#wrapper {
    background: rgba(0,0,0,.85);
    box-shadow: 0px 0px 5px #000;
    color: #fff;
    height: 100px;
    width: 250px;
            -moz-transition: height 1s;
}

JavaScript:

function expand() {
            var orig = document.getElementById("wrapper").clientHeight;
            if (orig < 300) {
                var changed = orig + 100;
                document.getElementById("wrapper").style.height=changed;
                // debug
                document.getElementById("print").innerHTML="height: " + changed + "px";
                // end debug
            } else {
                // do nothing
            }
        }
        function contract() {
            var orig = document.getElementById("wrapper").clientHeight;
            if (orig > 100) {
                var changed = orig - 100;
                document.getElementById("wrapper").style.height=changed;
                // debug
                document.getElementById("print").innerHTML="height: " + changed + "px";
                // end debug
            } else {
                // do nothing
            }
        }

HTML:

<div id="wrapper">
    <a onclick="expand()">Exand Div</a> - <a onclick="contract()">Contract Div</a><br />
    <span id="print">height: 100px</span>
</div>

What version of Firefox does one have to be using for this to work? I don't see any problem... or any 'transition' either. — Richard JP Le Guen
– Richard JP Le Guen, Commented Apr 14, 2011 at 1:59

codelahoma · Accepted Answer · 2011-04-14 02:10:42Z

1

The transitionend event could be the solution here.

Just disable your onclick handlers once clicked, then re-enable when the transitionend fires.

answered Apr 14, 2011 at 2:10

codelahoma

9048 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JacobTheDev Over a year ago

Mind giving me a code snippet to look at? I'm pretty new at JS ^^;

Collectives™ on Stack Overflow

JavaScript Resize w/ CSS3 Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related