Menu 3 pixels over on first open

[MonstaApps]

When you first open the menu it is 3 pixels too far to the right (see the screen shot from author's site). When you close it and re-open, it is correctly aligned. This is also happening on my install across Safari/Chrome/Firefox on iOS.

[Friksel]

Same thing happening here... The slidemenu was alright when it did't have the overlay style, but now it has - no matter if it's a right or left slidebar - the first time the menu is opened it animates too far in and leaves a gap

[Friksel]

Just fixed this It's a little ugly fix maybe, but it's working fine now without the ugly 3px gap right or left of the slidebar!

the solution I found out jqueries css() function was not measuring the width of the slidebar well the first time, at the time it is setting the marginLeft or marginRight amount. So the margins are set to the wrong value and will not be changed before the first transition. The transform is set to the correct amount of pixels just before animation.

So I just set the marginLeft and marginRight values (depending on the side of slidebar) again inside the transform() function to the same amount as the transform-value. Now it's always set to the right value and you don't have the 3px gap anymore.

Just replace the animate() function with this one in your code (using version 0.10.3):

        function animate( object, amount, side ) {

            // Choose selectors depending on animation style.
            var selector;

            if ( object.hasClass( 'sb-style-push' ) ) {
                selector = $site.add( object ).add( $slide ); // Push - Animate site, Slidebar and user elements.
            } else if ( object.hasClass( 'sb-style-overlay' ) ) {
                selector = object; // Overlay - Animate Slidebar only.
            } else {
                selector = $site.add( $slide ); // Reveal - Animate site and user elements.
            }

            // Apply animation
            if ( animation === 'translate' ) {
                if ( amount === '0px' ) {
                    removeAnimation();
                } else {
                    // ----- TO FIX 3PX GAP BUG //
                    switch (side) {
                        case 'left':
                            selector.css( 'marginLeft', '-' + amount );
                            break;
                        case 'right':
                            selector.css( 'marginRight', amount );
                            break;
                    }
                    // ------- END FIX ---
                    selector.css( 'transform', 'translate( ' + amount + ' )' ); // Apply the animation.
                }

            } else if ( animation === 'side' ) {
                if ( amount === '0px' ) {
                    removeAnimation();
                } else {
                    if ( amount[0] === '-' ) amount = amount.substr( 1 ); // Remove the '-' from the passed amount for side animations.
                    selector.css( side, '0px' ); // Add a 0 value so css transition works.
                    setTimeout( function () { // Set a timeout to allow the 0 value to be applied above.
                        selector.css( side, amount ); // Apply the animation.
                    }, 1 );
                }

            } else if ( animation === 'jQuery' ) {
                if ( amount[0] === '-' ) amount = amount.substr( 1 ); // Remove the '-' from the passed amount for jQuery animations.
                var properties = {};
                properties[side] = amount;
                selector.stop().animate( properties, 400 ); // Stop any current jQuery animation before starting another.
            }

            // Remove animation
            function removeAnimation () {
                selector.removeAttr( 'style' );
                css();
            }
        }

modifiction to new release? Could this (or maybe a better) fix be included in the lib? Then everybody can benefit! :) Thanks!

[adchsm]

Hi @MonstaApps, @Friksel,

I've just released version 2 of Slidebars which should solve this problem. Check it out at adchsm.com/slidebars and feel free to reopen the issue if the problem persists.

Thanks,

Adam

[MonstaApps]

Oh dear, the update broke my slider :-(

TypeError: $.slidebars is not a function

[adchsm]

Version 2 is a complete rewrite, it's not compatible with the first and has different markup and controls. You can find usage instructions here, I hope that helps.