Im trying to implement google adsense ads and they aren't showing up, but when I inspect the area they are suppose to be it looks like they are there. Im working in a rails 5 app and I am using turbolinks, which Ive seen may cause issues. Heres the code in my project:
<div class: 'recipe-card-link'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="image-top"
data-ad-layout-key="-90+2e-hl+fr+q4"
data-ad-client="ca-pub-****************"
data-ad-slot="8061638025"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
When I inspect the item it has a bunch of etc inputs and looks like it called the script and put everything there but nothing shows up. Its just a white space.
EDIT: Attached an image of what it shows when I inpsect (since I cant copy all of it)
1.- First, try changing:
script async to script async='async'
2.- Then use the following JS to run adsense.
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-YOURID",
enable_page_level_ads: true
});
//]]>
</script>
Related
I have this at the bottom of a form partial, which worked previously when I loaded it through application.html.erb, but have since decided to replace it in application.html.erb with Google Maps.
_new.html.erb (with the field appropriately id'd). straight up doesn't work, can't figure out why.
<script>
$(document).ready(function(){
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"));
});
function initAutocomplete(){
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
Try moving
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
to the in application.html.erb head tag
Then put
initAutocomplete = ->
$(document).ready ->
autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('autocomplete'))
return
Into a coffeescript for you front page, or use your existing script inline of the partial to test if you need to.
I've been trying to get TinyMCE to use a custom execcommand_callback handler to perform actions when the File Menu::New Document option is selected, but have been unable to get it to work at all, even on the most basic level. The project is on Rails 4, and I'm using the tinyMCE-rails gem from:
https://github.com/spohlenz/tinymce-rails
and following the example from:
http://www.tinymce.com/wiki.php/Configuration3x:execcommand_callback
I've put the following in tinymce.yml
execcommand_callback: "myCustomExecCommandHandler"
The resulting html:
<script>
//<![CDATA[
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
alert('hello');
}
//]]>
</script>
some html ...
<form accept-charset="UTF-8" action="" id="homepage_form" method="post">
<textarea class="tinymce" cols="10" id="editor" name="editor" rows="10"></textarea>
<script>
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","document_base_url":"/",
"theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen,image,link",
"plugins":"table,fullscreen,image,link",
"execcommand_callback":"myCustomExecCommandHandler"});
//]]>
</script>
more form fields ...
</form>
To all appearances, this does nothing. Doesn't even raise a warning or error. What am I doing wrong?
Ok, I figure I should wrap this up for anyone else interested in this question, and thanks to Nishant for getting me on the right track.
Using TinyMCE 4 with the tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) is straightforward and requires less configuration. Since I wanted the ability to embed links and images, my tinymce.yml file looks like:
document_base_url: /
plugins:
- image
- link
setup: "myNewDocumentHandler"
An my custom command handler looks like:
function myNewDocumentHandler(ed) {
ed.on('BeforeExecCommand', function(e) {
if (e.command === 'mceNewDocument') {
alert('New Document Command Handled');
}
});
}
You can see it work here: http://fiddle.tinymce.com/uRdaab/4
There is no problem in your callback . It works fine .
Check http://fiddle.tinymce.com/pRdaab
There is some problem here in plugins line , when you remove image and link it works . Check my fiddle and here is the code . I dont know why but try to figure that.
image is usually advimage , not sure about link plugin / feature however .
<script type="text/javascript">
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {alert('hello');}
tinyMCE.init({"selector":"textarea",
"document_base_url":"/",
"theme_advanced_toolbar_location":"top",
"theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen",
"plugins":"table,fullscreen",
"execcommand_callback":"myCustomExecCommandHandler"});
</script>
<form method="post" action="dump.php">
<textarea>Foo</textarea>
</form>
So normally its good to use a classic TinyMCE init and then work on it . Its better to first get TinyMCE working properly and then examine add the call back functionality . One issue at a time saves a lot of troubleshooting . I am trying to implement that in my programming skills too !
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
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.
So I was using trigger.io to create a page where there's a custom menu at the bottom and each button loads an external HTML page into main container. I had to hack around to make this work so I was wondering if there's a better way of doing it.
I started using the $('.main').load('pages/test.html') and it doesn't work. Instead I had to do:
forge.file.getLocal('pages/test.html', function (file) {
forge.file.string(file, function (str) {
$('.main').html(str);
});
});
which is kinda messy.
Also if the str HTML content as a img tag, the img doesn't show since the src attribute gets messed up. So I had to do another hack:
forge.file.getLocal('pages/test.html', function (file) {
forge.file.string(file, function (str) {
var $main = $('.main');
$main.html(str);
//Hack to resolve img src
var imgPath;
$main.find('img').each(function () {
var $this = $(this);
// First 8 chars is "file:///"
imgPath = $this.prop('src').substr(8);
forge.file.getLocal(imgPath, function (file) {
$this.prop('src', file.uri);
});
});
});
});
Any better way of purely loading an external HTML page without all the hassle?
Thanks!
Testing with forge platform v1.4 (at the time of writing, v1.4.18) on Android 4.1 and iOS (both the iPhone simulator and an iPad), I seem to be able to use jQuery's load method without any extra effort. Here's the structure for my testcase:
src/
index.html
face.png
pages/
hello.html
Here's the contents of index.html
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.content').load('pages/hello.html');
});
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
And pages/hello.html:
<b>hello world</b><img src="face.png">
Which resulted in this just after app launch:
One gotcha I can see with this approach is that the src attribute for the img tag had to be relative to index.html. If you're still having problems then a more specific testcase and/or details of forge platform version used as well as what devices/simulators you tested on might be useful.