I'm using Modernizr to detect non-capable SVG browsers and loading an additional stylesheet for those that don't support it. The images are set by background-urls in css.
The images don't show in my android browser at first but when I refresh the page they load. I made certain the cache was cleared before doing so. I'm also using Jquery Mobile but not using any of its styles.
Here is my header:
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mobile.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
I found the solution. I had to move my js scripts into the load command of modernizr.
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
load: ['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'<?php bloginfo("template_url"); ?>/js/mobile.js',
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js'
],
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
Related
I am working on HTML5 application with Trigger IO framework.I tested it on iPhone and it is working well there.But problem is with the Android. I am getting following error when I debug the application.
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
this is for every resource file referenced from the html header. My header code is :
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/index.js"></script>
both files are present on the location and working well on iOS. But problem is with Android/Chrome. Any workaround ?
EDIT
Following is the header of the index.html :
<head>
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
'self'; img-src https://*; child-src 'none';">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="js/slick-theme.css"/>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/network.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
</head>
Note : If I remove jquery.mobile-1.4.5.min.js file then it is taking reference of index.js
It could be a regression of:
https://github.com/jquery/jquery-mobile/issues/6746
You can use the httpd module as a workaround for this and similar bugs in other libraries:
https://trigger.io/modules/httpd/current/docs/index.html
Here, this my html code
<html >
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<title>Hello World</title>
</head>
<body ng-app="socketApp" ng-controller="NewsController">
<script id="users" type="text/template">
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
// var names = ['loki', 'tobi', 'jane'];
var html = ejs.render("<ul><li><%= session.User.name %></li></ul>", { });
document.body.innerHTML = html;
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/sails.io.js"></script>
<script type="text/javascript">
io.sails.useCORSRouteToGetCookie = false;
io.sails.url = 'http://192.168.1.4:1337/';
</script>
<!--script type="text/javascript" src="http://cdn.socket.io/socket.io-1.0.3.js"></script-->
<!--script type="text/javascript" src="js/socket.io.js"></script-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/ejs.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
from the above code
var html = ejs.render("<ul><li><%= session.User.name %></li></ul>", { });
Here, i want to get sails server created session object in my cordova front end view. i tried many times , but i have't get session name. I'm very new to cordova . So , Please help me .
I've written an app in cordova 4.0 with jquery mobile & jquery, and when I try to run the app on Galaxy 2 with android 2.3.5 (gingerbread) all I get is white screen without any error or anything going on.
note: I capture any exceptions from javascript and alert them, so if there was an exception I should have seen a message. but there's nothing.
any idea why? does Cordova suppose to work properly on android 2.x? I found mix opinions on that subject...
thanks!
EDIT: adding the source code. note that I have js that wrap cordova so everything under utils.* is a wrapper layer for cordova. this is index.html, the first page that should be loaded. another thing I want to say is that I added a code to catch and alert any exceptions (window.onerror = function(message, url, lineNumber)...) and alert them, and it usually work but in this case I see no alert.
<!DOCTYPE html>
part of pages we load does not work.
-->
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- My extensions to jquery-mobile css -->
<link rel="stylesheet" type="text/css" href="css/my-jquerymobile-extend.css" />
<!-- all basic css -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/msgbox.css" />
<link rel="stylesheet" type="text/css" href="css/intro.css" />
<link rel="stylesheet" type="text/css" href="css/splash.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/result_page.css" />
<link rel="stylesheet" type="text/css" href="css/intlTelInput.css" />
<title>SeekWhale</title>
<!-- include cordova and jquery -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
<script type="text/javascript" src="js/jquery/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery/custom_loading_gif.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-draggable.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.min.js"></script>
<!-- Include utils -->
<script type="text/javascript" src="js/utils/config.js"></script>
<script type="text/javascript" src="js/utils/flags.js"></script>
<script type="text/javascript" src="js/utils/ajax.js"></script>
<script type="text/javascript" src="js/utils/debug.js"></script>
<script type="text/javascript" src="js/utils/visuals.js"></script>
<script type="text/javascript" src="js/utils/device.js"></script>
<script type="text/javascript" src="js/utils/contacts.js"></script>
<script type="text/javascript" src="js/utils/events.js"></script>
<script type="text/javascript" src="js/utils/navigation.js"></script>
<script type="text/javascript" src="js/utils/phone_numbers.js"></script>
<script type="text/javascript" src="js/utils/prompt.js"></script>
<script type="text/javascript" src="js/utils/forms.js"></script>
<!-- Replace UI language with chosen language -->
<script type="text/javascript" src="js/languages/dictionary.js"></script>
<script type="text/javascript" src="js/languages/hebrew.js"></script>
<!-- function to init pages -->
<script type="text/javascript" src="js/init_page.js"></script>
</head>
<body data-role="page">
<img class="splash" src="img/bg-entry.png"></img>
<script type="text/javascript">
// set language
ui_dictionary.set_dictionary_words();
// called when cordova is ready to run page init script
function InitApp()
{
setTimeout(function()
{
utils.prompt.log("app started!");
var effect = utils.navigation.transition.slidedown;
// if should skip directly to main
if (utils.flags.skip_to_main)
{
utils.prompt.log("skip to main page");
utils.navigation.load_page(utils.config.get_last_page(), effect);
}
// if require first setup open the first setup page:
else if (utils.config.get_successfully_registered() == false)
{
utils.prompt.log("load register");
utils.navigation.load_page("register.html", effect);
}
// if registered but not confirmed, go to confirm page
else if (utils.config.get_is_device_confirmed() == false)
{
utils.prompt.log("load confirm page");
utils.navigation.load_page("confirm.html", effect);
}
// if all goes well, open the main page!
else
{
utils.prompt.log("load main page");
utils.navigation.load_page("main.html", effect);
}
}, 1);
}
utils.events.on_device_ready(InitApp);
</script>
</body>
<script type="text/javascript" src="cordova.js"></script>
this one should be the first js to be loaded. put all other js files after it.
I use Cordova.jar 2.9.0.
Here is the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#BtnNavigation").click(function () {
alert("dfgdfgh");
window.location.assign("guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World");
});
});
</script>
</head>
<body>
"http://example.com"
<button id="BtnNavigation" name="Map" style="padding: 50px 100px;">Map</button>
</body>
</html>
Button click shows error:
The Protocol Not Supported(guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World)
some text to get rid of "it looks like your post is mostly code; please add some more details"
The Url Scheme used with Windows Phone 8 devices is not implemented with Nokia X devices, and thus you can not use it with Nokia X devices. Also as far as I know, there is no public offering for HERE Drive usage implemented with Nokia X, thus I could not even suggest any alternative API to use.
I have created a application using Phonegap 2.9.0 .The Build which is running all the android phone version less than 4.0. When i instal in Android 4+ devices it shows blank screen.The same build works fine with ios all versions.Here the index.html
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
</head>
<body>
</body>
Here the explore snap
What change requires to run in android 4.0+ devices.Pelase help me to solve this issue
Try this
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
</head>
<body>
</body>