Well, I commented out the line
link.setAttribute("selected", "progress");
so that the link is not highlighted blue with the spinning indicator
on the link. You can keep that line if that is the desired behavior.
The changes to req.onreadystatechange() I actually removed this
morning because if the link didn't take that long to load, you would
never see the progress indicator. So I moved that code to the bottom
of showPageByHref() in the else statement (check out iui.js to see
what I mean). Basically that code shows the progress indicator and
establishes the "abort call on click" functionality.
The reason this solution is elegant because it is an extension to iUI
instead of trying to override its behavior. So there is no special
code for that link, instead all AJAX calls are handled this same way
automatically. So as long as you link to an external page (in iUI,
without the #), this same behavior will occur.
Hope that helps.
Chandler
On Jun 15, 7:30 pm, Al <[EMAIL PROTECTED]> wrote:
> 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/withablack 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
-~----------~----~----~----~------~----~------~--~---
