When this page is viewed in Firefox on an Android 2.3 phone:
http://www.lmidev.com/sites/main/classlocator/index-mobile.html
a magnifying glass image appears in the 'Address or postcode' box (this is a 'submit' input button, with a background image applied). However on the default Android browser, it doesn't appear. Why is this, or how can I find out? On another page in a different domain with code that seems to be identical, the image appears fine in the Android browser.
(I tried getting weinre to work for remote debugging, but haven't been able to get the server to connect when I browse to the site. I've now removed the JavaScript used to connect to weinre)
The background image for the submit button was being applied like this:
background: url("../images/mobile/sprite.png") no-repeat scroll -61px -3px transparent;
For some reason, in the Android 2.3 browser, I needed to add the '!important' declaration to the style property:
background: url("../images/mobile/sprite.png") no-repeat scroll -61px -3px transparent !important;
Best guess is that Android applies its own background for the submit button, that needs to be overriden.
Related
I am using Swipebox through the responsive lightbox plug-in and the bar with close button at the bottom gets covered by the iPhone bottom nav so you can't close the enlargements. I tried adding padding in css, but it doesn't seem to work. I love the way that swipebox works and looks, but it may not be an option for me if you can't close the enlargements on the iPhone.
When you touch the bottom area on iPhone it evokes this bottom iPhone nag which covers the swipebox close button. I would think the solution would be to either swap the top caption bar of the swipe box with the bottom bar that closes it, or to move the bottom bar up so it would not be covered. If I switch from landscape to portrait a couple of times it does move upon it's own. I have no idea why.
When I test the jQuery plugin at the swipebox site it does the same thing. So I am asking if anyone has modified this successfully.
Now I have at least a quick and dirty approach that is ok for the moment.
I set in the css at #swipebox-overlay height: 101%; overflow:scroll;
and in the js at
$('body').bind('touchstart', function(e){
window.scrollTo(0,1); ....
thats far from being perfect but works for me at the moment for an urgent project...
I had a similar issue on android. To puch the bar up to display above the buttons, just edit swipebox.css to the following:
#swipebox-action.visible-bars {
//bottom: 0px;
bottom: 50px;
}
#swipebox-action.force-visible-bars {
//bottom: 0px!important;
bottom: 50px!important;
}
That did the trick for me.
I have done my application in iphone using phonegap and jquery mobile. It is major project and it is totally completed. But there is one problem , in application pages load using rel="external" , when page changes one to another page in between 2 to 3 seconds screen display totaly white, that time don't want to display white screen. Anybody idea what can we do for that ? and don't reply with remove rel="external".
First of all you will have to make your native webview transparent then
Try giving css style to body as
body{
background-color:transparent;
}
This is a firefox specific bug that just started today. IE and Chrome do not show any scrollbars. I'm making all the appropriate Facebook calls to autogrow the page.
I have in place
FB.Canvas.setAutoGrow();
FB.Canvas.setSize(true);
Inserting css: Overflow : hidden on the html tag will fix the problem but breaks many of my pages.
and nothing is working. Even with css: Overflow:hidden the vertical/horizontal scrollbars still appears but is disabled.
Previously, firefox had always displayed a disabled bottom scrollbar, but now it is displaying a enabled vertical scrollbar as well. The vertical scrollbar just crept up over night and is now displaying on the live version of my app. Something changed on the Facebook end to have the vertical scrollbar start showing up.
Aside from the vertical scrollbar now appearing, firefox also displays a disabled bottom scrollbar that is impossible to get rid of, I've seen this bottom scrollbar on every app on facebook in Firefox.
You can see the bug live in action by going to
apps.facebook.com/Ovrlap-App I also went around checking out other FB apps and found another example on BranchOut (an app with 2mill + users).
Firefox has always had a disabled bottom scrollbar which I'm totally clueless as to how to get rid of it. But this new vertical scrollbar just showed up today.
Thanks in advance,
-Rob
I have how would i only target iphone? I have tried
media="handheld, only screen and (max-device-width: 480px)"
but it wont display my menu?
I have two menus - one for web browsers and one for mobile web. Im guessing as iphone only reads the 'screen' type that is why it is displaying. I have specified in my main site css not to display my mobile menu and in my mobile style sheet I have specified not to display the web navigation?
Any ideas?!
Link to my site is www.therisingsuntarporley.co.uk
Thanks
The code for targeting iPhone looks right (see How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing? for some improvements). However, iPhones will display both the regular stylesheets and the mobile-specific ones. To show the menu, you need to add display: block; to the .menu element in mobile.css.
On my site the fb connect login button suddenly became unclickable, I have no idea what I did
http://www.belginfish.com/mp3/
(top right)
If anyone has any idea that would be excellent!
A div element with class="search_area" is lying on top if your facebook button. Its transparent so the fb button is still visible. Rectify your html/css and fb button will work just fine.
I had a similar problem. We were upgrading from FB Login v1.0 to v2.1. The old version was relatively simple to skin by just swapping in your own background image, and hiding the original image, like:
background: url(/ui/img/fb-login-small.png) no-repeat;
text-indent: -9999px;
Unfortunately in v2.1 this same code will hose you. You'll end up seeing your custom image, but it won't be clickable. Furthermore, the real button does load without any errors, and is promptly shuttled off -9999px offscreen. That can be pretty confusing.
The solution is to just get rid of the image replacement (get rid of the 2 CSS lines above) so the real FB login button can show through.