I have added jQuery mobile on my site to add swipes, to make my site more mobile friendly. link: my site
When you click anywhere on my page, a blue border in chrome(pc) will appear around the page, on my android mobile chrome the border is in yellow. I just want to get rid of it because it makes page ugly.
A quick fix is to remove this outline through css
.ui-page-active { outline: none; }
Done!
Related
So here's my predicament.
In mobile safari, overflow:hidden; doesn't work as it does on desktop. On desktop, adding this to the body disables scrolling in the browser, but then you can still scroll inside another div, say a drawer or a lightbox.
On mobile safari, you can still scroll the page with a touch and drag with your finger.
I came across a possible solution:
document.ontouchmove = function(event){
event.preventDefault();
}
However, this disables scrolling altogether. Even in a drawer or lightbox div where I need to still allow scrolling.
I also came across another "fix" where people add position:fixed; to the body. This doesn't work in my scenario because the user could already be halfway down the page when they open a drawer/lightbox. This method would put the body in a fixed position, thus losing their scroll position of the body.
How can I disable any movement/scrolling of the body on mobile safari, but still allow scrolling in a drawer/lightbox?
Is it possible to show a loading icon on extreme right side inside the filter input before the "X" clear text icon when we are making a remote call in jquery mobile 1.3 autocomplete.
UPDATE:
The simplest approach would be to substitute delete icon of jQM search widget before making remote call and then return it back after you finished processing. And that IMHO makes even more sense, from the user experience, than adding a second icon.
First define class for our ajax icon
.ui-icon-ajax {
background-image: url(http://code.jquery.com/mobile/1.3.0/images/ajax-loader.gif);
background-size: 18px 18px;
}
Second before we make ajax call replace icons
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-delete")
.addClass("ui-icon-ajax");
Third return delete icon back
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-ajax")
.addClass("ui-icon-delete");
Here is working jsFiddle example
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.
I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.