Combine vis-network and vis-timeline on same page - javascript

I'm trying to use the network and timeline package on the same page (like I did when using the old 4.21 version, and it works there), but I can't get it to work. It's throwing an error (dataset or array expected), when I provide the vis-datasets to the network. If I remove the load of the js for the timeline in the header, it works - but then I don't have a timeline.
So it looks like loading the package for the timeline is interfering with the vis-datasets definitions.
Any idea what's wrong here?

Just found out that I need to use the DIST from vis-charts to have this working.

Just to clarify this is a known bug we're actively working to solve. It will work as you'd expect eventually. See https://github.com/visjs/vis-network/pull/85 for more information. In the mean time as you found out yourself use vis-charts.

Related

JS works until I bring it into a foundation Framework

I am working on a project where I want to make it look as if a shutter of a camera is opening and closing... I was able to get this to work in a regular html/css/js file structure however when I trie to bring/ incorporate it into Foundations Responsive Frameworks I was not able to get it to work. There are no errors in the console and checked to make sure everything is linked correctly. ... I have attached both folders in the link, the working folder that is not in a framework and the broken folder that I am trying to use foundations framework..
https://drive.google.com/folderview?id=0B4EHdofHefLHZjZpczBybE1xWGs&usp=sharing
Thank you in advance for any feedback/help.
-Jake
Unfortunately, I cannot fix it.
Fortunately, I did figure out the problem.
The jquery.shutter.css is not loading properly. Here is my attempt at your project in React.
When I take your working example and delete the jquery.shutter.css file, I get the exact same result as the React version which has no error message. I gave it a good try and cannot fix it without more time. I hope knowing the problem helps you.
Note: Unfortunately Google will not let me upload a JSON file so you will have to change package.txt to package.json and install using Node

Potential Git/Rails Disaster: Web page no longer loading

I have spent a lot of time working on a webpage and have been very lazy about committing things to Git. Today, I attempted to push everything up to my repo, but I think I may have caused a disaster. I am very new to Git and basically just use it for its most basic functions.
I was unable to push anything and the console recommended using a pull request, after doing that and attempting to push again, I began to get a bunch of merge conflicts with my gemfile and gemfile.lock. I tried fixing this issue as well but then I started seeing random <<<<<<HEAD throughout my files (including routes as well as my javascript).
Now when I try to load my localhost page, I seem to have all my content, but my css file will not load resulting in a very ugly page. When I use chrome devtools and try to look at the sources, the application.css.scss is blank, when mine have 1000+ lines of code (and is viewable in the app\assets\stylesheets folder.
Has anyone had something like this happen / know how to remedy the amount of damage I might've done in 15 min. Anything will help as I do not know how to proceed.
you'll want to try doing a git reset --hard to reset your local repo to the state it was at before you ran git pull.
see this answer for reference:
https://stackoverflow.com/a/1223385/3880374
also, in case you're curious about those "random" <<<<<<HEAD strings throughout your files, those are actually added by Git. Per their docs:
Git adds standard conflict-resolution markers to the files that have conflicts, so you can open them manually and resolve those conflicts
Github also has a helpful guide to resolving these conflicts via the command line.

Renaming root folder in Three.JS project causes weird aliasing bug

I hate to be the guy who makes a stackoverflow account just to ask a question (I owe a lot to stackoverflow), but this really has me utterly stumped.
For months I've been plagued with a mysterious bug that causes a bizarre rendering error in my three.js VR projects when running on Android.
I've always been able to solve it by basically rebuilding everything from scratch virtually line-by-line to see what causes the problem. I've never had any luck pinpointing the cause however.
Today, I found a way to reproduce the problem - I took google's Google Cardboard three.js example (which you can find at vr.chromeexperiments.com (I'm not allowed more than two links until I get my 10 reputation)), added in some spheres (so that there was something to watch for in regards to the aliasing) and found that it was running fine.
Renaming the root folder from 'WTF' (can you tell this is frustrating me? :P)to 'WTFF' will result in the rendering error appearing. Copying the folder, renaming the original 'WTFF' and naming the copy 'WTF' will result in the original displaying the rendering error, and the copy displaying correctly. That is, the error is caused by the project's root folder not having the name it had when the project was first created. I'm editing everything in notepad++.
Am I missing something here? The only files here are plaintext .js and .html, and a few images. Why does the root folder's name have any influence at all on how WebGL content is rendered? Is there some way around this error? Does anybody know what's causing it? I'm pretty familiar with three.js, but I've never done anything directly in WebGL, so there might be something under the hood that I'm not aware of perhaps that involves the folder structure?
I didn't include any code since the problem doesn't seem to have anything to do with the actual code within the file (this problem has cropped up in every three.js project I've worked on). But let me know if you think it might help.
Thanks so much in advance! :)
Update: I went away for half an hour and came back - now the original WTF-named folder structure is also displaying the error. I'm forcing a reload with window.location.reload(true);, so I have absolutely no idea what is going on anymore.
So I think I may have found the solution:
While I'm not sure of the exact underlying causes, it seems the problem lies within Chrome for Android, and not within WebGL or Three.js.
It seems that Chrome for Android is caching the WebGL content and doing something with it that causes this error to crop up if the folder structure changes.
The problem can be fixed by clearing the Chrome cache (Settings -> Application Manager -> Chrome -> Clear Cache).
I hope this helps anyone who encounters this problem in the future!

How to find an issue when using foreign JavaScript?

My problem is quite generic: I know that I have a JavaScript issue somewhere. Now I don't know how to start searching where the problem could be. Usually I use the Firefox built-in or the Firebug Debugger. I know how to use it in general. But what I don't know is where to start. Where should I set breakpoints? I often have this kind of problem.
As an example which is my current problem: I have a page with an unordered list. Every second list item is empty for some reason. I can see that the page gets loaded with proper list items. But then some JavaScript seems to add those empty items. It's a Yii application that inserts some JavaScript directly into the HTML but let the browser also load jquery.js, bootstrap.js and yii.js. I haven't added any own JavaScript.
Now, as I said, I don't know where to start to find the problem. It might be that I have done something wrong with some configuration. But it could also be bug. I just want to figure it out somehow.
With my current issue, the best would be to have a breakpoint on a function like onInsertEmptyListItemToCounfuseDeveloper() ...
I don't want a solution to my current issue. I'd like to know in general, where and how to start finding JavaScript related problems. Especially, with third-party JS. With some applications (CMS, shops,...) there are sometimes a lot of JS files. This makes it more worser.
I hope this question is answerable and you can provide some experiences.
Not speaking 'bout the CMS right now, but in general my method is
1) If you did not add any of your onw scripts, just 3rd party, delete them all of your project e.g.
You've added jquery.js, bootstrap.js, yii.js so you remove them and then you test if all works fine, if so, add first one, for me it would've been jquery.js, test again, if no bug visible add second and so on. In this case you'll see in which file is some bug or sort of unexpected behaviour.
2) Here is the worst part, in the found file you should find the problem part. So, download the full version, not production, open it in editor, and start searching... The good news are that you don't have to look through all file, just find the event listeners in your devtolls or firebug and follow them.
All of this is just my experience , so if someone know better methods, I would like to hear 'em too.
It would depend on the code. Generally, if I have a function that is suspicious, I put breakpoints or console.log() at the beginning and end of the function and see if both are executed. Then I follow the logic down to figure out which piece is broken. It really depends on the code though.

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.
Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.
If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?
I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.

Categories

Resources