jQuery Mobile + Phonegap Icons Moved - button

I am using jQuery Mobile + Phonegap, when I run the app on chrome all the buttons (lists, back, home) of jQuery work perfect.
When I put it on my Android device all the button icons seem to be moved like the css is wrong so they are either grambled (like half another icon is show instead) or they do not appear at all and the space is left blank.
Any suggestions?
I am using jQuery Mobile 1.0.1.
Thank you!

Related

Menu toggle not working on mobile, but works in all mobile simulators in desktop browsers

so on https://www.charitygolfsigns.com/ I have the menu collapsing into a hamburger menu icon for mobile, but tapping on it does nothing on my phone and other people's phones. Yet it works when clicking on it on mobile simulators in Google Chrome DevTools and when shrinking the normal browser window.
I've been taking the WordPress additional CSS out and back in but it doesn't shed any light on where the problem is.
Any help is really appreciated. Thanks.
Right now i dont see anything on that site, that could toggle your menu at all (even in the DevTools).
You can add a simple jquery Script, that toggles your menu:
<script>
jQuery('.header-mobile-menu').click(function() {
jQuery('#site-navigation').toggle();
});
</script>
But even if that toggles your navigation - you still need a style for it or toggle an individual block for mobile. Because right now, it would only toggle your "Desktop" Navigation

Touch Scroll bar in App Windows not working in tablet mode

I have a problem with a scrollbar inserted through Ionic 2+ Framework.
I want to deploy a app in Windows 10. I have introduced ion-scroll and all is working. My issue is: When I change to "Tablet mode" and disconnect the mouse and keyboard,where I only can use the touch screen, then the scrollbar inserted is replaced by another scroll, more thinner and I can´t interact with that. I can´t swipe the scrollbar.
I´ve tried to solve the problema with jquery, where I have used jscrollpane, also I have implemented this with CSS (overflow) and Ionic 2+ framework as I have said before.

Opera Mobile not showing jQuery Mobile icons

I have a problem in Opera Mobile browser which is failing to display jQuery dialog icons. This is how this looks like:
As you can see, icon left from error, which should be close button (x) is missing, as well as the icon in the "OK" button. Also, "Automatic" button in the background (lower right part of the screenshot) also lacks its icon.
Any idea what might be the problem, having in mind that this is only happening with Opera?
I also have issues with Opera Mobile not rendering Jquery Mobile elements -
try this to test...
Call Now - 02258 588 528
this should show the gear - if that doesnt work then i would say you have issues with CSS and the image mapping. To resolve that you should get fresh CSS from the Jquery Mobile download pack
I found the solution. When I was downloading jQuery Mobile files, I thought I only needed js and css files, but it turned out that there is a folder named "Images" which contains all jQuery Mobile icons :)
To conclude, don't download only js and css files, download and deploy the whole zip file!

css - alternatives or hacks for mobile browsers that don't support "background-position"

I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...

Does opera mobile support scrollable divs?

I am trying to add a scrollable grid to a mobile web site I am currently working on. I've tried using the jQuery Scrollable Table Plugin written by farinspace, which works fine in IE8 but doesn't work at all in Opera Mobile for Windows. I've also tried using the Telerik MVC Grid extension, and that also will not give me a scrollable grid.
So, before I give up on the idea and switch to using a paging grid, has anyone ever got anything like this working on Opera Mobile?
I actually gave up on this, as I don't think it would have worked very well at all. Just not a very nice user experience.
What I've gone with is to display the table in it's entirety with no scrolling or paging enabled. So, I am relying purely on the scrolling capability of the browser.
It seems to work really nicely on my blackberry and I think will be nice to use on a touch smart phone too, as the user can just swipe their thumb/finger to scroll down and check the list. Then just swipe back to the top of the list to press the relevant button.
Actually, thinking about it, i might provide a "back to top" link under the grid :)

Resources