Update slidebars.js - sb-style-overlay init error

[afilho]

PROBLEM: When page load, the Slidebars with "sb-style-overlay" class take a right margin when "sb-right" and a left margin when "sb-left". After open one first time, the error dead and the slidebars are correted.

SOLUTION: Apply the margin-[right/left] in the "transform: translate([value])" value.

TEST: Only in Chrome 37.0.2n m

Thanks for the plugin! :D

[adchsm]

Hi there,

Thanks for contributing, but I'm not sure what the problem is in the first place? Could you explain it further?

Thanks, Adam

[mnakalay]

Hello, I think I know what he's talking about as I noticed the same issue on my website.
Check kalmoya.com you can see a left slidebar by clicking on Add-ons and a right slidebar by clicking on About in the menu.
You will notice that the first time you open a slidebar, there is an extra left margin for the left slidebar and right margin for the right slidebar.
If you close the slidebar and open it again, the extra margin disappears and everything is fine.

[adchsm]

What version of Slidebars are you using? There was an issue pre 0.10 that with offset margins.

[mnakalay]

I am using 0.10

[adchsm]

Your not using the proper css file, it looks like you've shredded it apart, there are huge parts of it missing. I can't support you on this one.

[afilho]

Adam, I'm using 0.10.1 css file. If this issue has been correted, please disconsider this one.

@mnakalay, if you have the same problem and use an old version like me, download and use the new version code or make my adjustment in your slidebars.js file and it will works fine.

Thanks.

[adchsm]

I'm still interested in this if it is a problem, but I can't replicate it. I'm using overlay styles on the Slidebars website (the right one), but it works fine. Do you have a demo site where this error occurs?

[mnakalay]

I only modified the css as far as your instructions allow. I do however use a grunt task that moves things around to gather media queries together but I am pretty certain that other than that all your css is there.

I do however see that on your site it is working so I'll look in my css and see what's happening.

Once again the strange thing is not so much the extra margin, it's that it only appears on first click and not after that.

[afilho]

Adam, your own website has the issue. But in your site the issue is almost imperceptible. Depends the each project's css and the page size, this issue can be more perceptible.

I take a print from your own website, the issue is marked in image below.

Send me a message at easy if you can't understand yet.

• at easy (en) = a gusto (es)

[adchsm]

Ahh I see, thanks for pointing it out. It doesn;t seem to happen on Firefox/Mac for me.

I'll take a look into your pull request and test it, thanks for the help.

Adam

[afilho]

I'm happy to can help u.

Thanks for the great slide plugin!

[adchsm]

@mnakalay Ahh, I think you may have just updated the js file then and not the CSS. From 0.10 it uses display: none; when the slidebars are closed instead of visibility: hidden;. It also offers an alternative site container class .sb-site-container which your CSS doesn't contain, I wonder if that's causing any issues?

[mnakalay]

Hi again,
I updated to 10.2 and the issue is still there. Here are my observations:
For some reason, the first time you call $left.css('width') or $right.css('width'), it returns the wrong value. In my case it returns a value which is too small.

I have added padding and a border to the slidebar AND It is correctly set to box-sizing: border-box;
But from what I could see, getting rid of both padding and border fix the problem.

Once again, the problem exist only on first opening. After that the value is correct.

[adchsm]

Hi,

Ok thanks for letting me know. I'll be sure to look into this fix when I can.

Adam

[eliascotto]

Hi,
is there any update for the issue?
I don't have an idea for the solution but I saw that the first time the div.sb-style-overlay has
margin-left: -369px;
while from the second time, becomes margin-left: -375px;

Thanks for the great plugin Adam.

[adchsm]

Hi Elias,

I'm afraid not :( I'm not currently working on Slidebars at the moment, i'll continue on it early next year some time.

I have a minor update ready to release but it doesn't target this.

Thanks,

Adam

[eliascotto]

I found a solution:
Remove the css() function call into the initialise() method,

function initialise() {
    if (!settings.disableOver || (typeof settings.disableOver === 'number' && settings.disableOver >= windowWidth)) { // False or larger than window size. 
        init = true; // true enabled Slidebars to open.
        $('html').addClass('sb-init'); // Add helper class.
        if (settings.hideControlClasses) $controls.removeClass('sb-hide'); // Remove class just incase Slidebars was originally disabled.
    } else if (typeof settings.disableOver === 'number' && settings.disableOver < windowWidth) { // Less than window size.
        init = false; // false stop Slidebars from opening.
        $('html').removeClass('sb-init'); // Remove helper class.
        if (settings.hideControlClasses) $controls.addClass('sb-hide'); // Hide controls
        $site.css('minHeight', ''); // Remove minimum height.
        if (leftActive || rightActive) close(); // Close Slidebars if open.
    }
}

and call css() when the slidebar will open

function proceed() {
    if (init && side === 'left' && $left) { // Slidebars is initiated, left is in use and called to open.
        $('html').addClass('sb-active sb-active-left'); // Add active classes.
        $left.addClass('sb-active');
        css();
        animate($left, $left.css('width'), 'left'); // Animation
        setTimeout(function() { leftActive = true; }, 400); // Set active variables.
    } else if (init && side === 'right' && $right) { // Slidebars is initiated, right is in use and called to open.
        $('html').addClass('sb-active sb-active-right'); // Add active classes.
        $right.addClass('sb-active');
        css();
        animate($right, '-' + $right.css('width'), 'right'); // Animation
        setTimeout(function() { rightActive = true; }, 400); // Set active variables.
    }
}

this works for me, but i don't know if it's the correct solution.
Thanks,

Elia

[adchsm]

Sorry for the delay, I'm closing this now as the main file have changed considerably for the new version