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
-~----------~----~----~----~------~----~------~--~---
