I wrote the following code in my test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item {
background:blue;
color:yellow;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById("item");
TweenLite.to(logo, 2, {left:"542px", backgroundColor:"red", borderBottomColor:"#90e500", color:"white",ease:Expo.easeOut});
}
</script>
</head>
<body>
<p id="item">thsi is a para</p>
</body>
</html>
But when I run it, I get the error message in console
Uncaught ReferenceError: Expo is not defined
at window.onload (test.html:16)
How can I use Expo.easeOut?
To do easing, you have to include EasePack too:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
(Or use TweenMax instead, wich includes CSSPlugin and EasePack among other features.)
Related
I am new to both Vue and Python Flask. I have been searching for some charts that Vue provides. One of them is the FunnelGraph.js. I am however not quite sure how to integrate them together.
I tried to follow the documentation https://github.com/greghub/funnel-graph-js#usage but I'm not quite sure where to use the graph variable. I have chosen to use its CDN.
In python's Flask's app.py I have,
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/about')
def about():
return render_template('about.html')
if __name__ == "__main__":
app.run(debug=True)
In the about.html, I have
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/theme.min.css">
<title></title>
</head>
<body>
<div id="graph">
<h1>graph</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/funnel-graph-js#1.3.9/dist/js/funnel-graph.min.js"></script>
<script>
var graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: [12000, 5700, 360],
displayPercent: true,
direction: 'horizontal'
});
graph.draw();
</script>
</body>
</html>
With the current setup I get the error from the chrome inspector console:
funnel-graph.min.js:1 Uncaught TypeError: Invalid attempt to spread non-iterable instance
at funnel-graph.min.js:1
at g (funnel-graph.min.js:1)
at e.value (funnel-graph.min.js:1)
at new e (funnel-graph.min.js:1)
at about:21
Looks like a problem with FunnelGraph: it appears to throw this error when you define data as an array, although they have this example in their documentation. To work around it, define your data as an object:
var graph = new FunnelGraph({
container: '#graph',
gradientDirection: 'horizontal',
displayPercent: true,
direction: 'horizontal',
data: {
values: [12000, 5700, 360]
},
});
graph.draw();
I also had to adjust your container selector to be #graph since that is what you have in the markup.
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
I need to use javascript (with no tag) to setup videojs with below simple codes, but the css seems not loaded correctly, what's the right way for this as the HTML way is ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<div id="videoarea"></div>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
You have to include an html5 video tag on the page. This ensures proper device fallback and is required for videojs to properly load.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<video id="videoarea" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264"> </video>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
Complete script:
<!doctype html>
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
The location dojo1.7/dojo/dojo.js is correct(checked on firebug). The error now I am getting is
ReferenceError: dojo is not defined
console.log(dojo)
So what do I missed here?
Use a doctype.
Scripts are loaded and executed in the order they are defined in HTML, so scripts that define objects need to be placed before the script that uses the object.
A global dojo object is never defined when you are running in async mode. You need to use the global require function to explicitly load dependencies:
require([ 'dojo/dom', 'dojo/on' ], function (dom, on) {
// code here
});
Try to put the console.log(dojo); script block below the actual script. Now you're actually looking for dojo at the moment it isn't there yet.
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
We are trying to load both Ext 3 and Ext 4 with the use of ext-all-sandbox.js to be able to use GeoExt in Ext 4.
Looking in our DOM it seems we have succeeded with loading Ext 3, Ext 4, GeoExt and OpenLayers but are still getting errors like:
"Ext.functionFactory() is not a function" and "Ext.supports is
undefined" .
Is there anyone out there that have tried a similar thing?
This is the index.jsp where we are loading the js files.
<!DOCTYPE HTML>
<%# page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- Ext 4 with sandbox mode -->
<script type="text/javascript" src="../gt-static/extjs/ext-all.js"></script>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js">
</script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-all-gray.css"/>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css">
<!-- Ext 3 -->
<script src="../gt-static/ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"> </script>
<script src="../gt-static/ext-3.2.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.2.1/resources/css/ext-all.css"></link>
<!-- OpenLayers -->
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
// Start app on ready
Ext4.Loader.onReady(function(){
Ext4.Loader.setConfig({enabled: true});
Ext4.require(['Ext4.picker.Date']);
var head = Ext4.fly(document.getElementsByTagName('head')[0]);
// GeoExt
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/lib/GeoExt.js'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/resources/css/geoext-all-debug.css'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : 'app.js'
});
},this,true);
</script>
</head>
<body></body>
</html>
and where we use GeoExt together with Ext 3 and Ext 4:
Ext4.define('GT.controller.Authenticated', {
extend : 'Ext4.app.Controller',
views : [ 'Authenticated' ],
init : function () {
"use strict";
this.control({
'authenticated' : {
render : function () {
var panel = new Ext.Panel({
title : 'EXT3'
});
Ext4.getCmp('mappanel').add(panel);
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS("Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{
layers : "bluemarble"
});
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo : 'mappanel',
height : 400,
width : 600,
map : map,
title : 'A Simple GeoExt Map'
});
}
}
});
}
});
Screenshots
FireBug - DOM
http://img842.imageshack.us/img842/492/dommq.png
FireBug - Errors - Console
http://img33.imageshack.us/img33/3703/errorsp.png
We managed after alot of problems to solve it:
<script type="text/javascript" src="../gt-static/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="../gt-static/ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.3.1/resources/css/ext-all.css"></link>
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="../gt-static/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/GeoExt/resources/css/geoext-all.css"></link>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css"/>
Now it is possible to load a GeoExt MapPanel into a Ext 4 container.
Now our problem is that the CSS files dosent seem to work as the ext-all-gray.css
If u guys out there have thoughts about that it would be very appreciated