I'm working on a web app, for which the main page is a long list of
alphabetized items. I'm trying to add a vertical alphabet element to
the right hand side, and make it function similar to the alphabet
block in the iPhone iPod software's right hand side in Artist view..
i.e. a quick way to jump to the alphabet location you want.
some requirements:
- needs to run on top of iUI
- need to keep the alphabet block fixed as I scroll
- when a letter in the block is clicked, page should scroll down to
the appropriate letter in the content list.
- content list items beneath the vertical alphabet block should remain
clickable
I noticed the facebook iphone web app has a similar feature in their
Search feature.. but I'm having trouble even getting some basics to
work within the iUi framework.
e.g. the following css/js code snippets for adding an alphabet block
work for a non-iUI stand alone web page in both Firefox and Safari
(except seems Safari on iphone doesn't honor "position: fixed", but
this works perfectly fine in desktop Safari).. When i use this sort
of approach within iUI on Firefox desktop, the block appears fine, but
on Safari desktop or iphone no alphabet block appears.
Any suggestions or iui examples you've seen with this alphabet bar?
.alphabar {
position: fixed;
top: 0;
right: 0;
padding: 10px;
color: #555555;
font-size: 10px;
font-weight: bold;
line-height: 11px;
display: block;
}
function initAlphaBar(){
var a=[];
for(var i=0;i<26;++i) a.push(String.fromCharCode(65+i));
j=document.createElement("div");
j.className="alphabar";
j.innerHTML=a.join("<br>");
var bodyElem = document.getElementsByTagName('body')[0];
bodyElem.appendChild(j)
}
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
