Comments (12)
ChUI version number please?
from chocolatechip-ui.
I'm looking at the busy control loading properly on my Android devices. So, could you explain exactly how you're handling the loading of your Android theme? There shouldn't be any iOS stuff in the Android theme.
Regarding the Safari true situation. Yeah, I'm aware of the issue. Chrome tries to identify itself as Safari, i guess to make sure all the code targeting mobile Safari works on Chrome. So what I do is first test for Chrome, then load Android things, else if Safari, load iOS stuff.
However, you're getting $.isChrome false on Android?
Is that on mobile Chrome or the Android native browser and which version of Android are you on?
Details, detials, details. It helps me figure out what's going on.
from chocolatechip-ui.
My apologies, we're balls-to-the-bandsaw with a deadline at the moment so I was a little hasty filing this.
The device identifies as Mozilla/5.0 (Linux; U; Android 4.0.3; en-au; LG-E612 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
, using the stock Android browser ("Internet"). We're seeing ChUI call iOSBusy and we have icons on the tab bar (which don't work, presumably because of lack imageMask support), which leads us to believe it's falling back to being an iOS device based on the incorrect "safari" in the UA.
Running ChUI-3.0.6, with jQuery 2.0.3.
from chocolatechip-ui.
What version of Andriod are you running on? This looks like Gingerbread. Android before 4.0 has problems with image mask, which is being used for both the busy control and the tabs.
I’ve just checked in a fix for more granular device testing that I hope will solve the problem with the busy control:
658b1b4
Regarding your tabs, those are show by CSS, which has nothing to do with browser detection. If you have the correct stylesheet for Android loaded, the icons should not be visible. Can you very that you’re getting the correct stylesheet loaded on Android?
Your Android theme should have a definition like this:
.tabbar > .button > .icon {
display: none;
}
Otherwise you must somehow be loading the iOS theme.
On Nov 27, 2013, at 3:29 PM, Tom McKenzie [email protected] wrote:
My apologies, we're balls-to-the-bandsaw with a deadline at the moment so I was a little hasty filing this.
The device identifies as Mozilla/5.0 (Linux; U; Android 4.0.3; en-au; LG-E612 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30, using the stock Android browser ("Internet"). We're seeing ChUI call iOSBusy and we have icons on the tab bar (which don't work, presumably because of lack imageMask support), which leads us to believe it's falling back to being an iOS device based on the incorrect "safari" in the UA.
Here's a screenshot:
Running ChUI-3.0.6, with jQuery 2.0.3.
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
The whole theme is iOS at the moment (it's a web app which will later be packaged on the app stores). The tabbar is being generated by $.UIPopup
, so I suspect that's falling for the same fake UA as UIBusy and that's affecting the generated html.
The device is an LG Optimus L5, very mid-level android phone but in fact does run Android 4.0.3 (we figured this is a good low-to-mid-range device to test on).
You're right, it doesn't support image-mask. We rewrote the busy indicator to use the SVG as a background image instead now, but we do lose small amounts of functionality (like changing the background color to style it). We don't intend for tabs to be visible on this device anyway so otherwise it's not an issue.
from chocolatechip-ui.
OK, so using the iOS theme on Android is not going to work. You just need to change it to the Android theme and then the tab bar and busy control will be appropriate for Android. That means, with tab bars, they will be at the top of the app, as per Google’s direction, and without icons. There’s just one spot where you change the them, in the link tag in the document header.
Change:
The whole theme is iOS at the moment (it's a web app which will later be packaged on the app stores). The tabbar is being generated by $.UIPopup, so I suspect that's falling for the same fake UA as UIBusy and that's affecting the generated html.
The device is an LG Optimus L5, very mid-level android phone but in fact does run Android 4.0.3 (we figured this is a good low-to-mid-range device to test on).
You're right, it doesn't support image-mask. We rewrote the busy indicator to use the SVG as a background image instead now, but we do lose small amounts of functionality (like changing the background color to style it). We don't intend for tabs to be visible on this device anyway so otherwise it's not an issue.
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Yup will do — thanks for the direction. For the web app we want to simply have the iOS theme, and we'll switch to android for the app version. BTW I found great value in importing your LESS files into our workflow directly and overriding the variables, thanks for putting in the effort to make that available.
from chocolatechip-ui.
If you’re doing a Web app, there’s no reason you can’t serve the iOS version to Safari and iOS devices, the Android theme to Chrome and Android devices, and the Windows theme to IE 10/11 and Windows Phone 8.
if you try out this link on different devices and browsers, you’ll see that the theme is appropriate for the target. I strongly suggest you not force one theme on all users. That’s what jQuery Mobile does. That is not what ChocolateChip-UI is about. I’m not sure what Web stack you’re using, but it is trivial to examine the headers and make a decision on the server to send the user the correct theme. That way the user has a tailored experience for the platform. Please read the documentation for theme switching: http://chocolatechip-ui.com/documentation#/platformsupport
On Dec 1, 2013, at 7:35 PM, Tom McKenzie [email protected] wrote:
Yup will do — thanks for the direction. For the web app we want to simply have the iOS theme, and we'll switch to android for the app version. BTW I found great value in importing your LESS files into our workflow directly and overriding the variables, thanks for putting in the effort to make that available.
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
I don't disagree, and that's definitely the reason I didn't go with something like jQuery mobile. Alas, some decision makers have decided a uniform UI for the web app is the best move (plus, the designs came in well after implementing the core features), so that's our direction at the moment. Apart from the imageMask it's been pretty smooth sailing.
from chocolatechip-ui.
Well, then for the busy control, use and animated gif. You’ll have to change the reference for that in chui-ios.css. Same thing for the tabs.
Just look for .busy in the css. Then change all the references from -webkit-mask-image to background-image and change the -webkit-mask-image: url(…) to background-image: url(your animated gif path here);
Similarly, for the tabs, look for:
.tabbar > .button.more > .icon
and redefine all there references to -webkit-mask-image to background-image equivalents. Use a png with transparency for your icons and you should be fine on all modern browsers.
On Dec 1, 2013, at 7:50 PM, Tom McKenzie [email protected] wrote:
I don't disagree, and that's definitely the reason I didn't go with something like jQuery mobile. Alas, some decision makers have decided a uniform UI for the web app is the best move (plus, the designs came in well after implementing the core features), so that's our direction at the moment. Apart from the imageMask it's been pretty smooth sailing.
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Tom,
You can handle some of the differences between iOS and Android in the same document by including some document specific styles based on UA.
.isAndroid .tabbar .icon {
display: none;
}
.isiOS .tabbar .icon {
background-image: ...... etc.
}
If i can help you solve a problem, let me know what your pain point is.
Cheers
On Sunday, December 1, 2013 8:51 PM, sourcebits-robertbiggs [email protected] wrote:
Closed #13.
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
That's what I've gone with, also with the .isAndroidNativeBrowser (which I accidentally stumbled upon, given that the android native browser has no debugging capabilities...)
Thanks for your help, we shipped today! Good luck with the project.
from chocolatechip-ui.
Related Issues (20)
- Example navigation-backto: scroll always results entering detail page HOT 2
- Grid do not work on Safari (iPad) HOT 2
- Chocolatechipjs in its own repo HOT 2
- Back button not rendering correctly on WP8 HOT 3
- Phonegap iOS scrolling singletap hadling issues HOT 23
- $.UIEditList callback function when an item is deleted HOT 6
- data-goto not functioning in Firefox 34, 35 HOT 7
- Chocolatechip-ui app freezes after iOS unlock HOT 2
- Keyboard autofocus being triggered on input fields
- data-goto syntax in docs is wrong HOT 1
- Where do I find example for buttons? HOT 2
- Cannot read property 'classList' of null HOT 4
- chui 3.5.5 does not work on Android Jellybean (4.2) HOT 12
- chocolatechip-ui.json purpose? HOT 3
- $.UIDeletable cannot read property 'on' of undefined HOT 13
- $.UIGoToArticle() loses history between tabs HOT 12
- wp8 nokia lumia 520 "back button issue" HOT 5
- Low Memory Warnings HOT 6
- Error when using $.UIGoToArticle HOT 9
- Tabbar on Android - with scrolled content double click needed HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chocolatechip-ui.