Question

We have built an iPhone style date picker. It is functional at the moment in everything except IE. What I do not know how to do is find the tittle attribute of which ever value is in the centre.

Here is a fiddle : http://jsfiddle.net/XHPYF/1/

Any ideas,

Marvellous

Answer 1

Here’s a way – http://jsfiddle.net/pxfunc/XHPYF/7/

1. You can set in your HTML the initial value using class='selected'
2. Then use jQuery to determine the top offset value for the current selected element and save it to a variable for step 3
3. Use the onScrollEnd event (in your iScroll plugin) to track changes by:
   1) Clearing the current element marked as selected
   2) Iterating the list items to determine where the top offset is equal to the initially selected item and mark it as the selected item

---

UPDATE (the original solution works in Webkit browsers but Firefox works a bit different):

you’ll need to parse the data from either

$('#minwheel .slotinner').css("-moz-transform")
// result: "matrix(1, 0, 0, 1, 0px, -32px)"

or

$('#minwheel .slotinner').attr("style")
// result: "... -moz-transform: translate(0px, -32px) scale(1);"

In both cases the -32px would need to be parsed out and used to determine the selected list item.

Here’s a solution for Firefox

http://jsfiddle.net/XHPYF/13/

---

now you just need to figure out how to make it work in IE 🙂

---

this is definitely an experimental user control, browser updates could potentially break it and useragent detection for determining which way to get the selected item is a pretty big no-no in general. Still, the iPhone look and functionality is fun and cool.