Topic: static iHeader and iFooter

Is there a way to fix the header and footer divs like a native app?
I mean if the central div is big, and we need to scroll it, the header and the footer remains fixed.
This way we can have a toolbar at the footer.

Re: static iHeader and iFooter

This feature is on the way but requires lots of work to make the code as small as possible.

Once it is implemented, no code change will be required, but iFooter will not be a fixed bottom part.

Re: static iHeader and iFooter

Re: static iHeader and iFooter

Yes I do. I'll work on this after the next release (and the documentation wink)

Re: static iHeader and iFooter

Last edited by aresinferno (2009-02-03 21:58:31)

Re: static iHeader and iFooter

Well, scroling stuff was used simply because previously there were no other way to do a smooth effect. Static header is part of the upcoming version and fullscreen feature has been demonstrated using WebApp.Net for awhile now (last october).

I'd like to see your demo but the link you provided return a 404, could you fix this?

thx

Re: static iHeader and iFooter

Re: static iHeader and iFooter

Chrilith, what is the status of the static header?  In my opinion, short of the very slight delay before transitions, having the header scroll with the page is the only thing remaining that prevents apps built with your framework from being distinguishable from truly native apps (especially when they are wrapped in a native app).

Re: static iHeader and iFooter

Re: static iHeader and iFooter

I did  a partial implementation of it monthes ago but far from complete. Anyway, thanks for the link.

Re: static iHeader and iFooter

Re: static iHeader and iFooter

Last edited by dean (2009-09-12 07:01:14)

Re: static iHeader and iFooter

I got this working. Basically I reset the scroll code on the "success" event:

    WA.AddEventListener('success', function() { 
        myScroll.refresh();
        }); 

And removed the limits within the jscroll.js because dynamic page changes sometimes messed with the window height and bounced the user around:

            //this.scrollTo(this.position>0 ? 0 : this.maxScroll);
            //return false;

and

        // If we are outside of the boundaries at the end of the transition go back to the sheepfold
        //if( this.position>0 || this.position<this.maxScroll )
            //this.element.addEventListener('webkitTransitionEnd', this, false);

There was still the issue if a user was at the bottom of a very long page, then used AJAX to load a very short page. For some reason, the jscroll.js code wouldn't let the user pull the content at the very top of the page down if it was out of view. So whenever the user changed pages on a list, I had the AJAX (within my webapp code) call the

myScroll.scrollTo(0, '100ms');

to pop the screen to the top (again, I did not want to do this "popping to the top" every time because on-page AJAX changes resulting in "success" events would trigger it and pop the user away from the content they were looking at if it was not at the top of the page).

I also included code to disable all this for the Google Android.

14

Re: static iHeader and iFooter

+1 I'd like this too. Just search on the net how many people want this. If WAN does it first, I think it will be a great USP for this framework.

Last edited by ngd (2010-01-06 10:41:08)

Re: static iHeader and iFooter

function loaded() {
    window.scrollTo(0,0);
    document.addEventListener('touchmove', function(e){ e.preventDefault(); return false; }, false);

    iGroup = document.getElementById("iGroup");
    divs = iGroup.getElementsByTagName("div");
    if (divs.length > 0)
    {
        myScroll = new iScroll(divs[0]);
    }
}

Re: static iHeader and iFooter

Re: static iHeader and iFooter

Re: static iHeader and iFooter