Disable x and y coordinate scrolling of content about sidr HOT 10 CLOSED

is there any fix for this? Having exactly the same issue ;(

from sidr.

Hi Joe,

I never got a resolution to this problem. If you are not dead-set on Sidr,
you may want to consider JPanelMenu. It is not 100% perfect but it is
pretty close. I've successfully used it across all my sites.

Cheers.

On Tue, Jun 11, 2013 at 3:30 AM, Joe Vain [email protected] wrote:

is there any fix for this? Having exactly the same issue ;(

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/15#issuecomment-19251088
.

from sidr.

Okay I think this worked for android. And I can't test in iOS right now.

I added a div wrapper and I have a fixed header...

<div class ="maincontent">
<div id="header">content... </div>
<div>

on line 105 of the sidr.js change to position: 'fixed' (// Open menu)

then when calling the sidr function I animate both items:

$(function(){
$('#menu-button').sidr({
name: 'sidr-main',
source: '#navigation',
body: '#header, .maincontent'
});
});

And this fixed two issued I have been trying to solve the fixed header and the scrolling content...

from sidr.

@schmelik, thanks a ton for this solution. I've been looking all over for a fix to this, and that seemed to do the trick (at least in android). This should be fixed in sidr! I think it is fairly common that you would want the sidr list to be scrollable but to not scroll the rest of the site along with it.

from sidr.

actually, this doesn't fix the problem for android, fixes it for mozilla on my desktop though..

from sidr.

In the 1.2.1 version you can fix it with the 'onOpen' option:

        onOpen: function() {
            $body.css({
                'height': $window.height(),
                'overflow': 'hidden'
            });
        },

from sidr.

Fixed this issue by incorporating an onOpen and onClose function which basically toggles the html/body css to include overflow: hidden and overflow: auto respectively.

Here is my code if that helps anyone:

$('#left-menu').sidr({
name: 'sidr-left',
side: 'left',
onOpen: function(name) {
$('.navbar-fixed-top').animate({
left: 253
},200);
$('.mobile-hide').fadeOut(200);
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
})
},
onClose: function(name) {
$('.navbar-fixed-top').animate({
left: 0
}, 1);
$('.mobile-hide').delay(200).fadeIn(200);
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
})
}
});
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right'
});

from sidr.

Thanks @bencoullie . Just what I was looking for. Nice one!

from sidr.

Thanks, I'll try this for sure :)

from sidr.

For some reason using overflow: hidden and height: 100% on the body caused my sub navigation toggle animations within Sidr to break. The following did the trick for me though:

$('#right-menu').sidr({
name: 'sidr',
side: 'right',
onOpen: function() { $('body').css({ 'position': 'fixed' }); }, // Prevents losing the close button on scroll
onClose: function() { $('body').css({ 'position': 'static' }); } // Restores normal scrolling
});

from sidr.