I wrote html page with simplest graph. It contain only one node.
In FireFox it's showed well, but Safari (5.1.7 fo Windows) does not show it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
<div id="cy" style="height:100%;width:100%;position:absolute;left:0;top:0;"></div>
</body>
</html>
<script>
$(function(){ // on dom ready
$("#cy").cytoscape({
elements: [ { group: 'nodes', data: { id: 'a', name: 'Adam' } } ],
ready: function(){
}
});
alert('END');
}); // on dom ready
</script>
Moreover I use function alert('END') to check that everything is ok.
And FireFox shows message 'END', but Safari does not.
Only if I remove line 'elements: [ ... ]', then Safari shows message 'END'.
Any idea?
Cytoscape.js uses HTML5 technologies such that only A-grade autoupdated browsers are supported. Safari 5 is very old, and I don't think it's supported on Windows anymore.
Related
Downloaded the default setup using the CKeditor v5 online builder.
When using it all works. But when using the to load the local (and downloaded online builder version) all the buttons are gone, why?
Help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="/ckeditor5/build/ckeditor.js"></script>
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/20.0.0/classic/ckeditor.js"></script> -->
<body>
<div id="editor">Test Text (buttons missing)</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Check the source code of the sample attached to a CKEditor 5 build (samples/index.html). You will notice that there is a toolbar configuration provided that you need to pass when initializing the CKEditor instance.
For Angular users:
Even though default ckeditor build (#ckeditor/ckeditor5-build-classic/build/ckeditor) brings it's own toolbar buttons,
you'll have to add it yourself for custom builds (https://ckeditor.com/ckeditor-5/online-builder/ for instance)
Copy the toolbar array generated from theCustomBuild/sample/index.html to your config:
html:
<ckeditor [editor]="Editor" [config]="config"></ckeditor>
in your component:
public config = {
toolbar: [
'exportPdf',
'heading',
'|',
'bold',
...
]
};
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment
What's the best way to embed a rally app inside a confluence document?
I tried pasting my code between {html} macros but it doesn't work
{html}
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p4/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
...
...
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
{html}
The above code works fine when opened directly, but doesn't display anything when pasted inside confluence's {html} macro. (I am logged into rally in another tab)
A work around is to host the html page on a server and include it in an {iframe} macro in confluence. However some browsers might have cross-domain related security issues.
Finally I decided not to render the content inside my confluence page. I just hosted the html page on a server and added a link to it in my confluence page.