> Spinning wheel on webkit for iPhone/iPod touch

Slot Machine

I’m more and more amazed by the power of mobile webkit. I don’t love the iPhone that much, but as a web developer the beauty of CSS transitions, animations and transforms can’t pass unnoticed. This time I’m giving away a widget that resembles the native Picker View (UIPickerView) functionality but entirely built on javascript.

First things first. Have a look at the demo page or, if you don’t have your device at hand, watch the screencast I baked for you.

Please note that the script is in beta phase, I am publishing it to receive feedback and suggestions. In the next few days we should have a stable version.

Update 2009/03/16: We are out of beta, the script is now stable and ready for production (hope so :) ). In the zip I also included a minified (9kb) version of the script to save some bits of precious bandwidth.

Update 2009/04/19: the script is now compatible with full screen mode apps. It seems that in full screen mode preventDefault() and stopPropagation() placed in touchStart event are not enough to block the propagation of the touch event. Adding preventDefault() to touchMove event solved the problem.

Update 2009/06/18: the script has been updated for OS3.0 compatibility.

Update 2009/07/09: it turned out that Apple is well aware of the webkit refresh bug, fortunately they are kind enough to offer a workaround. All we have to do is to use translate3d instead of translate and all our animations will be fluid as never before! Go get the latest version of the script!

How to use the script

The widget is composed of two parts: the stylesheet and the javascript. No HTML is needed as all the elements are created by the script on the fly. Include both the JS and the CSS into your page and you are ready to spin. You’ll be also surprised to see that the spinning wheel itself is built with just two images, while other three images are needed for the header and buttons. The PNGs altogether are 4.3kb.

The code does not need initialization on window load. You cannot have more than one picker at a time, so the SpinningWheel object is unique and it is created as soon as you include the JS file.

The first thing you need to do is to define the slots with:

SpinningWheel.addSlot(obj values, str styles, str defaultValue)

values is in the form of: { key: value, key2: value, ... }. Keys are the identifiers that won’t be shown in the picker (think of them as the value parameter in the <option value="foo">bar</option> tag). Values are the labels printed on the slots.
styles is a list of space separated predefined styles to be applied to the slot. The available values are:

  • right, align text inside the slot to the right;
  • readonly, the slot can’t be spun;
  • shrink, shrink the slot width to the minimum possible.

The first element of the slot will be selected if no defaultValue is defined.

When all the slots have been created, set the default actions for the cancel and done buttons.

SpinningWheel.setCancelAction( function(){ } );
SpinningWheel.setDoneAction( function() { } );

Finally show the picker:

SpinningWheel.open();

Voila, the Picker View is ready for countless hours of spinning pleasure.

To get the actual selected values call:

var result = SpinningWheel.getSelectedValues();

result.keys will be filled with an array of the selected keys while result.values will hold the list of the selected values (or labels).

Let’s wrap everything together.

function swExample() {
	var numbers = { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9 };
	SpinningWheel.addSlot(numbers, 'right');
	SpinningWheel.addSlot(numbers, 'right');
	SpinningWheel.addSlot({ separator: '.' }, 'readonly shrink');
	SpinningWheel.addSlot(numbers, 'right');
	SpinningWheel.addSlot({ Kg: 'Kg', Lb: 'Lb', St: 'St' }, 'shrink');

	SpinningWheel.setCancelAction(cancel);
	SpinningWheel.setDoneAction(done);

	SpinningWheel.open();
}

function done() {
	var results = SpinningWheel.getSelectedValues();
	alert('values:' + results.values.join(', ') + ' - keys: ' + results.keys.join(', '));
}

function cancel() {
	alert('cancelled!');
}

Look at the demo for more examples.

Create custom styles

I preconfigured for you three styles for the slots, but you can add as many as you need. Say you want a slot with center aligned text. Add the following to the stylesheet:

#sw-slots .sw-center { text-align:center; }

To apply the style create the slot like this:

SpinningWheel.addSlot(values, 'center');

A piece of cake.

By default the slots try to fit their content. Slots with long text will be wider than ones with short text. (Same as the <table /> cell elements). With custom style you can override this behavior. If you have two slots and you want them to be exactly the same width you may add the following style:

#sw-slots .sw-50percent { width:50%; }

and create the slots with:

SpinningWheel.addSlot(values, '50percent');
SpinningWheel.addSlot(values);

