Home > Coding, iPhone, jQuery > CSS and Mobile Safari…

CSS and Mobile Safari…

I continued on my jQuery slider plugin for the iPhone/iPod touch. Having gotten the horizontal slider working OK (at least as much as I have done so far) I thought it might be good idea to get the vertical one working to the same extent. It actually worked pretty well except that it was upside down on the web page. The slider handle and range indicator that follows along behind it grew DOWN from the top of the slider instead of up from the bottom as the value I was setting it to increased.

In the end I found that I had specified ‘top’ in the CSS and if you tie the top to something, the only way it can grow is downwards. That only took me about two hours to find! Talk about frustrating.

Then I wanted to make it so that if you click or touch on the slider bar, the handle would jump to that location and report an appropriate value back to the hosting app. I got all that working fine on the desktop in Safari then moved the code to my server and tried it on the Pod Touch and lo, it did not work. WTF!

Turns out (I have read about this ages ago, I’d just forgotten about it of course) that whilst on a desktop the click location is defined by event.pageX and event.pageY, on a mobile device it is defined by event.touches[n].pageX and pageY because you can of course have multiple touches going on (n is an index into the array of touches). So I had to add a call to the code I used to test if this was a touch device or not when setting up the events to bind on and grab pageX and Y from the appropriate location.

Once I did that, it worked fine.

So, next step is to do the drag stuff for the slider handle itself and I should be good to go!

Here’s a couple of sliders on my test page:

The gaudy colors on the slider are just to make it easier to see the elements for testing, plus I have absolutely no artistic ability either!

Advertisements
Categories: Coding, iPhone, jQuery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: