Fixed Toolbars & Dragging

[nicolef6]

I want to create a toolbar that stays fixed as you scroll the page.
The current code we have for implementing toolbars doesn't stay fixed:

<div class="toolbar">
<h1>Ransom Note</h1>
</div>

Does anyone know how to do that? Also, does anyone knows how to
implement touch drag and drop? I've searched online for some
solutions and I can get it to work in regular browsers, but not in the
iPhone simulator.

Thanks,
Nicole

[Steve Marmon]

Hi Nicole,

jQTouch does not natively support fixed toolbars. However, someone has
written an extension that adds support for this behavior. You can
download it here:

http://www.google.com/url?sa=D&q=http://jqextensions.googlecode.com/files/example.zip&usg=AFQjCNFXXbc-SDU3ls30W2Z2t0KJCNUXEg

Open the example in the iPhone Simulator, then click "Vertical Scroll"
to see it in action.

To support drag and drop, you need to disable the normal scrolling
behavior. First add this function:

function touchMoveHandler(e) {
e.preventDefault();
}

Then add this line to globally disable normal scrolling:

document.addEventListener("touchmove", touchMoveHandler, false);

Since this will disable scrolling everywhere, you will want to call it
after you animate into screens that need drag and drop. Once you leave
those screen and need to support regular scrolling again, use the
removeEventListener() function:

document.removeEventListener("touchmove", touchMoveHandler, false);

Once normal scrolling is disabled, you should be able to handle touch
events. Here are some helpful examples:

http://tlrobinson.net/iphone/lighttable/
http://rossboucher.com/iphone/
http://rossboucher.com/2008/08/19/iphone-touch-events-in-javascript/

- Steve