CODEWITHSUNDEEP
javascripthtmlcssjquery-mobilejquery-events
A.S.
A.S.

Reputation: 4574

jQuery mobile disable vertical scroll after transition

I have a Problem concerning scrolling in jQuery mobile. I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:

#navbar |  #header (with Button #showNavBar)
        |  #content
        |
        |  #footer

At first the #navbar is behind behind my content area (with header and footer). By clicking the Button #showNavBar I am doing the following:

 header.animate({
           left: "200px"                  
        }, { duration: 300, queue: false });
 content.animate({
           left: "200px"
        }, { duration: 300, queue: false });

So the users can see the navbar on the left side. To this point everything works well. But trouble starts. Now it is possible to scroll to the right side to see the full content area. But it isn't possible to scroll the header...

Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.

Upvotes: 1

Views: 542

Answers (2)

A.S.
A.S.

Reputation: 4574

Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.

Here is how I do it right now. The body gets a new width in the animation.

var viewport = {
    width  : $(window).width(),
    height : $(window).height()
};

function openme() { 
    $(function () {
        topbar.animate({
           left: "200px"                  
        }, { duration: 300, queue: false });
        pagebody.animate({
           left: "200px", width: (parseInt(viewport['width']) - 200) + "px", 
        }, { duration: 300, queue: false });

      console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
    });
}



function closeme() {
    var closeme = $(function() {
        topbar.animate({
            left: "0px"
        }, { duration: 180, queue: false });
        pagebody.animate({
            left: "0px", width: "100%",
        }, { duration: 180, queue: false });

        console.log("close me");
    });
}

Hope this helps anybody. Thanks to Rachel for beeing so patient and giving me a help!

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28553

try

 $(document).delegate('.ui-content', 'touchmove', false);​

Upvotes: 2

Related Questions