CODEWITHSUNDEEP
jqueryjquery-mobilescrollcss-position
Fernando Redondo
Fernando Redondo

Reputation: 1555

iScroll with footer and header fixed

If you enter http://gizeto.se/app_yellow/index.html you can see that iScroll scrolls the entire page. You can see the scroller lying over both the header and the footer. The scroller should only scroll the content, not the header and footer included.

I wan't to make this work because I need the fixed footer without using position:fixed - which still doesn't work on for example Android 2.1

I use iScroll 4 and my JS code is inside my data-role="content" div:

            $(document).ready(function() {

                var myScroll = new iScroll('content');
                $(window).bind('resize', function () {
                // I also tried setting a height on the content div, but that didn't work either. Its commented out.
                //$.mobile.activePage.children('[data-role="content"]').height('200px');

                    myScroll.refresh();

                });
            });

My data-role="page" element has the data-iscroll="enable" attribute, and my html code for the scrolling part is:

    <div data-iscroll="scroller" class="scroller">
        <div data-iscroll="scroller">
        <h3>Välkommen</h3>

        <div style="text-align:center;">
        <img src="images/video.png" style="width: 100%; height: 100px;" class="rounded" title="" />
        </div>
        <br />

            Ticker AB är en arkitekturbyrå som arbetar inom ett brett fält av projekt, från stadsplanering till bostäder via kontor och handel. Vår styrka ligger i våra idéer och vår förmåga att hitta nya, ofta oväntade lösningar som stärker platser och ökar fastigheters värde.      <br /><br />
            Vi följer den globala utvecklingen inom hållbar samhällsutveckling och arbetar aktivt för att integrera hållbara lösningar i alla våra projekt.


        </div>
    </div>

Why does iScroll scroll the hole page and not just the content so that my footer can stay totally fixed without the use of position:fixed which isn't supported in all mobile browsers just yet.

Upvotes: 4

Views: 7234

Answers (3)

locomo
locomo

Reputation: 211

maybe try this widget plug-in for a cleaner integration of iScroll and JQuery Mobile:

https://github.com/watusi/jquery-mobile-iscrollview

Upvotes: 1

Steve O
Steve O

Reputation: 5774

Forgive me if this is way too obvious but just because it's not included in your code example I thought I'd ask...have you added an id of "content" to your data-role="content" div? That's obviously what your iscroll container should be, but the content div doesn't have a div id in the jqmobile documentation:

Jquery Getting Started

If you have added that id (which obv. I'm sure you probably have) I'd definitely checkout Phill Pafford's comment above re using pageInit() instead of $(document).ready().

Upvotes: 0

Vinay Revankar
Vinay Revankar

Reputation: 832

As of now the header and footer cant be made fixed in the jquery mobile application like iscroller.The reason behind this is that the Header and footer are placed inside the page div of the jquery mobile appication where as in iscroller app the header and footer are not the part of the page div.However if we try to keep the header and footer outside the page div in the jquery mobile appication, it may cause error such as disabling of the textbox etc.

Upvotes: 0

Related Questions