I have a page that is served up with jQuery mobile. In all of my mobile devices, when I press another link or image or any other javascript enabled element that uses a javascript event (like onclick), the header in my layout disappears. It actually doesn't really disappear though, it just has it's position property changed to not be fixed. when I scroll up to the top of my page, my header image is there and it scrolls with the rest of the page. Then when I click another javascript enabled element on the page, it changes the header back to fixed again.

This behavior goes back and forth with any element I click on the page...really weird.

anyone else seen this? Anyone know how to fix it?

here is my layout:

<div data-role="page" id="page1" data-add-back-btn="false">
            <div data-theme="a" data-role="header" data-position="fixed">
                <div style="text-align:left;padding-top:5px;padding-left:3px;">
                    <img src="/images/mylogo.png" alt="Logo" />
                </div>
            </div>
            <div data-role="content">
                @{Html.RenderAction("Items", "Feedback", new {area=""});}
                @RenderBody()
            </div>

        </div>

TIA

I have a page that is served up with jQuery mobile. In all of my mobile devices, when I press another link or image or any other javascript enabled element that uses a javascript event (like onclick), the header in my layout disappears. It actually doesn't really disappear though, it just has it's position property changed to not be fixed. when I scroll up to the top of my page, my header image is there and it scrolls with the rest of the page. Then when I click another javascript enabled element on the page, it changes the header back to fixed again.

This behavior goes back and forth with any element I click on the page...really weird.

anyone else seen this? Anyone know how to fix it?

here is my layout:

<div data-role="page" id="page1" data-add-back-btn="false">
            <div data-theme="a" data-role="header" data-position="fixed">
                <div style="text-align:left;padding-top:5px;padding-left:3px;">
                    <img src="/images/mylogo.png" alt="Logo" />
                </div>
            </div>
            <div data-role="content">
                @{Html.RenderAction("Items", "Feedback", new {area=""});}
                @RenderBody()
            </div>

        </div>

TIA

• javascript
• jquery-mobile

2 Answers 2

Not sure if this solves your problem, but I had the same problem except that it happened no matter where and what I clicked.

I added data-tap-toggle="false" to the fixed element.

Hope it works for you!

This is amazing. Has helped me in getting this fixed on an application. It was weird that it occurred on binding a class within the list options. When clicking any option in the list, the header and footer became movable and then on another click they became fixed.

Used the attribute data-tap-toggle="false" as suggested by you in the header and the footer and it works like a charm. Thanks.