Menu
On my mobile website. I've been trying to load Adsense Mobile ads, but they continue to take up the entire page after the page loads itself.
I did figure out that if I disable ajax the page would load fine with the ad together. This only works on the second page I load because I click a link with the tag...
data-ajax="false"
Which makes the next page load perfectly.
Problem: The first page loaded will be overwritten by the adsense ad because ajax is enabled (I think).
Basically the first part of my page looks like this...
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="header">
<h1>Angry Birds Cheats</h1>
</div>
<div data-role="content">
<div>
<script type="text/javascript"><!--
// XHTML should not attempt to parse these strings, declare them CDATA.
/* <![CDATA[ */
window.googleAfmcRequest = {
client: '',
format: '',
output: '',
slotname: '',
};
/* ]]> */
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
</div>
I did try to disable ajax in the code, but I don't think it is because the ad still takes up the entire page...
I was thinking that maybe I could start the visitor at a certain page and redirect them to a page that is non-ajax.
460
Check-out the docs for binding to the mobileinit event: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
Specifically this bit:
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.
Here is the proper format for binding to the mobileinit event:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
First the jQuery Core (so .bind() will be available), then the mobileinit event handler, then the jQuery Mobile js file (this is last so the event handler for mobileinit will be set before the event is fired).
You can test that your current mobileinit event handler is not firing by putting an alert in the function.
95
The updated jQuery Mobile documentation is here: http://jquerymobile.com/test/docs/api/globalconfig.html
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.
The mobileinit event
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit.
$(document).on("mobileinit", function(){
//apply overrides here
});
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
You can override default settings by extending the $.mobile object using jQuery's $.extend method.
$(document).on("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
Alternatively, you can set them using object property notation.
$(document).on("mobileinit", function(){
$.mobile.foo = bar;
});
A helpful page to understand jquery mobile ajax behavior
http://jquerymobile.com/test/docs/pages/page-links.html
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax.
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
