I had the same issue at first. My solution was to put the alphabet in a semi-transparent containing div that was 40px wide and a z-index above my list. I left the alphabet bar the same width as the one in the contacts native app. (about 20px?) Setting the background-color of the containing div to rgba(0,0,0,1) made it show the list below but also stopped my ability to fat-finger and hit the list. Also, I didn't make my letters <li> but just left them as links <a> with <br> in between each. By setting the containing div's 'text-align:center' all my letters line up nicely. I played with the line-height of each letter so they fit on the screen. (I have a header and footer taking up real estate) Here¹s a screen shot from Safari on my mac. Imagine the scroll bar wasn¹t in the way. The containing div extends to the left about half way between the left edge of the alphabet background and the left of the screen capture, enough to stop an accidental tap on the list below.
-=Randy On 10/17/07 6:54 PM, "nurho" <[EMAIL PROTECTED]> wrote: > > Okay, I have started something, but I just don't know enough of the > javascript iui uses to take it to the next level. I have a long list > of computers and I want to quickly jump to a certain letter just like > I can just to a certain letter of artists in the Music section of my > iPod Touch. The problem I have now is my fat finger. I can't click > on the tiny little letter without missing and clicking on a computer > name behind. I have tried changing the width of the <li> holding the > computer, but that just makes things more ugly. Is there a way to get > the letters div in along the right side, without having it above the > <li>s? I am sure there are also better ways to code some of the > things I have coded. Let me know what you think. I have made a > static example of what I am trying to do at: http://seniors.caj.or.jp/iui > This code is normally generated from my FileMaker custom web > publishing server. > > I put this line of code beneath my "selected" div: > <div id="letters" name="letters"><script type="application/x- > javascript">buildLetters()</script></div> > > Then, each of my dividing letters look like this: > <li class="group"><a id="letter_A" class="letters"></a>A</li> > > Added to the bottom of iui.css: > a.letters { > background-image: none; > } > > #letters { > position: absolute; > top: 6px; > right: 5px; > text-align: center; > z-index: 2; > } > > #letters > a { > font-size: 12px; > color: #666666; > text-decoration: none; > } > > Added to the bottom of iui.js: > function goToLetter(obj) //borrowed from > http://www.quirksmode.org/js/findpos.html > { > var curleft = curtop = 0; > if (obj.offsetParent) { > curleft = obj.offsetLeft > curtop = obj.offsetTop > while (obj = obj.offsetParent) { > curleft += obj.offsetLeft > curtop += obj.offsetTop > } > } > window.scrollTo(curleft+0,curtop+0); //added the +0s needed for some > reason > } > > function buildLetters() > { > var letters = new > Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R", > "S","T","U","V","W","X","Y","Z"); > for(letterCounter=0;letterCounter<letters.length;letterCounter++) { > document.write("<a href='' > onClick='javascript:goToLetter(document.getElementById(\"letter_" + > letters[letterCounter] + "\"))' class='letters'><div width='100%'>" + > letters[letterCounter] + "</div></a>"); > } > } > > > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
<<inline: image.jpg>>
