I follow a tutorial but I still having a problem as title say.
I have a index.html and a backend with Node connected to Mongodb and I can't get it to work.
Here is my index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material_nofont.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js"></script>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
<script>
function init() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init("scheduler_here", new Date(), "week");
// enables the dynamic loading
scheduler.setLoadMode("day");
// load data from backend
scheduler.load("/data", "json");
// connect backend to scheduler
var dp = new dataProcessor("/data");
// set data exchange mode
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
And as the title say I get this error:
(índice):28 Uncaught ReferenceError: dataProcessor is not defined
at init ((índice):28:13)
at onload ((índice):36:24)
And my backend works right because on my /data route with this code
app.get('/data', function (req, res) {
events.find().toArray(function (err, data) {
//set the id property for all client records to the database records, which are stored in ._id field
for (var i = 0; i < data.length; i++){
data[i].id = data[i]._id;
delete data[i]["!nativeeditor_status"];
}
//output response
res.send(data);
});
});
I can get this JSON object (that it works loaded from MongoDB):
[{"_id":"62d73a68fcb2de5910bd9f08","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f08"},{"_id":"62d73a68fcb2de5910bd9f09","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f09"},{"_id":"62d73a68fcb2de5910bd9f0a","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f0a"},{"_id":"62d73ab8fcb2de5910bd9f0b","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0b"},{"_id":"62d73ab8fcb2de5910bd9f0c","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0c"},{"_id":"62d73ab8fcb2de5910bd9f0d","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0d"},{"_id":"62d73ab9fcb2de5910bd9f0e","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f0e"},{"_id":"62d73ab9fcb2de5910bd9f0f","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f0f"},{"_id":"62d73ab9fcb2de5910bd9f10","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f10"},{"_id":"62d73abafcb2de5910bd9f11","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73abafcb2de5910bd9f11"},{"_id":"62d73abafcb2de5910bd9f12","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73abafcb2de5910bd9f12"},{"_id":"62d73abafcb2de5910bd9f13","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73abafcb2de5910bd9f13"},{"_id":"62d7d077c94c005194ecf8d7","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d7d077c94c005194ecf8d7"},{"_id":"62d7d077c94c005194ecf8d8","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d7d077c94c005194ecf8d8"},{"_id":"62d7d077c94c005194ecf8d9","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d7d077c94c005194ecf8d9"}]
Why I get this error if I follow the tutorial from official web https://dhtmlx.com/blog/using-dhtmlxscheduler-with-node-js/
I tried to change function to new DataProcessor("/data") and get the same error
in the cdn file you imported
https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js
it seems that it's DataProcessor and not dataProcessor
function DataProcessor(serverProcessorURL) {
this.serverProcessor = serverProcessorURL;
this.action_param = "!nativeeditor_status";
this.object = null;
this.updatedRows = []; // ids of updated rows
this.autoUpdate = true;
this.updateMode = "cell";
this._tMode = "GET";
this._headers = null;
this._payload = null;
this.post_delim = "_";
this._waitMode = 0;
this._in_progress = {};
this._invalid = {};
this.messages = [];
this.styles = {
updated: "font-weight:bold;",
inserted: "font-weight:bold;",
deleted: "text-decoration : line-through;",
invalid: "background-color:FFE0E0;",
invalid_cell: "border-bottom:2px solid red;",
error: "color:red;",
clear: "font-weight:normal;text-decoration:none;"
};
this.enableUTFencoding(true);
Object(_utils_eventable__WEBPACK_IMPORTED_MODULE_1__["default"])(this); // TODO: need to update
return this;
}
I found the problem. In the last version 6.0 they replaced the initialization from new DataProcess to scheduler.createDataProcessor. Then, the new code working right is:
// index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material_nofont.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js"></script>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
<script>
function init() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init("scheduler_here", new Date(), "week");
// enables the dynamic loading
scheduler.setLoadMode("day");
// load data from backend
scheduler.load("/data", "json");
// connect backend to scheduler
var dp = new scheduler.DataProcessor("/data");
// set data exchange mode
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
Here the forum where I found it: https://forum.dhtmlx.com/t/dataprocessor-undefined-error-in-scheduler-node-and-laravel-project/74501
And here the documentation migrating from older versions: https://docs.dhtmlx.com/scheduler/migration_from_older_version.html#5360:~:text=DataProcessor%20initialization
Thanks for all anyway.
Related
Aim : to click box(x) and it opens pop-up(x);
This is my first javascript project, i've done loads of research but i'm still struggling.
The reason I'm using a getElementByClassList is because it returns an array. I would then take the array and get the corresponding pop-up box and change its display settings in css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1 boxes"></div>
<div>
<div class="box2 boxes"></div>
<div class="box3 boxes"></div>
</div>
<div class="popup1"></div>
<div class="popup2"></div>
<div class="popup3"></div>
<script>
const boxes = document.getElementsByClassName('boxes');
// i would like to add an eventlistener for each object in the array
//
</script>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => { // wait till all the DOM is Loaded, since querying objects at this point they are not there yet.
const boxes = document.querySelectorAll(".boxes"); // or use getElementsBy...
boxes.forEach(box => { // we are adding a click event listener to each box
box.addEventListener('click', (e) => {
const boxNumber = e.target.className.match(/box(\d)/)[1]; // through a regex we get the box number of the className
const popup = document.querySelector(`.popup${boxNumber}`);
console.log(popup)
// do whatever you want with the popup, add a className or whatever to open it :)
});
});
});
.boxes {
height: 20px;
width: 50px;
background: red;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1 boxes"></div>
<div>
<div class="box2 boxes"></div>
<div class="box3 boxes"></div>
</div>
<div class="popup1"></div>
<div class="popup2"></div>
<div class="popup3"></div>
<script>
const boxes = document.getElementsByClassName('boxes');
// i would like to add an eventlistener for each object in the array
//
</script>
</body>
</html>
The method getElementsByClassName() indicats that return an array of html objects, in case there exists elements with passed css class.
The first step you have to iterate trough the array object:
for (int index = 0; index < boxes.length; index++)
{
}
Within for loop access to each element and assign the eventent handle
boxes[index].addEventListnener('click', function()
{
});
Within the body of declared anonymous function add your code.
You can try :
const boxes = document.getElementsByClassName('boxes');
const popups = document.querySelectorAll(".popups");
boxes.forEach((box,index)=>box.addEventListener("click",()=>{
const popup = popups[index]; // This gets the popup based on the box index so you will have to setup the html so that the popup for box1 is the first then popup for box2 second etc.
// Add styles to popup to display it
// Example
popup.style.opacity = "1";
})
Visit the 'mdn docs' or 'youtube' to learn how the array methods like forEach work
I have loaded local html using Android WebView renderer. The html is loading properly. But the scripts which is referred inside html file is not loaded. The script files are located inside the assets folder.
Render File Code
protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var webView = new Android.Webkit.WebView(Forms.Context);
webView.Settings.JavaScriptEnabled = true;
if (Build.VERSION.SdkInt >= Build.VERSION_CODES.JellyBean)
{
webView.Settings.AllowUniversalAccessFromFileURLs = true;
webView.Settings.AllowFileAccessFromFileURLs = true;
}
SetNativeControl(webView);
}
if (e.NewElement != null)
{
Control.LoadUrl("file:///android_asset/Sample/index.html");
}
}
Html Code
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="file:///android_asset/jquery-1.10.2.min.js"></script>
<!-- Render -->
<script src="file:///android_asset/epub.min.js"></script>
<script type="text/javascript">
var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/);
$(document).ready(function () {
book.renderTo("area");
});
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="book.prevPage()" style="font-size: 64px;cursor:pointer;" class="arrow">‹</div>
<div id="area" ></div>
<div id="next" onclick="book.nextPage()" style="font-size: 64px;cursor:pointer;" class="arrow">›</div>
</div>
</body>
</html>
Can anyone suggest me to load corresponding JS files in webview rendering method?
Normally you would place your script tag at the bottom of your HTML not in the top.
<!DOCTYPE html>
<html class="no-js">
<head>
</head>
<body>
<div id="main">
<div id="prev" onclick="book.prevPage()" style="font-size: 64px;cursor:pointer;" class="arrow">‹</div>
<div id="area" ></div>
<div id="next" onclick="book.nextPage()" style="font-size: 64px;cursor:pointer;" class="arrow">›</div>
</div>
</body>
<script src="file:///android_asset/jquery-1.10.2.min.js"></script>
<!-- Render -->
<script src="file:///android_asset/epub.min.js"></script>
<script type="text/javascript">
var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/");
$(document).ready(function () {
book.renderTo("area");
});
</script>
</html>
You have also forgot a " at the end of var book = ePub("file:///android_asset/Sample/Azure_Cosmos_DB_and_DocumentDB_Succinctly/");
I have a page which uses a custom YouTube playlist plugin found here https://github.com/Giorgio003/Youtube-TV
When I have a single instance of the player on a page it works great, but if I try to add two or more players, only one will render.
This is a sample page with two playlists:
<!doctype html>
<html lang="en">
<head>
<title>YouTube TV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/ytv.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.test-title{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-9 col-lg-11">
<div>
<h4 class="test-title">Testing Responsive YouTube Playlist</h4>
</div>
<div id="responsive1"></div>
<div id="responsive2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="src/ytv.js"></script>
<script>
var apiKey = 'ThisIsAValidKey';
window.onload = function(){
window.controller = new YTV('responsive1', {
playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww',
responsive: true
});
};
window.onload = function(){
window.controller = new YTV('responsive2', {
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
</script>
</body>
</html>
I moved the API key out of ytv.js into a global variable.
// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';
Other than that, the js is the same as found here.
How can I modify this plugin to allow multiple instances?
Update:
I have also renamed the window vars with no change in result.
window.controller1 = new YTV(...);
window.controller2 = new YTV(...);
Solution:
As inferred from the marked answer below
window.onload = function(){
$('#responsive1').ytv({
playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F',
responsive: true
});
$('#responsive2').ytv({
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
By looking at the Youtube code, I could see it already handles multiple jQuery instance.
if ((typeof jQuery !== 'undefined')) {
jQuery.fn.extend({
ytv: function(options) {
return this.each(function() {
new YTV(this.id, options);
});
}
});
}
I created a quick fiddle: https://jsfiddle.net/pj8kpbzw/
Please check the console as it prints two instances.
i am trying to get html string from my site as it presented in browser
firstly i tried to use web client
using (var client = new WebClient())
{
var content = client.DownloadString("my_site_address");
}
but in my site i have some javascript code that change the view (and webClient does not run javascript)
so i use wpf WebBrowser and after nevigate to the desire site it show the page (as expected) but when i try to get the html string it show just like the webClient
dynamic doc = MainBrowser.Document;
var htmlText = doc.documentElement.InnerHtml;
this is how i get the html:
<!DOCTYPE html>
<head>
<title>Title</title>
</head>
<body>
<div class="conteiner">
<div class="matrix">
<script type="text/javascript">
// some script code
</script>
<script type="text/javascript" src="xxx"></script>
Matrix
</div>
<div class="zoom">
Zoom
</div>
</div>
<div class="test">
<script type="text/javascript">
// some script code
</script>
<script type="text/javascript" src"xxx2"></script>
</div>
</body>
</html>
and this is how i should get it after the javascript change it:
<html><head>
<title>Title</title>
</head>
<body>
<div class="conteiner">
<div class="matrix">
<script type="text/javascript">
</script>
<script type="text/javascript" src="xxx"></script><iframe ></iframe><script ></script><div ><div ><iframe >
<html><head>
<title></title>
</head>
<body>
<div >
<ul><li><ol><li <a </a></li></ol></li></ul> </div>
</body></html>
</iframe></div></div></div>
Matrix
</div>
<div class="zoom">
Zoom
</div>
</div>
<div class="test">
<script type="text/javascript">
</script>
<script type="text/javascript" src="xxx2"></script><div ><div ><div ><iframe ></iframe></div></div></div>
</div>
</body></html>
Please help :)
You can use the WebDriver framework from Selenium. It offers different web driver implementations, like for Internet Explorer or Firefox.
Here is some sample code to request a web site with Internet Explorer, let it render and finally save the final HTML markup.
public class WebSiteHtmlLoader : IDisposable
{
private readonly RemoteWebDriver _remoteWebDriver;
public WebSiteHtmlLoader(RemoteWebDriver remoteWebDriver)
{
if (remoteWebDriver == null) throw new ArgumentNullException("remoteWebDriver");
_remoteWebDriver = remoteWebDriver;
}
public string GetRenderedHtml(Uri webSiteUri)
{
if (webSiteUri == null) throw new ArgumentNullException("webSiteUri");
_remoteWebDriver.Navigate().GoToUrl(webSiteUri);
return _remoteWebDriver.PageSource;
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
private void Dispose(bool disposing)
{
if (disposing)
{
if (_remoteWebDriver != null)
{
_remoteWebDriver.Quit();
}
}
}
}
Usage:
class Program
{
static void Main(string[] args)
{
if (!args.Any())
{
return;
}
var pageUrl = args.First();
var options = new InternetExplorerOptions
{
IntroduceInstabilityByIgnoringProtectedModeSettings = true,
PageLoadStrategy = InternetExplorerPageLoadStrategy.Eager
};
using (var htmlLoader = new WebSiteHtmlLoader(new InternetExplorerDriver(options)))
{
var html = htmlLoader.GetRenderedHtml(new Uri(pageUrl, UriKind.Absolute));
File.WriteAllText(#"C:\htmlloadertext.html", html);
}
}
}
You could try to use the WebBrowser.DocumentText property. Like, add a hidden WebBrowser control to your application and call Navigate() function, then call the property to get the generated HTML
More info at: http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.documenttext.aspx
I'm relatively new javascript, but I am comfortable in other languages. I'm trying to use the Greensock timeline to construct modular sequences to reduce code duplication. I'm trying to have a singleton timeline that is accessible by all my functions. I tried just using a global var and attaching to() methods to it. That worked in chrome and iexplorer, but not Firefox. I received a "this.timeline is null" error in the Firefox error console. Then I tried this:
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
This made the singleton I want, but I get the same error only in FF. The code below works fine in both chrome and iexplorer:
dev.html:
<html>
<body>
<-- Page content... -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/TweenMax.min.js'></script>
<script type='text/javascript' src='js/foo.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
init();
});
</script>
</body>
</html>
foo.js:
//...singleton code from above...
function init(){
do1();
do2(-2);
}
do1(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#bar"),2,{css:{autoAlpha:1}},delay);
}
do2(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#canv"),2,{css:{autoAlpha:1}},delay);
}
So, this will make #bar and #canv enter at the same time (if I call do2(0); then #canv will come in after #bar is done).
Do you have any insight into what I'm doing wrong or why FF is handling the code differently?
Thanks for your help.
EDIT1
Browser Versions:
Chrome(19.0.1084.56)
Internet Explorer(9.0.8112.16421)
Firefox(13.0)
EDIT2
The error generates from inside of the TweenMax.min.js file.
EDIT3
Before trying to use a global timeline and a singleton, I implemented the desired functionality by passing a TimelineMax reference to each function and returning the updated TimelineMax. So, my code looked a little like this:
foo.js
function init() {
var tl = new TimelineMax();
tl = do1(tl);
tl = do2(tl);
}
do1(TL){
TL.to(...);
return TL;
}
do2(TL){
TL.to(...);
return TL;
}
This seemed to work fine in Firefox, but it's a little more tedious to play hot potato with the timeline object. Is that the preferred method? Where can I find well formed coding standards and best practices for javascript?
EDIT4
Here is the full non-working code. It works as expected in both chrome and ie, but I receive an error in FF coming from the TweenMax.js library.
dev_page2.html:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="css/dev.css">
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#main {
height:100%;
}
</style>
<![endif]-->
</head>
<body class="whiteBG">
<header class="center">
<div id="bar" class="invisible">
<nav>
<!-- nav elements here... -->
</nav><!-- nav -->
</div><!-- bar -->
<canvas id="ani" class='invisible center' width='840' height='420'></canvas>
</header><!-- End header -->
<section id="main">
<div id="content" class="center">
<p>
</p><blockquote>
</blockquote><p class="signature">
</p><p class="float-left">
</p><p class="float-left">
</p>
</div> <!-- End content -->
</section>
<footer class="invisible center">
<div id="footerLeft">
</div>
<div id="footerCenter">
</div>
<div id="footerRight">
</div>
</footer><!-- End footer -->
<script type="text/javascript" src="js/Jquery.js">
</script>
<script type="text/javascript" src="js/TweenMax.js"></script>
<script type="text/javascript" src="js/dev2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>
</body>
</html>
dev2.js:
// Copyright 2012 Gray Designs. All Rights Reserved.
/*
* #author rocky.grayjr#gmail.com (Rocky Gray)
* #date May 13, 2012
*/
function init()
{
enterNavBar();
drawCanvas();
enterCanvas(-2);
enterFooter(-1);
}
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
function enterNavBar(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("#bar"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#bar").removeClass('invisible');
}},delay);
}
function enterCanvas(delay)
{
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#ani"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#ani").removeClass('invisible');
}},delay);
}
function enterFooter(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("footer"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("footer").removeClass('invisible');
}},delay)
}
function drawCanvas()
{
//var canv = document.getElementById("ani");
var $canv = $('#ani');
var ctx = $canv[0].getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0,840, 420,0);
}
It sounds like you might be using an outdated version of the GreenSock files. This sounds like an issue that was very rare and was fixed in a more recent version (my apologies for any hassles). Would you mind downloading the latest and trying again? http://www.greensock.com/v12/