selectBoxIt with jQuery Mobile Themeroller

[chopperbilly]

Hi Greg, If I do the following:

newMenu = $("select#menuSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt");

the select box appears to have some theming, but it is not the theme I set in the HTML select box code, e.g.:

var selectMenu1 = ''

• '
Select action' .... etc

In the (index.html) page, I have:

<link rel="stylesheet" href="MadcapMobileThemes3.min.css" type="text/css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" type="text/css" />

I would like to be able to use a selected theme from that, e.g. "c" as above; (I actually have a variable there so the user can select a theme..

Any thoughts?

chopperbilly commented 11 years ago

the above seems to have truncated my text it should be var selectMenu1 = '<select name="menuSelect1" id="menuSelect1" data-theme="'c" ... etc

gfranko commented 11 years ago

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

chopperbilly commented 11 years ago

Hi Greg,

Where do I get the new selectboxit.js code from, or do I have to edit the existing file?

Thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Saturday, December 15, 2012 3:03 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

chopperbilly commented 11 years ago

Thanks Greg, works fine now. However, I'm still trying to figure out how to cause disabled items to show e.g. "greyed out".

Any thoughts?

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Monday, December 17, 2012 10:28 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

@chopperbilly I just added support for the disableOption() method. This allows you to disable single drop down options. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option
selectBox.disableOption(3);

Let me know if you have any questions.

chopperbilly commented 11 years ago

Hi Greg, (1) that works nicely, but I need to include jquery-ui-1.9.2.custom.min.css to get the class "ui-state-disabled". That seems to cause some menu scrolling overwrite/option positioning undesirable effects, but is livable with.

(2) Could you please advise the best way to re-enable disabled options?

Many thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Monday, December 17, 2012 5:48 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added support for the disableOption() method. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option selectBox.disableOption(3); Let me know if you have any questions.

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

I will see if there is a solution for disabling options with the jquery mobile theme (the ui-state-disabled class name should not be applied for every theme, so I will have to fix this), and I will also create an enableOption() method tonight. I will respond here when it is added.

gfranko commented 11 years ago

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if this fixes your issues!

chopperbilly commented 11 years ago

Hi Greg,

Wonderful! It works like a charm.

I have tested on Android, and will now test on iPhone and iPad, but generally if it works on Android it will work on the others (at least as far as selectBoxIt goes).

I will keep you posted if anything else. Thank you so much for your prompt work.

Next for you for selectBoxIt??? --- (!!!) - Multiple select facility???? (Currently I'm using the dreadful jQuery mobile multiple select box, which has shine-through problems if there are sufficient options that it creates a psuedo new page, is slow, and not at all up to the standard of the rest of jQuery mobile).

Kind regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, December 19, 2012 6:55 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if you this fixes your issues!

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

Awesome! I'm glad I could help out.

In regards to multi-select select boxes, I don't think SelectBoxIt will support them. Adding multi-select support would add considerable complexity, and SelectBoxIt wasn't built for it. If enough people reach out to me asking for multi-select support, then I will consider it, but until then it will not be supported.

chopperbilly commented 11 years ago

Hi Greg,

I'm now trying to "selectBoxIt" a number of other select boxes, but I need to be able to add options sometimes, after the select box is 'selectBoxIt-ed".

My code looks like e.g.:

for (var i = 0; i < allNameNumsArrayKeys.length; i++) { if (!farmLoginBool) $('#nameNumberSelect1').append('

' + allNameNumsArrayDescs[i] + ''); else if (allNameNumsArrayKeys[i] == username) { $('#nameNumberSelect1').append('' + allNameNumsArrayDescs[i] + ''); break; } } $('#nameNumberSelect1').append('

'); //////// $('#nameNumberSelect1').selectmenu('refresh'); nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt"); nameNumSelect.data("selectBoxit").refresh();

What am I doing wrong?

Thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, December 19, 2012 9:46 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Awesome! I'm glad I could help out.

In regards to multi-select select boxes, I don't think SelectBoxIt will support them. Adding multi-select support would add considerable complexity, and SelectBoxIt wasn't built for it. If enough people reach out to me asking for multi-select support, then I will consider it, but until then it will not be supported.

— Reply to this email directly or view it on GitHub.

[chopperbilly]

the above seems to have truncated my text it should be var selectMenu1 = '<select name="menuSelect1" id="menuSelect1" data-theme="'c" ... etc

[gfranko]

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

[chopperbilly]

Hi Greg,

Where do I get the new selectboxit.js code from, or do I have to edit the existing file?

Thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Saturday, December 15, 2012 3:03 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

— Reply to this email directly or view it on GitHub.

[gfranko]

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

[chopperbilly]

Thanks Greg, works fine now. However, I'm still trying to figure out how to cause disabled items to show e.g. "greyed out".

Any thoughts?

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Monday, December 17, 2012 10:28 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

— Reply to this email directly or view it on GitHub.

[gfranko]

@chopperbilly I just added support for the disableOption() method. This allows you to disable single drop down options. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option
selectBox.disableOption(3);

Let me know if you have any questions.

[chopperbilly]

Hi Greg, (1) that works nicely, but I need to include jquery-ui-1.9.2.custom.min.css to get the class "ui-state-disabled". That seems to cause some menu scrolling overwrite/option positioning undesirable effects, but is livable with.

(2) Could you please advise the best way to re-enable disabled options?

Many thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Monday, December 17, 2012 5:48 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added support for the disableOption() method. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option selectBox.disableOption(3); Let me know if you have any questions.

— Reply to this email directly or view it on GitHub.

[gfranko]

I will see if there is a solution for disabling options with the jquery mobile theme (the ui-state-disabled class name should not be applied for every theme, so I will have to fix this), and I will also create an enableOption() method tonight. I will respond here when it is added.

[gfranko]

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if this fixes your issues!

[chopperbilly]

Hi Greg,

Wonderful! It works like a charm.

I have tested on Android, and will now test on iPhone and iPad, but generally if it works on Android it will work on the others (at least as far as selectBoxIt goes).

I will keep you posted if anything else. Thank you so much for your prompt work.

Next for you for selectBoxIt??? --- (!!!) - Multiple select facility???? (Currently I'm using the dreadful jQuery mobile multiple select box, which has shine-through problems if there are sufficient options that it creates a psuedo new page, is slow, and not at all up to the standard of the rest of jQuery mobile).

Kind regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, December 19, 2012 6:55 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if you this fixes your issues!

— Reply to this email directly or view it on GitHub.

[gfranko]

Awesome! I'm glad I could help out.

In regards to multi-select select boxes, I don't think SelectBoxIt will support them. Adding multi-select support would add considerable complexity, and SelectBoxIt wasn't built for it. If enough people reach out to me asking for multi-select support, then I will consider it, but until then it will not be supported.

[chopperbilly]

Hi Greg,

I'm now trying to "selectBoxIt" a number of other select boxes, but I need to be able to add options sometimes, after the select box is 'selectBoxIt-ed".

My code looks like e.g.:

for (var i = 0; i < allNameNumsArrayKeys.length; i++) { if (!farmLoginBool) $('#nameNumberSelect1').append('

' + allNameNumsArrayDescs[i] + ''); else if (allNameNumsArrayKeys[i] == username) { $('#nameNumberSelect1').append('' + allNameNumsArrayDescs[i] + ''); break; } } $('#nameNumberSelect1').append('

[gfranko]

Here is a jsfiddle that shows how to dynamically create a select box with options, and then how to add an additional option(s) to the select box after it is created. Let me know if you have any questions!

[chopperbilly]

Hi Greg,

unfortunately I get the message "Uncaught type error: Object [object object] has no method 'append' ... at ... line 623 --- see bold test code below below:

Early on in the page: nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt");

then later when required: . . . setTimeout(function() { nameNumSelect.append($("", { "text" : " hullo from Bill", "value" : " Bill" })).data("selectBoxIt").refresh(); }, 3000);

I would not need to use the set Timeout in the final code, but just thought I'd do exctly what you show in the jsFiddle.

Your example works OK in Chrome, but I can't get it to work on jQuery Mobile. Remember I am not using the jQuery UI stuff, as your earlier mods to use jQuery Mobile Themeroller obviated that..

Thanks in anticipation, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, December 20, 2012 4:44 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Here is a jsfiddle that shows how to dynamically create a select box with options, and then how to add additional an additional option(s) to the select box after it is created. Let me know if you have any questions!

— Reply to this email directly or view it on GitHub.

[gfranko]

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt") method when you are first calling the selectBoxIt plugin. Instead, do this:

nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"});

Your code should no longer complain about the append() method not being there. Let me know if you have any more questions and Merry Christmas =)

Greg

[chopperbilly]

Hi Greg, and Merry Christmas to you also.

I'm off work until the 7th January, so will get back to you (if necessary) when I've done what you say to do.

All the best,

Bill.

On 26 December 2012 14:14, Greg Franko notifications@github.com wrote:

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt")method when you are first calling the selectBoxIt plugin. Instead, do this:

nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

Your code should no longer complain about the append() method not being there. Let me know if you have any more questions and Merry Christmas =)

Greg

— Reply to this email directly or view it on GitHubhttps://github.com/gfranko/jquery.selectBoxIt.js/issues/68#issuecomment-11679419.

[chopperbilly]

Hi Greg, hope you had a merry and safe Christmas and new Year.

Back at work now, not sure if you are though - hope so ....

The fix you gave me to stop the message about the append() method not being there fixed that one. BUT - as soon as i do a refresh, the select box disappears completely - bummer! (Note - if I don't do the refresh, the select box ix still there. but does not have the added options)

Here's my code: (changed variable name from nameNumSelect to nameNumSelectBoxIt for diagnostic purposes)

nameNumSelectBoxIt = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

. . .

// selectBoxIt approach

  for (var i = 0; i < allNameNumsArrayKeys.length; i++)
    {
    if (!farmLoginBool)
      {
      nameNumSelectBoxIt.append($("<option >", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]}));
      }
    else if (allNameNumsArrayKeys[i] == username)
      {
      nameNumSelectBoxIt.append($("<option selected />", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]}));
      break;
      }
    }
nameNumSelectBoxIt.data("selectBoxIt").refresh(); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! <<<<<<<< This kills the select box.

Do I need to do something else to re-display the select box??

Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, December 26, 2012 2:14 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt") method when you are first calling the selectBoxIt plugin. Instead, do this:

nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

Your code should no longer complain about the append() method not being there. Let me know if you have any more questions and Merry Christmas =)

Greg

— Reply to this email directly or view it on GitHub.

[gfranko]

It looks like you are incorrectly adding a dynamic selected option. Below is how you would append a dynamic select box option that is selected

nameNumSelectBoxIt.append($("<option />", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"}));

Let me know if that works!

[chopperbilly]

Hi Greg,

Well - definately my error in that line - thank you! But - the refresh() still causes the select box to disappear, and not re-appear. (I am using Phonegap, Eclipse and testing on a Samsung Galaxy SIII (Android) )

Just by the way, that error line was not being run as I was running as an admin person and the "else" bit was being used. However, either way, it still fails.

Code is now:

for (var i = 0; i < allNameNumsArrayKeys.length; i++) { if (!farmLoginBool) { nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]})); } else if (allNameNumsArrayKeys[i] == username) { nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"})); break; } } //setTimeout(function() { nameNumSelectBoxIt.data("selectBoxIt").refresh();}, 2000); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Tried this just in case, but no good... nameNumSelectBoxIt.data("selectBoxIt").refresh();

Your jsFiddle works on Chrome, but not on my smartphone test system.

Thanks in anticipation!

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Monday, January 07, 2013 7:37 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

It looks like you are incorrectly adding a dynamic selected option. Below is how you would append a dynamic select box option that is selected

nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"})); Let me know if that works!

— Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

[chopperbilly]

No good Greg, still the same - refresh kills the select box and doesn't re-display it.

is there any diagnostic code that I could insert into your selectBoxIt.js that might help somehow?

(I tried inserting an alert into the refresh:function ........ code, but it didn't show - but this could be lack of knowledge on my part as to how to do this into a minified file.)

the following is the correct way to call the refresh function as follows, isn't it?

nameNumSelectBoxIt.data("selectBoxIt").refresh();

Regards Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, January 08, 2013 9:15 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

my humblemost apoplexies - your latest selectBoxIt.js DOES fix the problem - I had not changed the name of the .js file to be included, and it was using the earlier one.

Once again, I am sorry for my blunder.

But I'll keep on truckin', who knows, there may yet be something else to discover!

Many thanks, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, January 08, 2013 9:15 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

— Reply to this email directly or view it on GitHub.

[gfranko]

Awesome, I'm glad it works for you now! And please continue to report any bugs/new features, because you are only making the project better =)

[chopperbilly]

Hi Greg,

apropos your wish for more work to keep you up even more at night ;=) here's a thought:

Our testers have mentioned that when a (selectBoxIt) select box is used as a menu, and there are more items than will show in the allocated height, it would be useful to have some sort of a scroll bar indication that more items are available - perhaps like the iScroll scroll bar (thin line on the right-hand-side of the box) or a little down-arrow attached to the right of the last option.

I will leave you with this humbly offered thought ...

All the best, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 10, 2013 6:53 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Awesome, I'm glad it works for you now! And please continue to report any bugs/new features, because you are only making the project better =)

— Reply to this email directly or view it on GitHub.

[gfranko]

Good feedback! I will definitely look into having a robust and consistent custom scroll bar (potentially using iScroll). I'll let you know when that happens (probably at least a few weeks).

[chopperbilly]

Hi Greg, Sorry, couldn't stay away!

(Mobile again, as usual) ... Android: We notice that if a selectBoxIt-ed select box has more items than will fit in the designated height, and you need to scroll to see the others, then if there are disabled items among those and you scroll, the disabled items sometimes get shifted and overlayed on top of preceding items, leaving a gap where they would have been. Touch the select box and the correct display is restored. Also for some reason this select box and this select box only WILL NOT display selectBoxIt-ed on an iPhone (it displays the iPhone native select box just fine). (In the case of the iPhone I'm not sure if the disabled items have anything to do with it not displaying selectBoxIt-ed). ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 10, 2013 10:53 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Good feedback! I will definitely look into having a robust and consistent custom scroll bar (potentially using iScroll). I'll let you know when that happens (probably at least a few weeks).

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

Ignore last email, I clicked the send button by mistake.

Sorry, couldn't stay away!

(Mobile again, as usual) ... Android: We notice that if a selectBoxIt-ed select box has more items than will fit in the designated height, and you need to scroll to see the others, then if there are disabled items among those and you scroll, the disabled items sometimes get shifted and overlayed on top of preceding items, leaving a gap where they would have been. Touch the select box and the correct display is restored. Also for some reason this select box and this select box only WILL NOT display selectBoxIt-ed on an iPhone (it displays the iPhone native select box just fine).

FURTHER NOTES: (1) I have tried disabling an option on another selectBoxIt-ed select box, and it still works selectBoxIt-ed on an iPhone. (2) I note that in the case of the select box described as above, the options text shows in blue and can not be changed by my custom .css file, as follows:

menuSelect1SelectBoxIt, #menuSelect1SelectBoxItOptions {

width:240px;
max-height:150px;
min-width: 200px;
font: 16px Helvetica, Arial;
color:red; /\* This only works on the "button" (see below) (i.e. not-dropped-down select box - it DOES NOT work on the options !!!<<<<<<<<<<<<<<<<*/

}

/* Dropdown List Box Text _/

menuSelect1SelectBoxItText {

font: 16px Helvetica, Arial; color:red; /_ <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/ text-indent: 5px; line-height: 30px; overflow: hidden; float: left; white-space: nowrap;

}

nameNumberSelect1SelectBoxIt, #nameNumberSelect1SelectBoxItOptions,

farmNumberSelect1SelectBoxIt, #farmNumberSelect1SelectBoxItOptions {

width:115px; min-width: 115px; font: 16px Helvetica, Arial; color:red; /* this works on these select boxes, both on the "button" and on the select box options !!!!<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/ }

I'm not sure what the problem(s) is (are), and it may not be yours - but I'm stumped!!!

Regards Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 10, 2013 10:53 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Good feedback! I will definitely look into having a robust and consistent custom scroll bar (potentially using iScroll). I'll let you know when that happens (probably at least a few weeks).

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

(made this High priority so you didn't waste time on it)

I discovered why the one and only select box that had the options in blue did have them in blue - the colour (oops color for you) was taken from the Themeroller LINKS color!!!. I changed the Themeroller Content Body > Links color on a whim and hey presto, the select box now has the options in (black). So somehow the Themeroller setting for Links was overriding the color set in my custom css - why, I have no idea. Anyway, this may help someone else who strikes this problem.

My previous email re disabled options sometimes getting shifted and overlaying others if you scroll, still applies.

Just so I know what time it is where you are, where do you live??

We at work here seem to be neverendingly doing stuff on the "bleeding edge"....

Regards Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 10, 2013 10:53 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Good feedback! I will definitely look into having a robust and consistent custom scroll bar (potentially using iScroll). I'll let you know when that happens (probably at least a few weeks).

— Reply to this email directly or view it on GitHub.

[gfranko]

@chopperbilly For the mobile support, SelectBoxIt internally positions the original select box directly over the new drop down and set's an opacity of 0 to hide the original select box (and let the SelectBoxIt drop down be the only visible element). This means that whenever you interact with the drop down on a mobile device, you are actually interacting with the native select box. The issues you are seeing with disabled items on mobile are most likely mobile operating system bugs and not SelectBoxIt bugs. Until mobile OS's provide better support for select boxes (IOS6 is a start) there is not much we can do about it unfortunately.

I also live in the US (VA), so US Eastern Standard Time.

[chopperbilly]

Hi Greg,

Thanks for that. I guess yoou'll be sick of me by now!

I really do appreciate your very prompt responses and additions/fixes where appropriate, and look forward to the scroll bar, and Multiple select select boxes when you find time to get around to those.

Meanwhile i have fixed the problem where that specific select box mentioned in a previous email simply would not display selectBoxIt-ed on iPhones - it appears to be that I had to use 'data-role':"fieldcontain" instead of 'data-role':"content" for the select box container, although it worked OK on Android devices. At least that is what I ended up with, and don't have time to go backwards on code versions. I also ended up using the var name instead of the $('# ..id,,') for the container, but why !!@#$$%!!!. Very frustrating.

Kind regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 10, 2013 6:32 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly For the mobile support, SelectBoxIt internally positions the original select box directly over the new drop down and set's an opacity of 0 to hide the original select box (and let the SelectBoxIt drop down be the only visible element). This means that whenever you interact with the drop down on a mobile device, you are actually interacting with the native select box. The issues you are seeing with disabled items on mobile are most likely mobile operating system bugs and not SelectBoxIt bugs. Until mobile OS's provide better support for select boxes (IOS6 is a start) there is not much we can do about it unfortunately.

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg, I noticed v 2.9.9 was available, but when I try to use it (mobile device) none of the select boxes get selectBoxIt-ed.

Do I need to do something else use-wise, or shouldn't I be trying this version?

Regards, Bill.

[gfranko]

Do you have a public url that you could show me? Version 2.9.9 should be stable.

[chopperbilly]

No, We are still developing for iPhone and Android only. All I can say is that 2.6 works fine, but when I try 2.9.9 none of the select boxes on any page get converted. I'm well prepared to admit that I may not be doing something I should be, but the straight swap of the .js file simply doesn't work for me.

Sorry to be a nuisance!

Rgds Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 4:25 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Do you have a public url that you could show me? Version 2.9.9 should be stable.

— Reply to this email directly or view it on GitHub.

[gfranko]

Something new was added in v2.9.0 to only allow selectBoxIt to be called on a select box element. This could be your issue. Could you copy and paste how you are initially calling the plugin?

[chopperbilly]

OK, here's an example:

. . . $('', {'class':"ui-block-c", 'width':"27%", 'align':"right", 'html':" Contact type:  "}).appendTo(detailsGrid2); var contactTypeContainer = $('', {'class':"ui-block-d", 'width':"30%",'data-role':"controlgroup", 'data-mini':"true", 'display':"inline", 'id':"contactTypeContainer" }).appendTo(detailsGrid2); contactTypeSelect = ''

• '
Select';

for (var contactTypeKeyIndex = 0; contactTypeKeyIndex < fpContactTypesArrayKeys.length; contactTypeKeyIndex ++)
  {
  contactTypeSelect += '<option value="' + fpContactTypesArrayKeys[contactTypeKeyIndex] + '">' +  fpContactTypesArrayDescs[contactTypeKeyIndex] + '</option>';
  }
contactTypeSelect += '</select>';

$('#contactTypeContainer').append(contactTypeSelect);

. . then, later on: . historyItemDataPage.page(); historyItemDataPage.show();

. .
contactTypeSelectBoxIt = $("select#contactTypeSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt"); . .

Hope that helps.

Rgds Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 4:36 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Something new was added in v2.9.0 to only allow selectBoxIt to be called on a select box element. This could be your issue. Could you copy and paste how you are initially calling the plugin?

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

I just updated SelectBoxIt. Code you grab the latest code and test again?

chopperbilly commented 11 years ago

Hi Greg,

I did that, and no different; but I wonder if I am getting your updated version? Could you let me know again where to get it, and also maybe put in something like VERSION:"2.9.9.Bill" or maybe VERSION:"2.10.0" just so I know I've got the right one. ( I did see " References #94 - Updated select box check logic" )

Many Thanks, Bill.

P.S. I have to go to the doctor now, and it's 5 past 5 here so won't come back today. Here's hoping you can work your usual magic! ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 4:52 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I just updated SelectBoxIt. Code you grab the latest code and test again?

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

Unfortunately I'm not sure what the problem is, since everything is working for me. If you can provide any more details about what is happening (i.e. error message being thrown, etc), then I will definitely try to help.

chopperbilly commented 11 years ago

Hi Greg,

well, after loading the latest code I see that the opening page menu select box IS being "selectBoxIt-ed", and it and another select box disabled as below work correctly ON THAT FIRST PAGE, and no error is given:

On this first page (a menu page) initialisation, the following works fine:

nameNumSelectBoxIt = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}); nameNumSelectBoxIt.data("selectBoxIt").disable();

and later, after return to that page from some other page, when it should again be disabled after having been previously enabled:

nameNumSelectBoxIt.data("selectBoxIt").disable(); /////>>>>>>>>>>>>> works correctly, and the drop-down looks as it should if enabled again.

So that (opening page menu select box) is fine now.

BUT -

On subsequent pages, I think the select boxes ARE being "selectBoxIt-ed", because if I do the following:

... selectBoxIt various select boxes .... then ....

someSelectBoxIt.data("selectBoxIt").disable();

setTimeout('someSelectBoxIt.data("selectBoxIt").enable()' 5000);

the select box is disabled, then re-enabled after 5 seconds.

HOWEVER -

then it still displays the native version when touched. It is as if somehow the touch event has been trapped and your selectboxit.js code is not receiving the event ???? or something ....

Once again, version 2.6 works fine.

Can't think of any more info I can give you - perhaps an excuse for you to take a trip/ holiday to New Zealand???? - just joking. (Christchurch is where we are - temperature today getting to 31 deg C (87.8F)).

Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 7:01 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Unfortunately I'm not sure what the problem is, since everything is working for me. If you can provide any more details about what is happening (i.e. error message being thrown, etc), then I will definitely try to help.

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

Could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags

You will be able to find the SelectBoxIt JavaScript file by going to src/javascripts/jquery.selectBoxIt.min.js

You will be able to find the SelectBoxIt CSS file by going to src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

chopperbilly commented 11 years ago

Greg,

I'm not familiar with how to create a jsFiddle or jsBin - I would need instruction on that from somewhere - and it would have to be able to use jQuery Mobile.

Could you tell me how the selectboxit code knows to display the selectboxit type dropdown? Maybe I can edit the code and put in some alerts etc if you tell me what to do. Would that be an option??

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 10:21 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

— Reply to this email directly or view it on GitHub.

chopperbilly commented 11 years ago

Hi Greg, also, on the iPhone, a multiple select box (using the jQuery version) can be opened but not closed. It works and can be closed on the Android device (Samsung Galaxy SIII) I thought that might help you???

Are you working late- what is the time over there???

Rgds Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 10:21 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

I'm just leaving work now. It's 5:29pm here.

chopperbilly commented 11 years ago

Hi Greg,

well, I've given up trying to find out why version 2.9.9 will only "selectBoxIt" one select box on Android etc. If anyone else comes up with this problem, could you let me know if you fix it. I have reverted back to 2.6.

However on 2.6. I do have a problem on Android only (Samsung Galaxy III) (iPhone OK!) wherin on one screen if a select box is triggered and an option is selected that has another select box below that option, the option touched is in fact correctly selected but it triggers the dropdown of the select box below.

Do you have any thoughts on this??

Any help appreciated -and I'm well prepared to insert any alerts or whatever into selectboxit.js you may want me to do in order to help debug.

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 11:30 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I'm just leaving work now. It's 5:29pm here.

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website (which uses v2.9.9) on my phone, everything works for me. Could you test the SelectBoxIt website on your phone as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

chopperbilly commented 11 years ago

OK, will do. I'll let you know what happens. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, February 05, 2013 2:26 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

— Reply to this email directly or view it on GitHub.

chopperbilly commented 11 years ago

Hi Greg,

Here is the news:

2.7 works OK.

2.8 comes up with the following error: 02-05 15:32:47.349: E/Web Console(22729): Uncaught TypeError: Cannot call method 'find' of undefined at file:///android_asset/www/jquery.selectBoxIt28.js:2667

2.9 won't selectboxit more than one select box (and that is one of two on my "menu" page, and none of the several others on other pages..

The selectboxit website shows exactly the same symptoms on both an Android (Samsung Galaxy III and an iPhone 4s with iOS 6) - that is the very first slectboxit example shows the native select box on both machines..

The thot plickens!!

Over to you. Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, February 05, 2013 2:26 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

— Reply to this email directly or view it on GitHub.

gfranko commented 11 years ago

Hey Bill,

I'm not sure if this will fix your issue, but I upgraded the code again, so if you could please try the new code that would be great!

chopperbilly commented 11 years ago

Hi Greg,

Well, some bad news, some good news:

(1) The bad: The latest version still will not convert the selectboxes (except for the very first one, which when touched displays the list downwards, instead of upwards as previous versions did.) All others on all other pages display the native menu on the Android device, which is what I do most of the testing/development on. Further: If I try to use the 2.9 .css file, all pages are really screwed up - select boxes partially created, in the wrong places, won't scroll, basically unuseable. Sorry about that!!! Further: When returning to the startup menu page, I get an error "...has no method 'data'. The code lines, with the one used for 2.6, are below:

// newMenu.data("selectBoxIt").selectOption(0); // No - already created, so go direct newMenu.selectOption(0); <<<<<<<<<<<<<!!!!!!!!!!!!!!!!<<<<<<<<<<<< This is what works for 2.6.

(2) The good: The problem I had with version 2.6 on the Android device (Samsung Galaxy III) running Android 4.04, where select box options over another select box would click the box below, is fixed (albeit with sometimes erratic operation) by converting the creation of the select boxes to be entirely jQuery-ised, as follows:

.

(ORIGINAL, and un-modified, code: var detailsGrid4 = $('

', {'class':"ui-grid-c", 'data-role':"fieldcontain" }).appendTo(historyItemContainer); $('', {'class':"ui-block-a", 'width':"22%", 'align':"right", 'html':" Staff:  ", 'for':"staffField"}).appendTo(detailsGrid4); staffText = $('

', {'class':"ui-block-b", 'width':"20%", 'type':"text", 'name':"staffField", 'value' : "" + username }).appendTo(detailsGrid4);

// Products
$('<label>', {'class':"ui-block-c", 'width':"27%", 'align':"right", 'html':"Product:&nbsp;&nbsp;"}).appendTo(detailsGrid4);
var productTypeContainer = $('<div>', {'class':"ui-block-d", 'width':"30%", 'data-role':"controlgroup", 'data-mini':"true", 'display':"inline", 'id':"ProductTypeContainer" }).appendTo(detailsGrid4);

)

NEXT LINE and following changed to that shown in bold - i.e. addition of $( ...: ////productTypeSelect = ''

productTypeSelect = $('<select name="ProductTypeSelect1" id="ProductTypeSelect1" class="ui-block-d" data-role="none"  data-theme="' + themeID + '" data-mini="true" onChange="setSelectedProductType(this)">');
productTypeSelect.append($('<option value="Select product" disabled="disabled" data-placeholder="true">Select</option>'));

for (var productTypeKeyIndex = 0; productTypeKeyIndex < fpProductsArrayKeys.length; productTypeKeyIndex ++)
  {
  productTypeSelect.append($('<option value="' + fpProductsArrayKeys[productTypeKeyIndex] + '">' +  fpProductsArrayDescs[productTypeKeyIndex] + '</option>'));
  }
productTypeSelect.append($('</select>'));

$('#ProductTypeContainer').append(productTypeSelect);

$('<br><br>').appendTo(detailsGrid4);

(Code later to selectBoxIt-ise the select boxes.)

The code before changes as above worked correctly on the iPhone.

My knowledge of the inticacies of jQuery, HTML5 is obviously nowhere near that of yours, so if you see me doing something undesirable or just plain wrong, please let me know.

PS - do you have an Android devie that you could try stuff on?

Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Sunday, February 10, 2013 8:51 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

I'm not sure if this will fix your issue, but I upgraded the code again, so if you could please try the new code that would be great!

— Reply to this email directly or view it on GitHub..

gfranko commented 11 years ago

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

Next

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[gfranko]

I just updated SelectBoxIt. Code you grab the latest code and test again?

[chopperbilly]

Hi Greg,

I did that, and no different; but I wonder if I am getting your updated version? Could you let me know again where to get it, and also maybe put in something like VERSION:"2.9.9.Bill" or maybe VERSION:"2.10.0" just so I know I've got the right one. ( I did see " References #94 - Updated select box check logic" )

Many Thanks, Bill.

P.S. I have to go to the doctor now, and it's 5 past 5 here so won't come back today. Here's hoping you can work your usual magic! ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 4:52 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I just updated SelectBoxIt. Code you grab the latest code and test again?

— Reply to this email directly or view it on GitHub.

[gfranko]

Unfortunately I'm not sure what the problem is, since everything is working for me. If you can provide any more details about what is happening (i.e. error message being thrown, etc), then I will definitely try to help.

[chopperbilly]

Hi Greg,

well, after loading the latest code I see that the opening page menu select box IS being "selectBoxIt-ed", and it and another select box disabled as below work correctly ON THAT FIRST PAGE, and no error is given:

On this first page (a menu page) initialisation, the following works fine:

nameNumSelectBoxIt = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}); nameNumSelectBoxIt.data("selectBoxIt").disable();

and later, after return to that page from some other page, when it should again be disabled after having been previously enabled:

nameNumSelectBoxIt.data("selectBoxIt").disable(); /////>>>>>>>>>>>>> works correctly, and the drop-down looks as it should if enabled again.

So that (opening page menu select box) is fine now.

BUT -

On subsequent pages, I think the select boxes ARE being "selectBoxIt-ed", because if I do the following:

... selectBoxIt various select boxes .... then ....

someSelectBoxIt.data("selectBoxIt").disable();

setTimeout('someSelectBoxIt.data("selectBoxIt").enable()' 5000);

the select box is disabled, then re-enabled after 5 seconds.

HOWEVER -

then it still displays the native version when touched. It is as if somehow the touch event has been trapped and your selectboxit.js code is not receiving the event ???? or something ....

Once again, version 2.6 works fine.

Can't think of any more info I can give you - perhaps an excuse for you to take a trip/ holiday to New Zealand???? - just joking. (Christchurch is where we are - temperature today getting to 31 deg C (87.8F)).

Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Wednesday, January 30, 2013 7:01 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Unfortunately I'm not sure what the problem is, since everything is working for me. If you can provide any more details about what is happening (i.e. error message being thrown, etc), then I will definitely try to help.

— Reply to this email directly or view it on GitHub.

[gfranko]

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

Could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags

You will be able to find the SelectBoxIt JavaScript file by going to src/javascripts/jquery.selectBoxIt.min.js

You will be able to find the SelectBoxIt CSS file by going to src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

[chopperbilly]

Greg,

I'm not familiar with how to create a jsFiddle or jsBin - I would need instruction on that from somewhere - and it would have to be able to use jQuery Mobile.

Could you tell me how the selectboxit code knows to display the selectboxit type dropdown? Maybe I can edit the code and put in some alerts etc if you tell me what to do. Would that be an option??

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 10:21 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg, also, on the iPhone, a multiple select box (using the jQuery version) can be opened but not closed. It works and can be closed on the Android device (Samsung Galaxy SIII) I thought that might help you???

Are you working late- what is the time over there???

Rgds Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 10:21 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

— Reply to this email directly or view it on GitHub.

[gfranko]

I'm just leaving work now. It's 5:29pm here.

[chopperbilly]

Hi Greg,

well, I've given up trying to find out why version 2.9.9 will only "selectBoxIt" one select box on Android etc. If anyone else comes up with this problem, could you let me know if you fix it. I have reverted back to 2.6.

However on 2.6. I do have a problem on Android only (Samsung Galaxy III) (iPhone OK!) wherin on one screen if a select box is triggered and an option is selected that has another select box below that option, the option touched is in fact correctly selected but it triggers the dropdown of the select box below.

Do you have any thoughts on this??

Any help appreciated -and I'm well prepared to insert any alerts or whatever into selectboxit.js you may want me to do in order to help debug.

Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Thursday, January 31, 2013 11:30 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I'm just leaving work now. It's 5:29pm here.

— Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website (which uses v2.9.9) on my phone, everything works for me. Could you test the SelectBoxIt website on your phone as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

[chopperbilly]

OK, will do. I'll let you know what happens. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, February 05, 2013 2:26 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

— Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

Here is the news:

2.7 works OK.

2.8 comes up with the following error: 02-05 15:32:47.349: E/Web Console(22729): Uncaught TypeError: Cannot call method 'find' of undefined at file:///android_asset/www/jquery.selectBoxIt28.js:2667

2.9 won't selectboxit more than one select box (and that is one of two on my "menu" page, and none of the several others on other pages..

The selectboxit website shows exactly the same symptoms on both an Android (Samsung Galaxy III and an iPhone 4s with iOS 6) - that is the very first slectboxit example shows the native select box on both machines..

The thot plickens!!

Over to you. Regards, Bill.

----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Tuesday, February 05, 2013 2:26 PM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

— Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill,

I'm not sure if this will fix your issue, but I upgraded the code again, so if you could please try the new code that would be great!

[chopperbilly]

Hi Greg,

Well, some bad news, some good news:

(1) The bad: The latest version still will not convert the selectboxes (except for the very first one, which when touched displays the list downwards, instead of upwards as previous versions did.) All others on all other pages display the native menu on the Android device, which is what I do most of the testing/development on. Further: If I try to use the 2.9 .css file, all pages are really screwed up - select boxes partially created, in the wrong places, won't scroll, basically unuseable. Sorry about that!!! Further: When returning to the startup menu page, I get an error "...has no method 'data'. The code lines, with the one used for 2.6, are below:

// newMenu.data("selectBoxIt").selectOption(0); // No - already created, so go direct newMenu.selectOption(0); <<<<<<<<<<<<<!!!!!!!!!!!!!!!!<<<<<<<<<<<< This is what works for 2.6.

(2) The good: The problem I had with version 2.6 on the Android device (Samsung Galaxy III) running Android 4.04, where select box options over another select box would click the box below, is fixed (albeit with sometimes erratic operation) by converting the creation of the select boxes to be entirely jQuery-ised, as follows:

.

(ORIGINAL, and un-modified, code: var detailsGrid4 = $('

', {'class':"ui-grid-c", 'data-role':"fieldcontain" }).appendTo(historyItemContainer); $('', {'class':"ui-block-a", 'width':"22%", 'align':"right", 'html':" Staff:  ", 'for':"staffField"}).appendTo(detailsGrid4); staffText = $('

[gfranko]

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.