Thanks Chandler.
that solution looks nice.
I've been looking at your iui.js file. I see some changes to:
req.onreadystatechange
and that you commented out the line:
link.setAttribute("selected", "progress");
from the addEventListener
Can you describe what else you altered? Also, how do you set that
"Stats" link on the home page to activate the Loading.. image. I
didn't spot anything special in the html or js for that hyperlink.
Thanks!
Al
On Jun 15, 2:08 pm, Chandler Kent <[EMAIL PROTECTED]> wrote:
> 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/witha 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
-~----------~----~----~----~------~----~------~--~---
