Okay, so I am using a cookie to generate mobile content on different device widths. Basically the site looks one way on desktop and reveals post content on the mobile under 800px.
Everything is working perfectly except for one little issue. When I switch to desktop view in a mobile browser, seems to only be happening in iOS safari and android HTC Internet, the cookie is not being applied to the content isnt being generated. Ive tried numerous searches and suggestions across the web and havent found anything. Any help would be amazing.
Script in header:
<script type="text/javascript">var mql = window.matchMedia("screen and (max-width: 800px)")
if (mql.matches){ var setCookie = function setCookie(name) {
document.cookie = 'distanceMobile=1; expires=0; path=/';
}
setCookie('distanceMobile');}
else{
// do something else
}</script>
<script type="text/javascript">
var mql = window.matchMedia("screen and (min-width: 801px)")
if (mql.matches){ var delete_cookie = function delete_cookie(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
delete_cookie('distanceMobile');}
else{
// do something else
}
</script>
Php for the template:
<?php
// Template Name: Full Width Home
get_header("home");
if ( wp_is_mobile($_COOKIE['distanceMobile']) ) {
echo '<style scoped> #media screen and (min-width: 801px){
#content {display: none !important;}
}</style>';
get_template_part('custom-home-content');
//echo "Hello!";
} elseif ($_COOKIE['distanceMobile']) {
get_template_part('custom-home-content');
//echo "Hello!";
} else {
// do nada
}
get_footer(); ?>
Here is a link to the site im working on. If you shrink your browser window below 800 you will have to give 2 quick refreshes for it to print the content. Otherwise visiting on a device it will just load fine.
Again ive tried multiple things so far. I tried stripping away everything matchMedia and ive tried doing an alert. It seems to just not be working in the mobile browser when you click desktop view.
Regards.
* Update PHP file to test if mobile is recognized and cookie firing*
Im returning the SPM in desktop view in the mobile browser
<?php
// Template Name: Full Width Home
get_header("home");if ( wp_is_mobile() ) {
get_template_part('custom-home-content');
//echo "Hello!";
}
elseif ($_COOKIE['distanceMobile']) {
get_template_part('custom-home-content');
//echo "Hello!";
}
else {
echo "SPM JR.";
}
get_footer(); ?>
Related
I'm using the following html code. I'm able to get a video stream on my desktop, but I'm getting a grey play button in the android webView app. I'm serving this over a https connection.
Please guide me as Im new to both of these code snippets.
HTML
<div id="video-container">
<video id="camera-stream" width="500" autoplay></video>
</div>
Script.js
window.onload = function() {
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true },
function(localMediaStream) {
var vid = document.getElementById('camera-stream');
vid.srcObject = localMediaStream;
},
function(err) {
console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}
This screenshot is taken from my desktop chrome browser.
and this is taken from my phone webView.
I know this is an old thread but I recently run into the same issue and only after a lot of tries I finally found the solution.
If you see this play button all the permission should be set correctly.
It seems that the webview is waiting for an user interaction to start the stream but tapping on the icon does not starts the video (idk how the user should "approve" the streaming)
The solution is to change the setting of the webview in you webapp:
webView.settings.mediaPlaybackRequiresUserGesture = false;
In this way the stream starts correctly without any user interaction
I want
1234567890
to be clickable in smartphones AND desktop computers. In smartphones I want it to dial the number written and in desktop computers I want it to use default phone application (e.g. Skype) to dial the number.
It seems callTo attribute is not w3c valid (or is this old information?) and tel doesn't seem to work with Skype. What's the general best solution to use here?
It would be good if the solution would be w3c valid as well, but not necessary.
This should work, try resizing your screen .
.show-on-smartphones{display:none;}
#media screen and (max-width: 480px) {
.show-on-desktop{display:none;}
.show-on-smartphones{display:block;}
}
Skype meTap to Call Me
Untested Javascript code:
function ancorSwitch(){
var os="Unknown";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
if(os != "Unknown")
{
var x=document.getElementById("myancor");
x.setAttribute("href", "callto:010101010101");
x.innerHtml = "Call me";
}
else{
var x=document.getElementById("a");
x.setAttribute("href", "tel:010101010101");
x.innerHtml = "Call me";
}
}
in html, you write:
<a id="myancor"></a>
I can't check it myself,
if someone finds an error I'll fix it
I want to load my webView which url is http://pickalize.info:4000 and using a lot of javascript.
So I write code like this.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
WebView webView = (WebView)findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.loadUrl("http://pickalize.info:4000/");
}
I tried change url to http://www.google.co.jp then it show the page correctly.
But my site doesn't show up.
Why it doesn't show my site?
Do you have any idea? Thanks in advance.
Can you double-check in the web browser on your Android device that your web site is listening on port 4000 - it seems to be listening on port 80 (the default port for HTTP).
When I visit your web site on the default port e.g. http://pickalize.info/ then I get a web page that includes a list of URLs. Note: http://pickalize.info:80/ is equivalent to above and loads the same web page I see without the port number in the URL.
The page has the following text:
Pickalize
Iphone Apps
Profile
Others
RSS
no valid 'aps-environment' error 2013-03-02
ノートを買った 2013-03-02
JavaでJSON 2013-03-01
もしかして 2013-03-01
半日で作ったしょぼいアプリがリリースされた 2013-02-27
WordBench香川に行ってきた 2013-02-25
Apple's game center problem. 2013-02-24
observer 2013-02-21
ナビゲーションバーを作ってみた。 2013-02-21
My App has rejected. 2013-02-20
プログラミングを始めて20ヶ月経って（経過） 2013-02-18
Python のスクリプトをどこでも実行する 2013-02-17
やっと... AppStoreに提出できた 2013-02-17
iOS開発のために画像を編集するやつ作った. 2013-02-17
Admobを埋め込む注意点 2013-02-16
Flaskで自分だけのブログを作った。 2013-02-15
I get similar content in a mini Android app I just created that uses your sample code. To make sure it copes with port numbers in the URL I made the following minor change:
webView.loadUrl("http://pickalize.info:80/");
However when I try to visit your web site using port 4000 I get a message telling me the web site is not available. I have tried from my Android device and my laptop. There doesn't appear to be a site listening / hosted on port 4000; there does seem to be a site on port 80.
Please double-check your site is being hosted on port 4000 and that you can reach it from a computer that's using the internet to connect to the site (in case there are router or firewall restrictions that block traffic to port 4000).
PS: The web page on port 80 has minimal javascript, from view source in my laptop web browser, this is what I can see
<script src="/static/js/rainbow.js"></script>
<script src="/static/js/languages/javascript.js"></script>
<script src="/static/js/languages/generic.js"></script>
<script src="/static/js/languages/python.js"></script>
<!--google analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15508754-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// google feed
google.load("feeds","1");
var init = function(){
};
google.setOnLoadCallback(init);
</script>
Ive been scratching my head with this for a few days now.
I have written a mobile specific website using plain old html and jquery.
It used ajax with json responses to get data from a service written using service stack.
all works perfectly fine from desktop and lots of different mobile i have tried (android, iphone, bb etc)
However there seems to be a specific issue with my handset (Samsung Galaxy S2 on vodafone)
When the handset is on wifi the ajax works perfectly and the json object is received from the service and processed correctly.
However when on mobile data the response does not come back as json but as the service stack web page (it looks like its not being told to return json correctly)
Im wondering if the headers could be being stripped out by vodafone or someting?
this is the ajax call being used
$.ajax({
url: sgee.ApiUrl + "/api/GetRegionId/" + sgee.App.postcode,
type: 'GET',
dataTye: 'json',
contentType: "application/json;charset=utf-8",
cache: false,
success: function (data) {
if (data.success) {
sgee.App.EnquiryId = data.enquiryId;
sgee.App.RegionId = data.regionId;
sgee.App.RegionName = data.regionName;
$("#regionTxt").html("We have identified that you live in the " + sgee.App.RegionName + " supply region.");
sgee.EndLoading(250);
sgee.HideStep(2);
} else {
sgee.SetValidationError("#pcodeControl", "Please enter a valid UK postcode");
}
},
error: function () {
sgee.SetValidationError("#pcodeControl", "Please enter a valid UK postcode");
sgee.SendError("Error on /api/GetRegionId/", "sgee.Step1");
},
complete: function () {
}
});
This is the data expected
{"postCode":"s63","regionId":14,"regionName":"YORKSHIRE","enquiryId":578106,"success":true,"returnedId":0}
and when running on mobile this is what i am receiving (ill not include the whole as it is long but it is just the html response as if i hadnt set the response type or browsed to the page)
<!doctype html>
<html lang="en-us">
<head>
<title>GetRegionId Snapshot of 03/08/2012 13:59:50</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
This really is driving me mad as it is impossible to debug (at least i cant find a way) i am using the android chrome remote developer tools to step through code but i cant capture the http request and response as it is on the mobile network.
Just guessing... But you're expecting json content right? If so, why is your response "text/html" instead of "application/json"?
You have a typo in there... "dataTye: 'json',". Could this be it?
I think is due to type of form submission. use post instead of get...
I've been on this now for three days, and I've tried pretty much every piece of alternative code and fixes to no avail.
Here's the code, taken from bog-standard jQuery examples:
$.ajax({
url: "http://api.wunderground.com/api/4213a68e7f20c998/geolookup/conditions/forecast/q/Australia/Noarlunga.json",
dataType: "jsonp",
success: function(parsed_json) {
alert("YEP!");
var loc = parsed_json['response'];
var weather = "Location: " + parsed_json.location.city + "<br />";
weather += "Wind: " + parsed_json.current_observation.wind_dir + " ";
weather += parsed_json.current_observation.wind_mph + "-" + parsed_json.current_observation.wind_gust_mph + " knts";
$("#info").html(weather);
}
});
and here's some config that lots of people suggested ( which did nothing )
$( document ).bind( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = true;
$.mobile.pushStateEnabled = false;
$.mobile.allowCrossDomainPages = true;
});
In addition, I have:
added <uses-permission android:name="android.permission.INTERNET" /> to the AndroidManifest.xml file
tested the json request URL in the browser on the same target ( works fine )
tested the page in FireFox / Chrome ( works fine )
tried the app on my Galaxy s2 over 3G ( UI all works fine but ajax request STILL fails )
Note this isn't the complete code, but it's just sitting in a standard phonegap deviceready listener event function wrapped in a standard .ready() function.
The fact this fails on my phone AND the SDK would seem to indicate a phonegap / Eclipse issue, and not a connection / permission issue.
I am trying to deploy to an Android 2.3 AVD, using the Android SDK. I haven't tried deploying to an Android 4 AVD yet.
I'd love it if anyone knows what the problem is because I've run out of suggestions to try!
If precondition is that you could modify php code on server..
Try this so you could test either in local browser or on mobile WITHOUT JSONP
1.Follow instruction of jQueryMobile website, which explains well how to make it work with phonegap (http://jquerymobile.com/test/docs/pages/phonegap.html)
In your <script></script> area, add
$(document).on("mobileinit", function(){
//apply overrides here
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
your ajax could be
$.ajax({
type: "GET",
url: "http://xx.xx.xx.xx/xxx/xx.php"
}).done(function( msg ) {
alert(msg);
//refresh the content
$( '.ui-content' ).load( 'xx/xx.html', function () {$(this).trigger('create') });
});
2.Your php is something like this:
<?php
header('Access-Control-Allow-Origin: *');//for local browser test
$test='[{"name":"aa","address":"aa"}, {"name":"bb","address":"bb"}]';
echo $test;
?>
in
$( document ).bind( "mobileinit", function()
add
$.support.cors = true.
:)
I tried lots of combinations and the thing that finally worked was adding the following to my index.html. The key thing is making sure it's loaded before you load jquerymobile (if you're using that). It won't work if it is loaded anywhere after that.
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>