View bounces back to top when calendar is in view

[rystraum]

I'm using the jQTouch-Calendar plugin and I'm having trouble with the scroller bouncing back up to the top of the calendar when I try to look at the events of a particular date. Here's my DOM structure:

<div id="events" class="hide_tabbar">
    <div class="toolbar"> ... </div>
    <div class="s-scrollwrapper">
        <div class="content-area">
            <ul id="event-list">
                <!-- Dynamic Content -->
            </ul>
        </div>
    </div>
</div>

And here's the JS code that generates the pane:

function buildEvents() {
    console.log("preparing events view");
    var content = "<ul>";
    for (var x = 0; x < events.length; x++) {
        // 2011-05-30 00:00:00.0
        var eventdate = new Date(events[x].eventdate.replace(
            /^(\d{4})-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d).(\d)$/,
            '$2/$3/$1 $4:$5:$6')
        );

        if (isNaN(eventdate)) continue;

        content += "<li class='arrow'>";
        content += "<time datetime="+ eventdate.format("isoUtcDateTime")+">";
        content += "<a class='event slide plain' href='#event-details' onClick='getEventDetails(\""+events[x].eventrefid+"\")'>";
        content += "<span>"+events[x].eventrefid+"</span>";
        content += "</a></time></li>";
    }

    content += "</ul>";
    $("#event-list").html(content);
    $('#event-list').getCalendar(); //This is the important bit
}

It generates the calendar fine but when I have a couple of events on a day (which causes the page to be bigger than the scroller area, the scroller snaps back up to the top when I try to scroll down. Help?

[DataZombies]

Call jqt.setPageHeight() after the last line of code.

[rystraum]

It doesn't seem to have any effect. I tried including setPageHeight on the click event attached on the calendar but still no luck.

[DataZombies]

If you are loading the data asynchronously you need the setPage Height call in the callback function.

Sent from my iPhone

On Jun 28, 2011, at 10:30 AM, rystraumreply@reply.github.com wrote:

It doesn't seem to have any effect. I tried including setPageHeight on the click event attached on the calendar but still no luck.

Reply to this email directly or view it on GitHub: https://github.com/DataZombies/jQTouch/issues/61#issuecomment-1455866

[rystraum]

The data is loaded earlier on as json, stored in the events variable. The snippet above is the only time I generate the list items. I do the same technique for everything else. In fact, when I disable the creation of the calendar (and get my regular list), the scrolling works properly.

Update: In between posting this reply I was going to try out an experiment. In the process, I managed to comment out the content = '<ul>' and it's corresponding tag in the bottom. Lo and behold, it now works. I was searching for it the whole day and it was just two lines. @___@

Thanks very much for the help and effort.

Update 2: I looked more into it and it seems that it wasn't those that fixed it. Two things fixed it. One, the jQT.setPageHeight() on the bound click event on the calendar and a dummy div <div>.</div> added in as a sibling to ul#event-list.

For some reason, the original code's check for jQT.bar does not pass. It's supposed to call the jQT.setPageHeight so I had to insert one unchecked. I'm using the plugin anyway so it shouldn't throw any errors.

The extra div is there to ensure that content-area gets a height. Without it, it's height is 0, which should explain the bouncing back up.

[DataZombies]

NP

Sent from my iPhone

On Jun 28, 2011, at 11:20 AM, rystraumreply@reply.github.com wrote:

The data is loaded earlier on as json, stored in the events variable. The snippet above is the only time I generate the list items. I do the same technique for everything else. In fact, when I disable the creation of the calendar (and get my regular list), the scrolling works properly.

Update: In between posting this reply I was going to try out an experiment. In the process, I managed to comment out the content = '

' and it's corresponding tag in the bottom. Lo and behold, it now works. I was searching for it the whole day and it was just two lines. @___@

Thanks very much for the help and effort.

Reply to this email directly or view it on GitHub: https://github.com/DataZombies/jQTouch/issues/61#issuecomment-1456246