Android 2.3 Issue (again?)

[entilza5]

Hi this is my first post with github.

I am using your slider in a theme I purchased and I have the same issue as #205. It was recently closed so I could not reply to that anymore.

Here is an example of our website: www.artcraftkitchens.com/beta

When the screen is reduced the menu switches to a select style menu. Here on my LG phone I cannot click on the menu. It is the default android browser and I realize it has some bugs but I would like to tackle this.

My LG phone is 2.3.6.

Even the website: https://www.manymo.com/emulators was able to reproduce the same problem. Other pages work fine once off the homepage which has the slider.

Based on your last comment to #205 is this an issue with the responsive menu and I should be looking into a solution there?

Thanks for your help, and I enjoy the slider very much.

[marcwhitbread]

Odd that this is popping up again. I tried your website on my galaxy 2.3.5 and it works fine. Very odd.

Which emulator did you select? I will use that to test. Your LG is a touch screen only? Can you tell me what specific LG phone/version you have? Can you try to upgrade your iosslider version to 1.1.63? I want to rule that out as well. If you removed iosslider from the theme (just to test), does the drop down functionality come back?

Responsive should have nothing to do with it. I'm not sure why the dropdown is being disabled.

[entilza5]

Thanks for the quick comment. I will try to upgrade later today.

For the emulator I used: 720x1280 (320dpi) then switch to 2.3 dropbox at the bottom.

My LG has a keyboard flip out as well (kinda cool!)

Any other page works fine as on my phone I can get to other pages manually or by clicking the metro link on the homepage.

[marcwhitbread]

This is a major item I need you to confirm as well:

If you removed iosslider from the theme (just to test), does the drop down functionality come back?

Thanks for the info. I am still confident that this is most likely a browser bug. iosSlider doesn't override anything outside the slider element so it can't be interfering.

I did some quick google searches for "android 2.3 drop down menu" and found a few similar problems right away.

Take a look at these issues: http://code.google.com/p/iui/issues/detail?id=263 http://stackoverflow.com/questions/9028822/select-dropdown-not-active-on-android-browser

[entilza5]

"If you removed iosslider from the theme (just to test), does the drop down functionality come back?"

The dropdown works fine on every page other than the homepage which has the slider. Even on the emulator if you click on "Metro Portfolio" on the homepage (which gets you to another page) You can see the select then works fine.

I'll check out the other issues and then try upgrading later.

Edit Note: I created a second homepage and just removed the javascript for ioslider and then the select works.

[marcwhitbread]

I am working on reproducing the issue with your HTML/CSS for your select menu and iosslider.js/jQuery.js ONLY. No extra javascript includes (no modernizr, bootstrap, etc.).

The problem is that everything is working in the manymo test environment. This leads me to believe that if there is a javascript/jquery conflict causing the select box to break down. It's most likely caused by one of the other scripts in combination with iosslider.

Also, it's very very important to note that the theme developer has customized the iosSlider plugin with an extension called kalypso.js. I'm not sure what this plugin is doing.

Until the bug can be reproduced with your HTML/CSS, jQuery and iosSlider.js exclusively. I'm not sure what else I can do to help troubleshoot.

I recommend asking the theme developer to investigate the overarching JavaScript compatibility issues here if that is the case.

I will keep digging but I'm kind of stuck at this point.

If you are a developer, I recommend to just start pulling out the other javascript plugins 1 by 1 until the select box function comes back. That will help to isolate the problem. Let me know if that produces any positive results.

[entilza5]

Wow you are awesome great support! This is like a puzzle now.

I just came to the same conclusion! I started doing as you said, and I believe I may have found the piece of code that is causing this conflict.

I have successfully created an http://www.artcraftkitchens.com/beta/indexb.php page that has a basic version of your slider and the menu both working!

The conflicting code I believe lies within the kalypso.js ( You were right! )

The code with: var sP = jQuery.noConflict(), and the sparkles. Once I removed that I was able to get somewhere. The sparkles are kind of useless I don't need them it's an optional header effect. THe jQuery.noConflict is a tiny file with just: "var $ = jQuery.noConflict();" Inside it.

I think I can play around and eventually get this to work. If I do find a solution I will report to the template designer as well as this is a Very popular template.

I can't thank you enough for helping.

[marcwhitbread]

Glad to hear you are moving towards a solution. Thanks for the update :).

[entilza5]

I've been playing around,

I've come to the conclusion I am fighting a battle with a z-index and a select and essentially a browser bug.

If I make the header section a -1 z-index then the select works but the slider doesn't slide.

The IOSSlider is wrapped in a <div id="slideshow">' which is to be then put in the background so the menu hovers on top. I think when the responsive menu kicks in it still thinks it's behind... I may be able to put some @media code to override this differently...

www.artcraftkitchens.com/beta/indexc.php

Anyway thanks for your help.. It's definitely a browser bug.