For a website I'm trying to load the Google Maps script async, because it makes some browser (Firefox) ignore scrolling before all the scripts are loaded from Google.
I looked at the google developers docs and used their script.
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
works all perfect as long as you place it inside a <script> tag in your index.html.
But when I place this code for example in my main.js file it isn't working anymore.
Example: http://jsfiddle.net/693xK/
Then I found this example on jsfiddle which seems to work:
http://jsfiddle.net/doktormolle/7cu2F/
But over here the same problem. When I place it inside of my main.js file Google Maps isn't showing up. Everything is global. I get the following error but I don't understand what to do about it. I googled the error message but haven't had any luck.
TypeError: window.initialize is not a function
You're missing to add width and height to your #map-canvas. Also I checked your fiddle, since you're using window.onload = loadScript; so wrap it in head (left corner, under Frameworks & Extensions)
#map-canvas{
width:500px;
height:500px;
}
check this updated JSFiddle.
Related
I want to edit some images which can only be done in WPBakery Page Builder. So, when I try to edit the page with it, the frontend editor (page builder) doesn't loads. Console shows the following error:
Although, the library script tag is added before the tag which is using this library:
I don't know if any of this makes sense, but, yeah, I have tried these solutions because they were mentioned on different forums:
Adding charset="utf-8" to external script tag.
Moving the script tag inside Raw HTML element.
Using $(document).ready(function(){}) to enclose the whole of second
script. So, that it loads after everything is loaded.
Unfortunately, none of these worked for me.
The page builder works fine on pages where I don't use the d3.js library. And, the visualization works fine WHEN NOT IN PAGE BUILDER - the library loads up and the visualization is displayed. You can check it out here:
https://conductscience.com/age-when-charles-darwin/
Also, please note that I don't have access to any of the theme files. So, I can't make any changes to functions.php or any other file.
Your question is related to the WPBakery, not Visual Composer plugin. You need to have the latest version 5.7 in order to fix this issue. More information, contact support.wpbakery.com if you have a valid license.
Simple problem (or so it seems). CKEditor works fine. But when I dropped in CKFinder, I get the error, "CKFinder is not a constructor" when attempting the follow:
var finder = new CKFinder();
finder.basePath = '/includes/ckfinder/';
finder.create();
Well, basically it's the first line that causes it, rendering the others pointless. This is copied/pasted directly from the CK website, minus the change in basepath.
If I do a View Source on the page in Chrome, I can click on the link for ckfinder.js and it opens a tab and shows that it's there. Yet it just doesn't work.
For the sake of completeness, here's the script tag:
<script type="text/javascript" src="/includes/ckfinder/ckfinder.js"></script>
What have I done wrong?
Figured it out. It wasn't clear at all when I downloaded the trial that it's serving either v3 or v2 of the code. I had installed v3 and was using the JavaScript API, which is v2. Once I put the v2 code in place, the error went away.
So I wrote this page from scratch, using php, python and bash. The page collects data from the server, and displays it.
I would like to add tooltips on the world map, such that the user could see the station name on click/mouseover. I followed this tutorial.
1- I wrapped my world image with #wrapper
2- I added the CSS code
3- I added the Javascript code.
This appeared to look fine in the beginning and the tooltip is working, but on Google Chrome, like 90% of the time (I'm on Windows 10 viewing this) I suddenly see that the world map gets messed up, as follows, getting over the data plots:
While it should look like this:
I noticed that this problem happens in Google Chrome, and not on Mozilla Firefox or Microsoft Edge... Why is this happening? I have the feeling that a simple float command could fix it. Could you please help me with this? Why is this happening?
If you require any additional information please ask.
UPDATE:
I noticed removing this part of the script solves the problem:
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
But then the tooltip doesn't work.
You have your rome.js included in head section. If it will be loaded earlier then html body, it will be executed earlier then dom content loaded.
So the first time evertything works, because js is loading with dom content. After first refresh js will be taken from cache and executed too early.
So you should prevent that using jquery $(document).ready() method or DOMContentLoaded event.
Or you could simply include your rome.js in the end of the body section.
There are two things not working out here:
You don't have a doctype.
You have some <style> and <script> tags before your <html>. They should be inside your <head> or <body>
I am trying to implement a firefly effect on my Wordpress site.
When my designer created a static HTML site (http://fictiontech.net/cirko/) everything works just fine and the fireflies look great.
The I converted the site design to Wordpress (http://greenpeaklabs.com/cirko/) and now the fireflies don't appear anymore.
When I look in the console, it tells me that my initiating code:
<script>
//firefly effect
jQuery(document).ready(function() {
$.firefly();
});
</script>
it tells me "Uncaught TypeError: undefined is not a function" even though it's the exact same initialization as on the static HTML site.
I've also found a Wordpress site where the firefly effect works just fine (yootheme.com/demo/wordpress/radiance)
I've hit my head against this wall for a number of hours now, trying to scour the interwebs for solutions as well as reviewing working code to try and back into the problem, but no luck. Any idea where the error is coming from and how I can make it work
As WordPress is running jQuery in no-conflict mode, the $ alias is not defined – you should change your function call to either:
jQuery(document).ready(function() {
jQuery.firefly();
});
or
jQuery(document).ready(function($) {
$.firefly();
});
See http://jsfiddle.net/masa671/7g37Y/. The map is not being displayed.
It works on Yui (the code in the comments at the bottom of JS), but why not with the basic addDomListener?
Call the API from the left sidebar under External resources.
Add http://maps.google.com/maps/api/js?sensor=false and hit the + sign to add the API to the external resources that will be loaded.
If you use the addDomListener then use No wrap - in <head> in Frameworks and extensions.
Your map will work fine.