You don’t need to apply the style to both slots as the second will fit the remaining space (or the other 50% of the screen width).

Limitations

None that I can tell if not those imposed by the device small CPU. All animations are hardware accelerated, the “birth date” example in the demo creates more than one hundred elements and all animations are pretty fluid.

The script is also compatible with both landscape and portrait mode and you can freely switch from one to the other while the spinning wheel is opened. (That is more than what the native Picker View has to offer).

Note that once closed the spinning wheel is completely inaccessible and all variables will be null or undefined. So basically you can’t programmatically query the SpinningWheel object while it is not visible.

I’m now working on code optimization to reduce memory usage, I hope to release a stable version as soon as possible. The code is now stable, please leave your comments and suggestions.

As always released under MIT license for all your coding needs.

Download the script

/Share the joy

/Reactions

    • Author: David
    • Posted on: 2010/12/28
    • At: 19:30

    I am using a single slot spinner on an iphone app.
    I want open up a “new page” by clicking the selection shown on the spinner. I am not interested in displaying the selected key/values as is shown on the demo.
    Is this possible to call up a page which is relevant to the selection on the spinner
    If so how do I implement it?
    Thanks

    • Author: Taras
    • Posted on: 2010/12/29
    • At: 13:22

    so, after some adjustments i have finally suited your sw to my needs and there is one thing, which you might want change:

    If the sws width is not 100% of the screenwidth and the sw-wrapper is positioned arbitrary on the page, the scrolling does not function anymore. To quick fix this change the xPos in the scrollStart function to this: xPos = e.targetTouches[0].clientX – this.swSlots.offsetLeft – this.swWrapper.offsetLeft;

    Just on a personal note, I find your method of determining the currently scrolling slot rather heuristic. IMHO this should be done via assigning an eventlistener to each slot, so that the browser does the determination automatically for you.

    Anyways. thanks for sharing the script. Good job.

    • why “heuristic”? The chances of taking the wrong slot are very small, and working with just on eventlistener saves a lot of resources.

    • Author: Jimmy Liu
    • Posted on: 2010/12/30
    • At: 18:32

    Very nice!
    Thank you so much!

    • Author: Remco
    • Posted on: 2011/01/03
    • At: 03:59

    Cool!

    I’m rather new to jQuery but is it possible to show the sw in a popup like the way bookmarks are shown in safari on the iPhone/iPad? (window with neat pointer)

    • Author: ol
    • Posted on: 2011/01/03
    • At: 18:59

    I am using it from my iPhone in debug mode.
    Sometimes I get this error :

    Javascript Error on line 1 ..min.js?v=1.4
    TypeError: Result of expression
    ‘e.targetTouches[0]‘ [undefined] is not an object.

    • Author: newbie
    • Posted on: 2011/01/10
    • At: 11:15

    How do I call the function in my HTML?
    I want a new page to open when the user taps on the current date and the date picker should show up immediately on that new page.
    If I place the call like this:

    the picker doesn´t show up on the linked page. Do you have any suggestion how to make it show up?

    • Author: techcrunch
    • Posted on: 2011/01/10
    • At: 11:21

    How do I call the SpinningWheel function from my HTML?

    I want that a new page opens when the user taps on a date and the spinning wheel should immediately pop up on the new page. If I write something like this:

    <a href=”#date” rel=”nofollow”>

    the picker won´t show up. #date is the new page where the picker should pop up. How should I call the picker so that it shows up on that page?

      • Author: techcrunch2
      • Posted on: 2011/01/19
      • At: 10:30

      Hi,
      I am having a similar problem. I put an onClick event in my href tag, so that the function is called.
      It all goes pretty well in desktop Safari (ok, you can’t spin, but anyway) and even if I change the user agent to Mobile Safari it works. However, when testing on an iPhone, the wheel’s gone!!!

      Does anybody have an idea why??? Please, any help is appreciated!

    • Author: Roberto
    • Posted on: 2011/01/18
    • At: 18:50

    Hi!

    Thank you for this great tool!

    Is it possible to prevent “opening” more than once SpinningWheel? Even in your demo page, when I click the demo botton several times, more than one SpnningWheel opens next to each other…

    Thank you.$

    Roberto

      • Author: techcrunch2
      • Posted on: 2011/01/24
      • At: 16:54

      Hi,
      you can prevent “opening” more than one SpinningWheels if you check whether the object already exists. In the demo the SpinningWheel pops up as often as you click the corresponding button since it is in an onClick event.

      Hope that helps!

      • Author: Jack Webb
      • Posted on: 2011/03/11
      • At: 02:52

      techcrunch2,

      After playing around a bit, I found a solution for the problem with opening multiple wheels at the same time. In spinningwheel_load.js, as the first line in each occurrence of a openXXX function, place a test for “sw-wrapper” and exit if it exists…

      function openBdate() {
      if(document.getElementById(‘sw-wrapper’)) { return; }

      Jack

      • Author: Scott
      • Posted on: 2011/03/21
      • At: 20:24

      Jack,

      Thanks for the simple resolution. I can confirm this works perfectly, even with multiple pickers in one window.

    • Author: Percy
    • Posted on: 2011/01/23
    • At: 18:52

    Great solution !!
    I am a newbie to JS in general and have 2 questions.
    1. Is there a way to allow a wheel to loop around, the native picker does that for some of the wheels. For example in the Weight picker in the sample, I want the number wheels to just loop

    2. Is there a way to grey out invalid choices ?
    For instance in the Date picker, for the month of February, I would like to grey out 29,30,31.

    I checked the previous threads and these questions have been asked but didn’t see a solution.

    Please help…

      • Author: leela
      • Posted on: 2011/02/09
      • At: 15:08

      I am also tring a similair thing. Like to generate an event on selection of a particular value. Are you able to find any solution . Please help….

      • Author: Thundersoda
      • Posted on: 2011/03/04
      • At: 12:18

      SpinningWheel.setDoneAction(function(){
      var results = SpinningWheel.getSelectedValues();
      var y = results.keys[0];
      var m = results.keys[1];
      var d = results.keys[2];

      return m > 0 && m 0 && y 0 && d <= (new Date(y, m, 0)).getDate();
      });

    • Author: LouMazz
    • Posted on: 2011/01/31
    • At: 17:58

    Really nice, but. If I try the following:

    SpinningWheel.addSlot(letters, ‘right’, tmpA[0]);
    SpinningWheel.addSlot({ separator: ” }, ‘readonly’);
    if (tmpA[1] != null) SpinningWheel.addSlot(numbers, ‘right’, tmpA[1]);
    if (tmpA[2] != null) SpinningWheel.addSlot(numbers, ‘right’, tmpA[2]);
    SpinningWheel.open();

    If doesn’t work. I get bogus data where the default values should be.
    tmpA = {Y, 3, 9} shows as X, 7,1 and the characters are not centered horizontally.

    If I comment out the first line, all is well. But that’s not what I need.

    Data is:

    var numbers = { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9 };
    var letters = {‘ ‘: ‘ ‘, A: ‘A’, B: ‘B’, C: ‘C’, D: ‘D’, E: ‘E’, F: ‘F’, G: ‘G’, H: ‘H’, I: ‘I’, J: ‘J’,
    K: ‘K’, L: ‘L’, M: ‘M’, N: ‘N’, O: ‘O’, P: ‘P’, Q: ‘Q’, R: ‘R’, S: ‘S’, T: ‘T’,
    U: ‘U’, V: ‘V’, W: ‘W’, X: ‘X’, Y: ‘Y’, Z: ‘Z’ };

    I can’t see anything obviously wrong in the code. Is it me?

      • Author: LouMazz
      • Posted on: 2011/02/01
      • At: 16:43

      Update after much instrumentation. Code above reliably yields correct first letter value and spin range . But the numbers are one less than they should be and the spin range is also off by one (i can’t spin to 9).

      If I remove the letter slot, numbers work fine.

      slotMaxScroll and yPos seem to be correct up to the
      serPosition call, and then the wrong values appear.

      Very weird, and a heartbreaking showstopper for my use.
      Any clues much appreciated.

    • Author: Andrew
    • Posted on: 2011/02/01
    • At: 15:06

    This is great. Thank you.

    I have a wheel with two slots (date and month), and need to input the two keys separately in two different locations in a generated URL. How can I split up the keys-result, instead of it being (0,0)? Or in the following code, is it possible to call the var “months” or “days”?

    function done() {
    var results = SpinningWheel.getSelectedValues();
    window.location.href = “http://www.example.com/example.aspx?format=png&week=”+results.keys+
    “&day=”+results.keys+”&width=320&height=480″
    }

    Any help is greatly appreciated!
    Andrew

      • Author: LouMazz
      • Posted on: 2011/02/01
      • At: 15:29

      It’s an array of values.

      months = results.values[0];
      days = results.values[1];

      ought to work. I use

      newQty = results.values.join(”).replace(/^0+/, ”);

      to make my multi-digit spinner return one value.

      • Author: Andrew
      • Posted on: 2011/02/01
      • At: 18:53

      You’re the man, LouMazz! Works like a charm.. Thanks a lot! :)

  • I’m finishing up the code for iscroll4, as soon as it will be ready I’ll work again on the picker wheel.

    • Author: Andrew
    • Posted on: 2011/02/06
    • At: 20:38

    I use it with JQTouch, and need the input values to load an image to a and the DONE function to bring me to it.

    Is this possible? Can someone point me in the right direction?
    Andrew

      • Author: Andrew
      • Posted on: 2011/02/06
      • At: 20:38

      *load the image to a DIV ..

    • Author: Peter
    • Posted on: 2011/02/09
    • At: 00:35

    Anyone know howto get the year to go from 2011-1911 to 2011-2021?

    Ive tried playing around with

    for( i = now.getFullYear()-100; i < now.getFullYear()+1; i += 1 ) {
    years[i] = i;
    }

    But I seem to be messing this thing up!

      • Author: David
      • Posted on: 2011/03/17
      • At: 00:03

      Probably a little late for you but in case anyone else is looking:

      for( i = now.getFullYear(); i < now.getFullYear()+11; i += 1 ) {
      years[i] = i;
      }

    • Author: Ron
    • Posted on: 2011/02/10
    • At: 21:16

    This is a great tool!

    However, I am having one issue on the iPad. In a form, I have a series of text boxes. Some of the textboxes I have regular keyboard input method and for others I have the spinning wheel method where I use jQuery :
    $(“#”).click(function(event) {
    event.preventDefault();
    $(this).val(”);
    openBirthDate();
    });

    I am noticing that while I have not chosen the spinning wheel method, my inputs are rendering fine, but once I use the spinning wheel method, my inputs are not rendering as they should.

    Is anyone having a similar issue?

    *I have no screen shot or link, sorry :(

    *preventDefault() does not stop the keyboard from from showing, however using “onFocus(blur());” does stop the keyboard from popping up

      • Author: LouMazz
      • Posted on: 2011/02/11
      • At: 18:04

      Spinning Wheel is designed to be modal.
      Everything else should block when it is up.

      • Author: Ron
      • Posted on: 2011/02/12
      • At: 01:33

      Thanks Lou but that wasn’t it. I found that it was a combination of “position:relative” and a firmware update… go figure huh? haha

    • Author: Jeff Barclay
    • Posted on: 2011/02/11
    • At: 19:47

    Anyone… I would like the date picker to default to the current date on load… any ideas?

      • Author: Thundersoda
      • Posted on: 2011/03/04
      • At: 12:15

      var now = new Date();

      SpinningWheel.addSlot(years, ‘right’, now.getFullYear());
      SpinningWheel.addSlot(months, ”, now.getMonth());
      SpinningWheel.addSlot(days, ‘right’, now.getDate());

    • Author: PCate
    • Posted on: 2011/02/20
    • At: 00:39

    Would love if the default iPhone spinner sound, as well as a custom one if needed, was an option.

    • Author: LouMazz
    • Posted on: 2011/03/04
    • At: 23:32

    Pardon my ignorance, but how can I construct spinner data on the fly? I want to read from my database and use the results as a selection set. Can’t figure out the syntax of the example static data.

    Any pointers appreciated.

      • Author: Jack Webb
      • Posted on: 2011/03/11
      • At: 01:32

      LouMazz,

      Create a PHP function (or use any dynamic server-sided language of your choosing) that writes a javascript to assign the variables. The script can be just about anywhere on the page. Remember, If it is assigned outside the SW functions, it will be global, so name the vars such that they won’t interfere with anything else. For example, if you wanted to assign an array of values…

      <?PHP
      $sql = "SELECT * FROM mytable WHERE….
      $res = mysql_query($sql);
      while($row=mysql_fetch_array($res)) {
      $myOptions[] = $row['myCol'];
      }
      print "var myOptionStr = ‘”.implode(“,”,$myOptions).”‘;\n”;
      ?>

      Then in spinningwheel_load.js, assign the necessary local variable to the global “myOptionStr” that you set with PHP and use JavaScript .split() to turn it into a JS array. (You can, of course, do the same thing with string vars rather than arrays.)

      There are many ways to do this, but this is the method I typically use. Hope that helps.
      Jack

    • Author: Jack Webb
    • Posted on: 2011/03/11
    • At: 01:43

    Sorry about that, LouMazz… Mateo’s blog routines stripped out some of the code. The printout of “var myOptionStr …” WAS surrounded by script tags to be printed as well.

      • Author: LouMazz
      • Posted on: 2011/03/18
      • At: 05:08

      Many thanks – I used your comments to write a client-side version:

      // construct list list for list spinner
      i=0;
      $(‘#listListBody ul li input’).each(function(index) {
      listList[i] = $(this).attr(“menuname”);
      i++;
      });
      listListString = implode(“,” , listList);

      where “implode” is:

      function implode(delim, ary) {
      out = “”;
      for(i=0; i<ary.length; i++) {
      if(i!=0) { out += delim; }
      out += ary[i];
      }
      return out;
      }

      Works great.

      • Author: LouMazz
      • Posted on: 2011/03/29
      • At: 17:24

      Jack:

      Here’s how to REALLY do it. This will allow a default setting to appear in the spinner. What needs to be constructed is an object, not an array. This allows setting key/value pairs:

      // construct list list for list spinner
      listList=new Object();
      $(‘#listListBody ul li :radio’).each(function(index) {
      listList[$(this).attr("menuname")] = $(this).attr(“menuname”); //key : value
      });

      et voila!
      Then one can write:

      SpinningWheel.addSlot(listList, ‘right’, current);

      where “current” is a value, and get the correct behavior. Just using the array approach
      will allow selection, but not default setting.

    • Author: Jack Webb
    • Posted on: 2011/03/19
    • At: 01:03

    I discovered something today as I was testing an app that I’m working on… something that may or may not have happened before, but that at least I didn’t didn’t notice previously.

    When I initially made a selection from the spinner the form field from which the spinner was opened was updated immediately. If I then went back to that spinner and changed the value, the actual value was changed, but the “displayed” value was not. This was a bit confusing, because as soon as I clicked on the field again, the displayed value was updated upon opening of the spinner.

    After a bit of playing around, I discovered that I could overcome this by issuing a jQuery .blur() command on the field ID at the end of the done() function. I thought I’d mention it, just in case anyone else had seen the same scenario.

    Jack

    • Author: Paul
    • Posted on: 2011/03/26
    • At: 09:48

    I need to achieve the following:

    1. A mobile webpage for android phone with two parts, the top section for a dynamically loaded image and the bottom section with the spinner.

    2. MYSQL db that contains the following:

    – Country Field
    – Country Image
    – City
    – City Image
    – Team
    – Team Image

    3. PHP server side script that interacts with the javascipt and spinner.

    4. Spinner with 3 sections:

    – Country
    – City
    – Team

    5. When a country is chosen the image of that country is shown above the spinner and the City section is populated with related cities from the MYSQL db via PHP.

    When a city is chosen then the city image is shown above the spinner and the team section is populated with related teams from the MYSQL db via PHP.

    Finally when a team is chosen then the team image is shown above the spinner.

    If a country is rechosen then the city and team sections are returned to blank and the country image is shown aboe the spinner.

    Can anyone help with this or similar example.

    Cheers

    Paul

    • Author: LouMazz
    • Posted on: 2011/03/29
    • At: 03:01

    Moving from jQtouch r159 to r165 changes Spinning Wheel behavior. In r159, all events except SW ‘cancel’ and ‘done’ are
    blocked while SW is on screen. In r165, everything is enabled even when SW is up. This causes all sorts of badness.

    Any chance of bringing SW in phase with r165? I’m stuck at
    r159 until I can figure a workaround.

    • Author: Ankur
    • Posted on: 2011/04/05
    • At: 12:15

    Hi,
    I need to execute a JavaScript statement(lets say an alert box) before invoking the methods for “Ok/Cancel” click. I can’t put this statement(alert box as per description) inside the methods specified against Ok/Cancel (due to business constraint).
    What changes will I have to make in JS to make it happen?
    Below is some snippet that i wrote but can’t check bcoz iPhone malfunctioning. Can anyone please confirm?

    tapUp: function (e) {
    this.tapCancel(e);

    if (e.currentTarget.id == ‘sw-cancel’) {
    alert(‘Cancel Clicked.’);
    this.cancelAction();
    } else {
    alert(‘Ok Clicked.’);
    this.doneAction();
    }
    this.close();
    },

    Thanks.

    • Author: NeelSvas
    • Posted on: 2011/04/12
    • At: 19:32

    Hi,
    I am using the spinningwheel on a mobile iPhone jQTouch offline App; when I clear the cache and start my application
    all goes well (of course after all components of the App: css, js,
    html, images etc have been loaded) including the spinningwheel; But if I close the app and reopen it again (all is offline) then the spinningwheel stops functionning and the console sends a js error saying that the variable SpinningWheel
    is undefined. Any idea of what might be causing this?
    Please help; and thanks in advance.

    • Author: Martin Cosgrave
    • Posted on: 2011/04/13
    • At: 15:07

    Just to let you know, this plugin works well with PhoneGap on Android, although you have to do some work to get the on screen keyboard out of the way, here’s an example of how: http://wiki.phonegap.com/w/page/27915465/How-to-show-and-hide-soft-keyboard-in-Android

    • Author: NeelSvas
    • Posted on: 2011/04/13
    • At: 18:41

    Hi again,
    As I mentioned, my app on iPhone as a WebApp works perfect as long as its not off line (i.e without cache.manifest); Yet, when
    the manifest is added to the tag and the app is loaded for the 1st time it will still work perfectly. But once I add to the iPhone HomeScreen, quit the app, and then inter it through the homeScreen Icon then the SpinningWheeel will no longer work
    giving the console error message : Referrence Error : Can’t find variable : SpinningWheel when it goes to create a dateTime Picker. The only thing I would think of is that it can not coexiste with jQTouch once Offline. Put differently; Did any one manage to make it work within an offline webApp that uses jQtouch without PhoneGap? Knowing that I’m using the lates jQTouch with the #jqt wrapper etc.
    Did Any one have such a problem and how did he solve it?
    thanks to all for their contribution; any example could help.

  • very strange. have you tried by placing the spinningwheel script into a namespace (function(){})(); ?
    Of course you have to expose public methods

    • Author: s.kris
    • Posted on: 2011/04/14
    • At: 08:03

    Has anyone managed to get the onscreen keyboard out of the way on the iPhone? blur() succeeds but makes the spinning render oddly and not responding to touch

    • Author: NeelSvas
    • Posted on: 2011/04/14
    • At: 15:52

    to hide the kyboard just add the following function call hideKeyBoard() to your javascript just before the SpinningWheel.Open() function call.

    and here is the function :
    function hideKeyBoard() {
    window.setTimeout( function() {
    $(‘:focus’).blur(); //hide kyboard
    }, 5);
    }

    For Matteo Spinelli : I did not manage to make a namesapce
    for the SpinningWheel object yet; have you tried already and any code snippet could help; thanks in advance.

      • Author: s.kris
      • Posted on: 2011/04/18
      • At: 00:33

      I also found that if triggering this from an input field, making the input field readonly does the trick.

    • Author: NeelSvas
    • Posted on: 2011/04/14
    • At: 20:05

    Hi Matteo and all,

    I finally found my error; In fact I forgot to take away the variable :
    ?v=1.4 from the spinningWheel url which explains why it worked well online but not offline; In addition the wrapping as an object within the script spinningwheel.js in the statement :
    var SpinningWheel = { ….} had no conflict with jQTouch and I do not need a special nameSapce for it niether; Hope this could help you all. One final thing for this fantastic extension is that on an iPhone I have the sound effects scrolling a slot but not on the iPad; Any Idea?

    • glad you sorted it out. what sound file are you using? m4a is your best bet.

    • Author: Paul
    • Posted on: 2011/04/20
    • At: 15:25

    Hi,

    I have two questions for someone to help and provide guidance and direction:

    1. Is it possible to dyanmically populate three wheel from a MYSQL DB.

    2. Is it possible to have the wheel choices dependant / Chain selected etc like the example below:

    http://bonrouge.com/~chain_select_ajax

    Any guidance on how to approach the dependency would be great.

    • Author: Roberto
    • Posted on: 2011/04/21
    • At: 23:30

    Hi,

    How can I make the Spining Wheel appear automatically?

    I am unable to make the Spinning Wheel function when it is not launched specifically by clicking manually a link.

    I tried triggering the launch programmatically upon the app’s launch, as well as faking a click. In both cases the Wheel is correctly displayed, but the slots do not spin.

    How can I make the Spining Wheel appear automatically?

    Thanks.

    • as soon as the page is ready, you can call it whenever you want. I can’t see the problem here.

      • Author: Roberto
      • Posted on: 2011/04/22
      • At: 10:14

      Thank you Matteo.

      If I take your example and trigger swExample() on “deviceready” the slots won’t spin. The wheel is displayed, but the reels don’t move.

      I hope you can help.

      • Author: Roberto
      • Posted on: 2011/04/22
      • At: 11:03

      Oh, I found the problem.

      I was changing the placement of the SW from

      document.body.appendChild(div)
      to
      document.getElementById(‘SW_page’).appendChild(div)

      That seems to be messing up things. Is there a solution to display SW in a specific element?

      Thank you for your time.

    • Author: Roberto
    • Posted on: 2011/04/22
    • At: 02:22

    Hi,

    Is it possible to trigger the spinning programmatically?

    (I am trying to make a slot machine).

    Thank you for your help.

    Roberto

    • Author: Paul
    • Posted on: 2011/04/23
    • At: 01:34

    Why ????

    Is it that other posts get answer but mine do not, there must be someone who can provide some guidance:

    - Is it possible to have the wheel choices dependant / chain selected like with the combobox example below:

    http://bonrouge.com/~chain_select_ajax

    Any advice would be welcomed

    • Your question is a bit complex for a quick reply here. Linking slots each other is feasible, but you need a custom code.

    • Author: Paul
    • Posted on: 2011/04/24
    • At: 10:09

    Thanks for responding much appreciated……..how would you approach it?

    I assume that the information is stored in a mutli dimensional array and the slot movement tis the trigger.

    How do you distinquish each slot as separate triggers?

    Cheers

    • Author: Andre Natal
    • Posted on: 2011/04/26
    • At: 06:07

    It is possible to maintain the picker always shown and enabled on a div, without need to open/close it ?

    • Author: Roberto
    • Posted on: 2011/05/04
    • At: 17:25

    Hi Matteo,

    I am using your Spinwheel in an app made with PhoneGap.

    When I use the xCode Simulator the SW is displayed correctly.

    But when I display the app on my actual device iPhone4/iOS4 the SW is formatted incorrectly. Only the list items of one column are displayed and that across the whole screen, the other 2 slots are not visible, nor is all the visual formatting…

    Any idea what can cause this rendering difference between the device and the simulator?

    Thanks,
    Roberto

      • Author: Roberto
      • Posted on: 2011/05/04
      • At: 17:51

      I have been doing a few tests and the faulty rendering on the device seems to ne due to the absence of the SW CSS styling.

      I got the same rendering on the Simulator when I do not load the CSS file…

      What could cause the device not to load that file or not use it?

    • Author: Scott
    • Posted on: 2011/05/08
    • At: 20:35

    Anyone get this to work using JQuery Mobile and PhoneGap? Seems like it doesn’t want to cooperate for some reason.

      • Author: Jon
      • Posted on: 2011/06/06
      • At: 10:48

      Hi Scott. I have it working well in jQuery Mobile (1.0a4.1 with jQuery 1.6.1) and PhoneGap 0.9.5.1. Admittedly only tried it on iOS but it works well in simulator and real iPhone (3GS and 4). One consideration: include the scripts on every physical HTML page, otherwise I’ve found some occasions where a user goes from an internal page to an “external” page (i.e. one without nested “pages” in divs), the spinner stops working.

    • Author: Scott
    • Posted on: 2011/05/10
    • At: 03:05

    It would be awesome if in the next version there was some way to put it in debug mode or something, so that it could be tested in a browser on a laptop/desktop and respond to clicks instead of swipe/touch events.

    • Author: abyss
    • Posted on: 2011/05/10
    • At: 20:02

    hi,
    i need to put the value of the weel in asp .net form. i wrote this:
    function done() {
    var results = SpinningWheel.getSelectedValues();
    document.getElementById(‘data’).value = results.keys.join(‘/’);
    }

    if i remove runat=server the weel put the value in the form but my asp page don’t read it. whith the parameter runat=server the weel don’t put the value in the form.
    somebody can help me.

      • Author: abyss
      • Posted on: 2011/05/10
      • At: 20:04

      ops i forgot the form:

      • Author: abyss
      • Posted on: 2011/05/10
      • At: 20:06

      sorry but the page read my html as code of page so i have removed
      FORM INPUT id=”data” runat=”server” value=”" /FORM

    • Author: Jack
    • Posted on: 2011/05/16
    • At: 21:34

    Hi All. Is ther a way to pipe the “result” into a text field as opposed to a paragraph? TIA.

      • Author: Jon
      • Posted on: 2011/06/03
      • At: 12:54

      Jack – this is what I do:

      function timeDone() {
      var results = SpinningWheel.getSelectedValues();
      document.getElementById(‘txtTime’).value = results.values.join(‘:’);
      }

      As you can see, my text field in this instance is called txtTime. For each text field, I create a different ‘done’ function, specifying the HTML control I want the selected results to go to.

    • Author: Dan
    • Posted on: 2011/05/25
    • At: 18:39

    I’m using your script with jQTouch 1.4.2
    I added following lines to my own css file to make it work:

    #sw-wrapper { display: block; min-height: 0 !important; }
    #sw-slots ul { font: normal normal bold 16px/normal Helvetica; color: black; border: none; }
    #sw-slots ul li { color: black; background-image: none; border: none; height:24px !important;}

    The line height was about two times too high, now it looks ok.
    Maybe somebody else can use this…
    Sorry for my bad english ;)

    • Author: Horst
    • Posted on: 2011/05/31
    • At: 15:26

    Thanks a lot for your great script.

    • Author: Wallace
    • Posted on: 2011/06/01
    • At: 11:25

    Hello, thanks for this post. It is really great!
    I have a question here, how to set the date time to now when user open this spinning-wheel? Thank you.

      • Author: Jon
      • Posted on: 2011/06/03
      • At: 12:51

      Wallace – setting date time to now is like so:

      var now = new Date();
      var days= {};
      var months= {};
      var years= {};
      var hours = {};
      var minutes= {};

      SpinningWheel.addSlot(days, ”, now.getDay());
      SpinningWheel.addSlot(months, ”, now.getMonth());
      SpinningWheel.addSlot(years, ”, now.getFullYear());
      SpinningWheel.addSlot(hours, ”, now.getHours());
      SpinningWheel.addSlot(minutes, ”, now.getMinutes());

    • Author: Jon
    • Posted on: 2011/06/03
    • At: 12:48

    This is absolutely brilliant, thank you!

    Two questions: I have two spinners, one has month & year – I need year to be displayed as last two digits (i.e 11 instead of 2011) but so far everything I’ve tried doesn’t work.

    Secondly, my other spinner has hours and minutes. My minutes are manually specified in 5 minute intervals (00, 05, 10, 15, etc). How can I round the now.Minutes to the nearest 5 minute interval?

    Thanks again!

    • Author: Horst
    • Posted on: 2011/06/03
    • At: 20:25

    I have found a little problem on android: When spinning the wheel very fast, the touch event go to the page behind the wheel.
    Very fast means: Put the finger an bottom, move some pixels up, take finger from screen and repeat it very fast 3 or more times.
    When the page is longer than it is scrolling up.
    I have tested on a htc desire and a zte blade. On the blade it is more easy to show, because it is slower.
    Anybody else with this problem?

    A scrolling page is not a big problem. I can simply fix it. But when buttons behind the whell it will be activated.

    • Author: Horst
    • Posted on: 2011/06/06
    • At: 16:39

    @Matteo: I have made a version for iOS Retina and Android HD devices. Are you intressted in the changes (not much) or is it ok for you, when i post it in the phonegap community?

    • the script would need a complete rewrite, it can be actually done without pictures, but if you have updates, I’ll be glad to review your code. Also feel free to post the code wherever you want (just keep the license intact).

    • Author: Horst
    • Posted on: 2011/06/07
    • At: 17:34

    @Matteo: Please look here
    http://www.klier.net/js-spinning-wheel.html
    But i wouldn’t call it “update” ;-)

    • Author: Sergey
    • Posted on: 2011/06/09
    • At: 15:34

    +1