On a website I use :hover for web and :focus for touch device on a link. But on android devices if I touch the link it do the :focus but then automatically open the link.
It should do the :focus and if the user clicks again on the link, then it should open the link. Is this possible with pure CSS?
I got a short example of my :hover and :focus code:
#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
display:block;
}
There is no problem on iOS (works perfectly on iOS). Just on android devices.
You will need a bit of javascript (jQuery, which is already included in your site) and Modernizr to determine if the user is on a touchscreen device. There are other methods to check for touch but Modernizr will get you the best results in my opinion.
So first include Modernizr. You can download it from their website or use a cdn like cdnjs.com
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
After that, add this javascript to your site:
$(document).ready(function(){
if(Modernizr.touch){
$('#menu-mainmenu').on('click', '> li', function(e){
if(!$(this).data('open')){
e.preventDefault();
}
$(this).data('open', true);
});
}
});
So if you're on a touch device and click on a mainmenu-item then submenu pops up (due the :focus styling) but the link is blocked because of e.preventDefault(). Then the data-value "open" is set to true, so if the user taps on the link again, the if check fails and the link opens normally. I couldn't test it all the way through but it should work...
Related
I load a webpage via the inappbrowser plugin for my Phonegap app.
The app shows a website and a webshop which are both accessible from the web as well.
I cannot add a button 'go back to app' (this wouldn't make sense when visiting the site from PC). So I want a custom navigation (I prefer bootstrap) in the phonegap app so I can navigate between multiple different websites.
Unfortunately the navigation gets hidden by the inappbrowser. Is there a way to show the app html navigation on top of the inappbrowser?
Thanks a lot!
adding absolute position, z-index 999999 and display block with css didn't help
One way you do could this is inject the button into your webpage by generating it in your Cordova app Webview:
var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
var button = document.createElement("div");\
button.innerHTML = "Return to app";\
button.classList.add("close_button");\
button.onclick = function() {\
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({action: "closeIAB"}));\
};\
body.appendChild(button);\
'
});
});
You'd then add a listener for the message that's posted when the button is click which closes the inappbrowser:
inAppBrowserRef.addEventListener("message", function (params){
if(params.data.action === "closeIAB"){
inAppBrowserRef.close();
}
});
You could also inject the styling of the button from within your Cordova app:
inAppBrowserRef.insertCSS({
"code": "\
.close_button {\
position: fixed;\
bottom: 0;\
z-index: 500;\
width: 100%;\
background: white;\
color: black;\
padding: 10px;\
font-size: 20px;\
}"
});
Or if you prefer, add the button styling to the CSS in your webpage (if it's under your control).
Similarly, if you don't like the idea of creating the button HTML dynamically, you could include it as part of your webpage but hide it by default unless a particular class is injected by the app:
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
body.classList.add("is_app");\
'
});
});
And in your website CSS:
body:not(.is_app) .close_button{
display: none;
}
Note that the emulation of the postMessage API that has been added to cordova-plugin-inappbrowser for Android & iOS by this PR is not yet in the latest release version on npm (v3.0.0) so you'll need to install the plugin directly off the Github master branch (v3.1.0-dev):
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
I did this long time ago another way. The in app browser opened a website with a additional GET parameter, so the website knows it's opened inside the app. Then in the website I generated a special button, with href containing a custom scheme and some command. (E.g. myapp://close-browser)
Then I configured the app to capture the custom url by using regular app scheme configuration. Once I captured the command in javascript, I closed the in app browser using it's API.
I want to open page in Cordova WebView and add some styles. I have
function setSize() {
alert('Trying to load styles'); //works
app.insertCSS({code: 'body{width: 100% !important;height: 100% !important;background-color: red !important;}'}, function(){
alert('Styles are loaded!');
});
}
function onDeviceReady() {
var app= window.open('http://example.com','_self','location=no');
app.addEventListener('loadstart', setSize());
}
But it doesn't work. Is there any mistake ?
inAppBrowser is not a page from your application its a web page displays within browser of your app so to apply css into your browser elements you have to load CSS file into page of browser,
So here is an answer I have given in stack overflow before, which is working fine for that OP so try it, may be you will get success in what you wants to do.
I'm looking for some code to place on my website, which detects if the user is on a mobile device, opens a pop-up and offers to add an icon on the home screen linking to the website. (Just like adding the website to your favorites and placing an icon on the home screen). Ideally it should work on Android & iPhone. Any help would be much appreciated.
What you can do is create a div somewhere on your page, with the exact text you want. In your CSS, you then make the div display:none and add a media query so when the device is a mobile phone you display the div again.
.mobile-div {
display: none;
}
#media (max-width:767px) {
.mobile-div {
display: block;
}
}
Ofcourse you can expand on this by having a javascript function checking for the screen width, and use functions to open a popup when a certain width is reached (and is thus considered a mobile phone).
<script type="text/javascript">
(function () {
var width = $(window).width();
if (width < 400) {
// do something
}
})();
</script>
You can then search Google for a way of actually making the icon, for example this script might help you: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble. Although I think it is not possible in iOS to do this, you might have to consider creating an app that basically launches your website, or something similar. Ofcourse this will mean you have to pay for your app being displayed in the store, so it comes down to you: Do you really need this functionality, or not?
I made an app using WP and apppresser. Finally got the sliders and everything working. BUT....
my popup windows work nicely using this code. but, when i hit the "done" button (on IOS. Works fine on android) it wont work again until I refresh the page (kinda a pain) by switching between my home panes.
Help? Everything has a different "btnNUMBERClick" name
<!--Pay Water Bill-->
<a href onclick="Btn777Click()"><img src="http://pwpllc.net/apppress3/wp-content/uploads/2014/02/maps105new.jpg" width="105"></a>
<script>
var myWindow;
function Btn777Click()
{
Btn777Click = window.open("http://maps-directions.org/15/?keyword=quest%20map%20directions&gclid=CM--_tSo97wCFe87MgodpgEAGA","myWindow","width=200,height=100");
}
</script>
Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>