I recently added a continue with facebook button to my webapp using https://developers.facebook.com/docs/facebook-login/web/login-button to provide button code. I've noticed that this button is not dynamic in size and looks horrible on mobile devices - can anyone point me in the direction of a fix to make it more mobile friendly. I'm using the large button, i.e.
<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with"
data-auto-logout-link="false" data-use-continue-as="false"></div>
Any help is appreciated.
My answer was to use my own button and control it's action using JS.
and then on button click, make the call.
FB.login(function(response){
// Do what you want here
});
Related
Just started working on mobile responsive design for a site I'm working on. During testing I noticed the main tabs that link to different views of the site, which can normally can be clicked with no problem on desktop, barely responds when tapped on a phone or in the browser developer tools that simulate a tap. If I click it repeatedly then it will eventually register, but it's not exactly user friendly.
You can see what I'm talking about if you go to www.runnercalculator.com and click between the two tabs on the normal desktop view and then inspect and tap it in mobile.
What is different between a tap and a click that I'm not accounting for here?
How can I make a view link work as a "one tap click" for mobile?
When making use of angular-touch.js(ngTouch module) you need to make sure that ng-click is placed properly in template.
<a href="#/pace" class="tabTabs ng-isolate-scope" info="paceCalc">
<li class="tabRowLi" ng-click="toggleSelect0()" ng-class="tabRowLi">
<span class="tabText ng-binding">Running Pace</span>
</li>
</a>
In your template, ng-click is placed inside a anchor tag. ngTouch module stops event propagation when you click on <a> which makes ng-click passive.
Avoid using ngTouch module unless you have plugins which has dependency over it or take extra care while creating templates with ng directives.
I created my own home automation web app. To authorize actions the user needs to enter a pin. Instead of using an input/password field I want to use a dial/number pad.
I decided to go with this snippet. My big problem is: I'm not good with CSS. I understand HTML and can work with it (at least with Bootstrap). But I have not learned CSS yet.
But I want to display the number pad in a modal (which pops up when the user tries to press the "Turn of PC" button for example).
I copied the css and html from the link. But this is the outcome:
Can someone explain me which part of the css is causing this?
Thanks
Remove the <div class="container"> from the modal body, and change the class on your phone tag to col-md-8 col-md-offset-2 phone.
Updated JSFiddle
Full-screen results
I've made a simple page as a Sign In form to test mobile devices access.
Live test is at:
http://jsbin.com/inumud/1/
outside jsbin:
http://balexandre.com/gk2
If you try to open that URL from a mobile device, there is no way one can get into the account and password forms.
I'm using a very simple form using Twitter Bootstrap (v.2.0.4) and works fine in any desktop, but why can't I access the form input's from a mobile device?
(iPhone does not get into the form, Android does not bring keyboard up)
What do I have to do more just to make it work on a mobile device without redo the hole site in a Mobile framework?
I'm keep trying and trying, but no success so far and it's been several days now, I'm probably miss-seeing something simple and I hope the community could help clear my eyes :)
found the "bugger"
it's the Modal that is on top and block access to everything else in back... adding hide to the modal class solves the problem.
I am building an app for mobiles, using jquery mobile framework. I want to be able to make a simple dialog box/pop up, so that when you click on a picture of a "question mark" the pop up/ dialog box would appear with a simple message.
I have tried different approaches from http://jquerymobile.com/test/docs/pages/dialog-alt.html to so many others. I couldnt get non of them to work. So If you know how to make a simple pop up or a simple dialog box could you please give me an example!
If you want to open a dialog in jquery mobile you have to use an attribute data-rel="dialog" and the href must point to a URL where your dialog lives:
Open dialog
Here's a fiddle so you can see how it works.
Hope it helps.
UPDATE:
It seems there's a problem with jQuery Mobile dialog and some devices.
There's an issue open in the GitHub repository.
I've found this plugin which seems to work really well.
I am currently working on a web application. I have a menu bar that moves when someone clicks on arrow. With every click a new menu option is activated.
Now, I would like to give the user the option to slide over the menu bar/screen to navigate on a touch interface.
Any idea how I would do that ?
Thanks
Well I don't think you'll be able to do it using just HTML, but if you're comfortable with jQuery take a look at this:
http://plugins.jquery.com/project/swipe
This plugin enables you to bind events to gestures, but I believe it only works on iPhone and iPad.