I have a subpage in a jquery mobile page where I'd like to insert att Google adwords conversion cookie. But using the traditional snippet from Adwords doesn't work. On Android it even makes the page go blank.
Anyone done this before?
You are probably loading the conversion script later on the page by doing something like this:
(function(){
var s=document.getElementsByTagName('script')[0];
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.googleadservices.com/pagead/conversion.js';
s.parentNode.insertBefore(ga,s);
})();
Or using a jQuery function to load scripts that is similar to the function above. Turns out that you can't include the conversion.js script in this manner because it uses document.write to write the img tag on the page. Because it uses document.write some browsers will remove everything from the page and replace the content with the output of document.write, which in this case is an empty gif.
You better use the default tag provided by google to mark a conversion. If you need to load it without a page refresh just open an iframe to a page that contains this tracking code.
<script type="text/javascript">
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "Purchase";
if (10.0) {
var google_conversion_value = 10.0
}
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="http://www.googleadservices.com/pagead/conversion/1234567890/?value=10.0&label=Purchase&script=0">
</noscript>
Of course this is just an example. You should use your own code that have your unique conversiod_id.
I researched this a bit, and came across the following links:
http://www.google.com/ads/mobile/publishers/web-publishers.html
https://support.google.com/adsense/bin/answer.py?hl=en&answer=185668
So it looks like depending on the type of ad you're running, you will have to get a customized unit for mobile.
However, I am still not sure why the page would go blank. I mean, I can totally see how some ad code does that when you try to lazy-load it, but I'm not sure why it happens in your situation.
Related
I got a currency exchange script from coinmill. I want to modify it to work nice in my page. I am a newbie in html/javascript programming thats why i am asking help on this one, pls.
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
$199.00 (US) = <script>currency_show_conversion(199.00,"USD","GBP");</script> GBP<br>
<small>Currency data courtesy coinmill.com</small>
This scripts works fine but shows the conversion for the default value in the script. I need to replace the value ($199.00) to a value from a textbox of id "edit_1". Automatically after the user inserts the currency to exchange, the value will show in the page.
Thanks in Advance.
I am Stephen Ostermiller, and I run http://coinmill.com/. You can make this work with the JavaScript currency API from Coinmill:
Put on onchange event on the textarea
Get the value from the text area using this.value
use the currency_convert(value,from,to) method that is available in frame.js to convert it into the currency of your choice
Write the value to where you want it in the page, for example with document.getElementById('results').innerHTML
Putting it all together:
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
<textarea id=edit_1 onchange="document.getElementById('results').innerHTML=currency_convert(this.value,'USD','GBP')"></textarea><br>
Converted into GBP:<div id=results></div>
<p><small>Currency data courtesy coinmill.com</small></p>
Whene I enter "273" into the textarea, I then see "Converted into GBP: 176.32" on the page.
You can test out a live example on jsfiddle: http://jsfiddle.net/wAxnq/
How can i use google earth API with backbone.js+jquery mobile ?
I have created application using backbone.js, underscore.js and jQuery Mobile.
For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api
My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".
Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.
I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.
my js code as under,
myjs1.js
var ge;
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
console.log(' init call back call ');
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
console.log(errorCode);
}
Now my Backbone code as under,
myjs2.js
WebApp.MyPage= Backbone.View.extend({
initialize:function (result) {
this.template =_.template($('#myPage').html());
},
render:function (eventName) {
var self = this;
mydata = object dict of my data;
$(self.el).html(self.template({mydata:mydata}));
google.load("earth", "1");
init();
google.setOnLoadCallback(init);
}
Now my HTML code like as under,
<script type="text/template" id="myPage">
<div data-role="page">
<div data-role="content">
<div id="map3d" style="height: 400px; width: 600px;"></div>
</div>
</div>
</script>
myhtml.html
Is there any way to fix this?
Any help appreciated.
The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!
If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.
But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.
I have MVC app.
I have written below code in the JS in Create view.
Basically on the basis of selection on drop down I show and hide the div.
Now the problem is below code works perfectly in Google chrome and Mozilla Firefox.
but now working in IE 8.
What should I do ?
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
if(ptype=="On Account")
{
$(".InvoiceDiv").hide();
}
else
{
$(".InvoiceDiv").show();
}
});
I am not sure what real issue is but since you are using jQuery why don't you use it for your ptype, too? With this, cross-browser issue will be minimized (if not completely avoided).
$('#PaymentType').change(function(){
var ptype = $(this).val();
...
});
Hope this helps.
If your Js files has full of references to a method called document.getelementbyid
Or order of your Js files and Css files which you import to program with < Link / > Tag ,
Reorder them and test it in IE
i think that the reason your code breaks right at the beginning of the function.
I want to redirect to another page in Phonegap.
I have written the following code in javascript but it is not getting redirected:
window.location.href = "http://www.google.com";
Can anyone advise why it is not working?
You have to allow navigation of external sites inside your application by configuring the whitelist.
You have to use allow-navigation tag like this:
<allow-navigation href="http://www.google.com/*" />
Try doing the following:
Open your file Cordova.plist file
Right click on ExternalHosts -> Add Row
Set the String value of the new added row to *.
So, you should have your new added row like this:
Item0 String *
Normally, you should replace * with the external URL that you want to provide access to (like http://www.google.com for instance), but I used * to make sure that the problem comes from there or not.
For more information, check the "Domain Whitelist Guide" section of the online doc: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide .
Here's a simple working example using window.location.href:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
window.location.href = "http://www.google.com";
}
</script>
</head>
<body onload="init();">
</body>
</html>
Let me know if this works.
Most likely it's the page you are moving to. Does that page have the phongap.js files in it etc?
Try a simple test: create a new HTML page with just the basic elements and a couple words in the body so you know you are there. Save it as test.html. Now try window.location="test.html".
If that works then you know it's something in the new page.
Good luck!
Have you checked your framework initializations? Make sure jquery and phonegap are completely loaded before you try to change the page. Or else phonegap will hang and break.
Take a look here: Correct way of using JQuery-Mobile/Phonegap together?
Working fine for me with Cordova 4. Can you try remote debugging with Google Chrome and see what happen in the Javascript console?
Try without href:
window.location = "http://www.google.com";
if you use like window.location or window.location.href and it stll doesn't work in IOS or safrai.
you can use this:
var isAndroid = !!navigator.userAgent.match(/android/ig);
var targetUrl = 'your url';
window.location = targetUrl;
if(!isAndroid) {
var doc = window.document,
ifr = doc.createElement('iframe');
ifr.src = targetUrl;
ifr.style.cssText = 'display:none;';
doc.body.appendChild(ifr);
}
There seems to be some issues when combining MathJax and jQuery Mobile on the same page. Sometimes the MathJax renders correctly and other times it does not - and this can happen to the same page.
The HTML that loads both of them looks like this:
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'>
</script>
<script type='text/javascript'
src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js'>
</script>
<link rel='stylesheet' type='text/css'
href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' />
<script src='/beta/mathjax/MathJax.js'>
</script>
You can see an example page here: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772
Edit: It seems to be a problem with MathJax not recognizing a new page being loaded via AJAX - here is an example that doesn't seem to work: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678
Well I found a solution... and it goes something like this:
First assign unique numbers to the pages. Since these pages are generated in PHP, this can be accomplished by using uniqid().
Assign the following function the the pageshow event:
$('#page_id').live('pageshow', function(event, ui) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'path_to_mathjax/MathJax.js';
script.onload = callback;
document.getElementsByTagName('head')[0].appendChild(script);
});
This loads MathJax and inserts it into the DOM - this script should be included within the page element. Also note that we mention a 'callback'. This will be called when the script loads.
This function (the callback) needs to go outside of any pages. This will prevent it from being included twice after a new page is loaded.
var mathjax_loaded = false;
function callback()
{
if(mathjax_loaded)
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
else
{
MathJax.Hub.Startup.onload();
mathjax_loaded = true;
}
}
There's a lot here. First of all, we keep track of whether this callback has been called once before. If not, we tell MathJax to parse the page as if it were invoked from the window.onload event. If this has already happened (and we're on a new page) then we simply need to have MathJax run through the new page.
I'm probably missing something and there may be a better way of doing this. But I haven't found any other way that works.
Not sure if this is easier/better way to add a script but here is what I found:
http://api.jquery.com/jQuery.getScript/
Can't append <script> element
(Untested) Maybe (using your post: Combining jQuery Mobile and MathJax on a mobile site?)
$('#page_id').live('pageshow', function(event, ui) {
$.getScript('http://path_to_mathjax/MathJax.js', function() {
callback();
});
});
var mathjax_loaded = false;
function callback()
{
if(mathjax_loaded)
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
else
{
MathJax.Hub.Startup.onload();
mathjax_loaded = true;
}
}