Following this tutorial, I am trying to include cytoscape.js into a super basic web page. I downloaded cytoscape via npm install cytoscape, and copied cytoscape/dist/cytoscape.js into my project directory. The directory looks like:
Kyles-MBP:Desktop kyleweise$ tree testing-cytoscape/
testing-cytoscape/
├── cytoscape.js
└── index.html
I have basically copied what appears in the tutorial, and index.html looks like:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
</script>
</body>
</html>
However, when I try to view the file via a web browser (I've tried Chrome, Safari, and Firefox), I see nothing. When I view the developer tools in whichever browser, the HTML does not match that of my index.html file. Specifically, the <meta charset = "UTF-8"> does not show up, and the <body> tag is empty. I am very new to web development and JavaScript, so I am not sure what I am doing wrong here. Why doesn't the index.html, when viewed in the browser, match what I have written in my text editor and how can I get this to display the graph?
Your code seems to be correct.
Anyway I suggest to use the citoscape cdn:
https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.js
or
https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js for the minified version.
and it works
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.14/cytoscape.min.js"></script>
<div id="cy"></div>
Related
I'm not a JavaScript developer, and I'm struggling to do a little experiment as a side project.
I'm trying to use this script without RequireJs.
https://github.com/xxmuaddib/lottie-colorify/blob/master/examples/example1/index.html
I've been trying for a while and checked StackOverflow, but I have very little knowledge of JavaScript.
Here's what I got so far:
<html style="width: 100%; height: 100%">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.3/lottie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
<script src="../../lib/umd/index.js"></script>
</head>
<body style="background-color: #ccc; margin: 0px; height: 100%; font-family: sans-serif; font-size: 10px">
<div style="width: 100%; height: 100%; background-color: #333" id="bodymovin"></div>
<script>
//requirejs(['../../lib/umd/index'], function (lc) {"
$.getJSON('https://assets6.lottiefiles.com/packages/lf20_guwqiaxe.json', function (data) {
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'html',
loop: true,
prerender: true,
autoplay: true,
animationData: lc.flatten('#ffff00', data),
};
var anim = bodymovin.loadAnimation(animData);
});
//});
</script>
</body>
</html>
I removed the CDN for RequiredJS and its implementation and linked the script manually between <script> tags.
But now the variable lc is not defined.
requirejs load the script for this file
https://github.com/xxmuaddib/lottie-colorify/blob/master/lib/umd/index.js
so if you'll comment this library just remove its callback return "lc" variable
line that throws the error should be like that
animationData: flatten('#ffff00', data), //you already imported the lib/umd/index.js file which has this function
how do i save this events even after refreshing the page in fullcalender.js
this events after refreshing sets back to its location
and does not update .
as events are switched to another date after refresh they sill font update
after which file should i write in to make this changes and what should i write to make this changes
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2018-05-15',
selectable: true,
editable: true,
events: [
{
title: 'Meeting',
start: '2018-05-15T10:30:00',
end: '2018-05-15T12:30:00'
},
{
title: 'Lunch',
start: '2018-05-15T12:00:00'
},
{
title: 'Meeting',
start: '2018-05-15T14:30:00'
},
{
title: 'Tea Hour',
start: '2018-05-15T17:30:00'
},
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
To persist your changes you will need to use a database. Fullcalendar only provides only the functionality, not the persistence.
Another workaround without a Database would be the use of localStorage. There you can store the events client-sided and check if if events are stored in the localStorage. If there are stored events, apply them to the calendar.
But you can not store an event and see it on another client without a database.
I neede to customize labels (like a bubbletalk) of a kendo line chart.
I build a template (like in this kendo test: http://dojo.telerik.com/#PMcDonou/URiZA. I took this demo from an admin solution in a kendo forum thread) and it work when load the page first time, but in some situations kendo UI not render the labels.
The problem appears in this two cases:
When I refresh manually chart with a button that to click on it you need to
scroll the page.
When i refresh the page(F5) after that i scrolled down the page.
I noticed that the position of the labels moves upwards based on the offset from top given by scrolling.
I did this fiddle for you to see the first case.
For see an example of the second case look the fiddle in a full screen page, try to scroll down and refresh the page(F5) and try this in multiple positions of scroll. Thank you for attention and help me please.
function createChart(){
var dataSource = new kendo.data.DataSource({
data: [{
category: "A", value: 10
}, {
category: "B", value: 20
}, {
category: "C", value: 30
}]
});
var labelTemplate = kendo.template($("#labelTemplate").html());
$("#chart").kendoChart({
dataSource: dataSource, series: [{
type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
visible: true, template: "#= category #", visual: function(e) {
var dataItem = $.grep(dataSource.data(), function(item) {
return item.category === e.text;
})[0];
// Label origin position (same as where the original label would be)
var origin = e.rect.origin;
var content = $('<div/>')
.css({
position: "absolute",
font: "11px Arial,Helvetica,sans-serif",
left: 0,
top: 0
})
.appendTo(document.body)
.html(labelTemplate(dataItem));
var visual = new kendo.drawing.Group();
kendo.drawing.drawDOM(content).done(function(group) {
// Place drawn shapes on original label position
group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
visual.append(group);
// Remove element from DOM
content.remove();
});
return visual;
}
}
}]
});
}
$(function(){
createChart();
$("#refreshChart").on("click", function(){
$("#chart").data("kendoChart").refresh();
})
});
.talk-bubble {
width: auto;
height: auto;
background-color: red;
color: white;
border-radius: 30px;
}
.talktext {
padding: 1em;
text-align: left;
line-height: 1.5em;
}
.talktext p {
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Div for chart -->
<div id="chart"></div>
<!-- Example div container -->
<h1>Go down and click button</h1>
<div style="height:3000px; background-color: yellow;"></div>
<!-- Button that refresh chart -->
<h3>Click button</h3>
<button type="button" id="refreshChart">Refresh chart</button>
<h1>Now go up, label not rendered</h1>
<!-- Label Template Custom -->
<script id="labelTemplate" type="text/x-kendo-template">
<div class="talk-bubble">
<div class="talktext">
<p>Value: #= kendo.format('{0:n2}', data.value) #</p>
</div>
</div>
</script>
</body>
</html>
I've just implemented the example from tutorial page and the normal upload works just fine but I also wan't to make use of the camera on mobile devices, so I've added the code from this fineuploader blog post.
Now, if I click the Camera button the file selection dialog appears or the camera app opens, but that's it. I'm only getting this message in my Javascript debug console:
"Uncaught TypeError: Cannot read property '_handleNewFile' of undefined"
Here's my client code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="resources/fine-uploader/fine-uploader.css" rel="stylesheet">
<script src="resources/fine-uploader/fine-uploader.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/template" id="qq-template">
...default-template...
</script>
<script type="text/javascript">
$(document).ready(function(){
var uploader = new qq.FineUploader({
element: document.getElementById("myFineUploader"),
camera: {
ios: true
},
debug: true,
request: {
endpoint: 'upload/receiver/'
}
});
qq(document.getElementById("cameraButton")).attach("change", function() {
uploader.addFiles(this);
});
});
</script>
<title>Fine Uploader default UI</title>
</head>
<body>
<div id="cameraButtonContainer" class="qq-upload-button" style="position: relative; overflow: hidden; direction: ltr;">
<div>Camera</div>
<input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</div>
<div id="myFineUploader"></div>
</body>
</html>
Your help is appreciated!
Just found that the default example button also make use of the camera on mobile devices, so there is no use of the camera button for me.
Edit:
Chrome on IOS 8 won't give the camera option
The Standard browser on Android 4.2.2 opens camera but taken pictures won't be uploaded
I've pulled out the accordion layout .html and .js files from the extjs examples (below).
What is the next step to make this dynamic e.g. how the syntax of a link looks so that the HTML that fills a section under a panel on the left has links which fill the content on the right.
Does anyone know of tutorials which go beyond this shell and show how to make it dynamic, i.e. integrate it in a working application?
<html>
<head>
<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Start',
html: '<this is the start content>',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Application',
html: '<empty panel>',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Module',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'This is where the content goes for each selection.'
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
There's a billion ways to do it. The question is vague... but here's a very simplistic one. Just have an Ajax function that calls the server and adds the panels dynamically.
Say your server provides the following JSON, by calling /links.json
{links: ['http://www.google.com'], ['http://www.yahoo.com']}
You would do the following
Ext.onReady(function() {
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion'
});
new Ext.Viewport({
layout:'border',
items:[
accordion,
{region:'center', html:'This is where the content goes for each selection.'}]
});
Ext.Ajax.request({
url: '/links.json',
callback: function(response) {
var json = Ext.decode(response);
var cfgs = [];
for (var i = 0; i < json.links.length; i++) {
cfgs.push({
html: json.links[i]
})
}
accordion.add(cfgs);
}
});
});
But there's nothing that I coded here that you didn't already know, is there?
Here's a very good source of information that will probably help you get forward:
Saki's Ext Examples Page.