I changed the solution up a bit, but it achieves the same thing and
uploaded it to my server. Check it out here:

http://labs.chandlerkent.com/iphone/music.html

Click "Stats" to see a progress indicator. Also, you can tap the
progress indicator to cancel the AJAX call. Try it out, let me know
what you think and feel free to check out the code.

Chandler Kent

On Jun 15, 3:34 pm, Chandler Kent <[EMAIL PROTECTED]> wrote:
> I don't think the redirect approach is a very good idea, too much
> sliding. I think I have a more elegant solution...
>
> First, the JavaScript. In iui.js around line 171 find the function
> addEventListener(). Inside that function there is basically an if-
> statement nested with if-statements. The last else if (!link.target)
> handles the asynchronous loading. So inside there replace the line:
>
> link.setAttribute("selected", "progress");
>
> with:
>
> document.body.setAttribute("selected","progress");
>
> Then, inside that same addEventListener() function around line 176,
> inside the inner function called unselect() add the line:
>
> document.body.removeAttribute("selected");
>
> Okay, now to the html. Inside your initial page, right after the
> toolbar div (<div class="toolbar">) add this:
>
> <div id="progress"><span>Loading...</span></div>
>
> Now, in your css file, add:
>
> body[selected="progress"] > #progress {
>         display: block;
>
> }
>
> #progress {
>         position:absolute;
>         top:0;
>         min-height:100% !important;
>         z-index:100;
>         color: white;
>         text-align: center;
>
> }
>
> #progress > * {
>         background: black url(progress.gif) center 75% no-repeat;
>         -webkit-border-radius:25px;
>         opacity:.8;
>         padding:25px 50px 100px;
>         position: absolute;
>         top: 50%;
>         left:50%;
>         margin: -50px 0 0 -75px;
>
> }
>
> body[orient="landscape"] > #progress > * {
>         margin: -25px 0 0 -75px;
>
> }
>
> That should do it. I used an image called progress.gif 
> fromhttp://www.ajaxload.info/with a black transparent background and a
> white foreground. This solution also disables the page so the user can
> click multiple links.
>
> I hope this is the solution you are looking for. If you need more help
> or would like to see the solution, let me know.
>
> On Jun 14, 11:35 am, Al <[EMAIL PROTECTED]> wrote:
>
> > thank you for the suggestions. i'll try the redirect approach.
>
> > if anyone also know of a way to handle this directly with IUI.js..
> > please post here.
>
> > thanks,
> > Al
>
> > On Jun 13, 4:03 pm, Michael Kaye <[EMAIL PROTECTED]> wrote:
>
> > > Of course one could use location.replace and then the page isn't added
> > > to the history...
>
> > > On 13 Jun 2008, at 19:17, davidroe wrote:
>
> > > > the downside of that approach is that the loading screen will also
> > > > remain in the history stack, so to return to the previous screen, you
> > > > will have to go back twice as it will first return to "Loading...".
> > > > you will want to hack it so that you slide in the loading screen
> > > > without using the conventional approach of changing the history hash
> > > > to display content.
>
> > > > this functionality sort of exists in WebApp.net - if you have not yet
> > > > looked at this framework and are doing iPhone webapp development, you
> > > > should. in the demo app, you will see that the panel for selecting a
> > > > radio option (off the form demo panel) uses a technique to display
> > > > content without changing the URL location hash. although this is not
> > > > directly exposed, you should be able to "hold" your own panels in
> > > > place using a similar technique.
>
> > > > alternatively, you could consider putting your "loading..." message on
> > > > the original panel (in a hidden div at the top of the page). clicking
> > > > the link displays the loading message first, before continuing with
> > > > loading and displaying the content.
>
> > > > HTH,
> > > > /dave
>
> > > > On Jun 13, 3:13 am, Michael Kaye <[EMAIL PROTECTED]> wrote:
> > > >> I don't know IUI so I'm not sure how IUI loads the next view but one
> > > >> thing you could try is to set your link to goto to "loading view" but
> > > >> also pass a secondary argument like a redirect. Once this view has
> > > >> loaded, it should call the redirect...this way the loading view will
> > > >> remain on screen until the data is returned...
>
> > > >> Does this make some sense?
>
> > > >> On 13 Jun 2008, at 07:19, Al wrote:
>
> > > >>> Hello,
> > > >>> I'm using the standard iui.js in my web app.  What's the best way to
> > > >>> insert a "Loading..." type dynamic logo on an iphone webapp when I
> > > >>> click on a link from the home page?  My next page takes a few
> > > >>> seconds
> > > >>> to load, and besides the small spinning logo on the right edge of
> > > >>> the
> > > >>> home page's hyperlink.. I'd like to put some larger message and
> > > >>> dynamic spinning logo on the screen upon click.. then when ready,
> > > >>> continue loading the page requested in my main screen's <a href...
> > > >>> request.
>
> > > >>> thanks,
> > > >>> Al
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to