Hey Scott, Wow. Very cool thing you've got there! So if I was on an iPhone, I could two-finger drag that box anywhere, not just along the x or the y, but both x and y at the same time? It appears to be moving the whole div and not just the box... Hmmm...
If every entry in a favorites list was on it's own div layer with your code, it'd be pretty easiy to get a drag-n-drop system going. When the list first appears, each item's div (with your code in each) is say only 24 pxiels high with the same z-index. When tapping on an item, change the div's height to say 416px (or the then available screen height) retaining the y positioning of the item, make sure the 'extra space' around the item has it's background set to nothing, set the div's overflow to auto and set the z-index to say 1000. (be cool to add soft shadow png around the item to simulate being above the other items) Now you can two-finger scroll that item (the whole div) up or down 'over' the other items in the list. When dropping, there'd have to be some calculations as to where it was dropped, eg.whether it moved up/down far enough to actually change it's order in the list, then store the updated results in the database so it remembers the order for next time. Maybe a quick AJAX update to the database as soon as the moved div is released and redraw the item list so you can then select another item and start the whole process over again. I can totally see the normal iPhone favorites list being emulated in this fashion. Only difference being a 'click to select' first, then be able to two-finger scroll. Question: If there was a normal two-finger scrolling div that contained say 20 divs, each with your code, would that list of your divs be two-finger scrollable as a whole, only changing to the drag-n-drop thing after single clicking? Now, for a single application of your code, not an array of them, can you use scrollto to programmatically move your 'box' around? Say, I click on a link, can you tell your box to scroll to a certain position? I want to use that for the alphabet linking to each individual letter in the list. Trying to stay away from causing the address bar to appear/disappear. I'm hoping an onmousedown javascript would avoid seeing the address bar. So if I want to jump to the T's, I can click in my alphabet div (maybe go off height percentage clicked in the div, rather than 26 individual links?) and then mixed with your code, scroll the contents of my overflow:auto div to the T's. If there aren't any T's, then scroll to the closest letter that is in the list. Very cool stuff! -=R On 7/30/07 1:57 PM, "Scott" <[EMAIL PROTECTED]> wrote: > > Randy, > > I have a prototype that does exactly what you're talking about. > I've been sitting on it for a week now, hoping to get around to a blog > post, but, its not going to happen ;) Its pretty rough, but it works > well once you get used to the two-finger slide: > > http://static.biggu.com/ipdrag.html > > Touch a box to select it, then two-finger drag it to where you want it > to go. I'm sure the math is off, as I did this at 2 AM last week, so > feel free to correct it/make it actually usable :) > > - Scott > > On Jul 30, 2:46 pm, Randy Walker <[EMAIL PROTECTED]> wrote: >> I mean a div that is 334px high containing content that may be thousands of >> pixels high. Ie. A list. overflow:auto would keep the div at the exact >> height, then I want to be able to use scrollto, or something similar, to >> scroll that content. Looking for a replacement to two-finger scrolling. >> There are no scrollbars anyway in iPhone? Not talking about sliding a div >> in/out of the viewport. Talking about scrolling the contents of an existing >> div, without moving the div. Hope that makes sense. >> >> -=R >> >> On 7/30/07 12:18 PM, "Yehuda Katz" <[EMAIL PROTECTED]> wrote: >> >>> Use IDs ;) >> >>> Also, you don't really need an overflow div, as there are no scrollbars to >>> look nasty, and hiding elements outside of the viewport makes scrolling >>> impossible. You simply show the element you want for animations ;) >> >>> -- Yehuda >> >>> On 7/30/07, Randy Walker <[EMAIL PROTECTED]> wrote: >> >>>> I was thinking along the same lines all day yesterday! How would one use >>>> scrollto, or something like it, to scroll content in an overflow div? >>>> Ie.now that I have the alphabet in place, how would I cause a tap on the >>>> alphabet to scroll the overflowed div to the right letter? I don't want to >>>> use anchors since they seem to always cause the address bar to drop down >>>> for >>>> a minute and then disappear again. Blech! >> >>>> On 7/30/07 3:02 AM, "Yehuda Katz" <[EMAIL PROTECTED]> wrote: >> >>>>>> Hey guys, >> >>>>>> I had something of a breakthrough this evening that will make page >>>>>> transitions super-smooth. >> >>>>>> I was playing with Firebug on iphone, looking through all the various >>>>>> properties available (and I believe strongly that there are some >>>>>> unexplored avenues) when it hit me. Instead of trying to move elements >>>>>> around the page, why not try scrolling the viewport itself. >> >>>>>> We already know that scrollTo works just fine, so I tried to see how >>>>>> many scrollTo's I could make happen using a simple setTimeout. I was >>>>>> amazed. I was able to get super-smooth page transitions using >>>>>> scrollTo. I told Joe about this finding, and he was able to duplicate >>>>>> it for use in iUI. >> >>>>>> Good luck folks! I'm excited, >> >>>>>> -- Yehuda Katz > > > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
