Develop Reference

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

UML Diagrams for JavaScripts using Eclipse

I have a couple of JavaScripts and I want to derive their UML diagrams from the JavaScript code.
I am using Eclipse Spring Tool Suite.
Can anyone tell me how can this be done? I tried using JS/UML plugin but was unable to do so.
I need the steps to follow to derive the UML diagram (especially sequence Diagram) directly from JavaScript code in Eclipse.
Thanks in Advance.

Download X-ray eclipse plugin in zipped format here: http://xray.inf.usi.ch/xray.php
Unzip to your eclipse plugins folder.
Then right click the project you want to analyze and click "analyze with xray"

Flashdevelop for webgl with haxe & stdjs

I am currently trying to get an instance of the WebGL context in HaxeJS using FlashDevelop. I would like to use the stdjs library.
I have imported the dependencies using haxelib with:
haxelib git xirsys_stdjs https://github.com/xirsys/stdjs.git haxelib
I tested its availability with:
haxelib list
I then added it to the library section in FlashDevelop - see pic
**I have included the the library in the classpaths (I really don't know if I should, but without it, compile won't even take place) - See pic **
I've then taken the WebGL specific code from the following github repo:
https://github.com/mikecann/WebGLTerrainicles/blob/master/src/Main.hx
When I try to compile the project, it opens up my browser as expected, however, in the console there is an issue as there are missing libraries:
Obviously I'm missing something here (perhaps in the import process?) - I've looked but can't find much information on getting WebGL working for Haxe with the stdjs externs etc using FlashDevelop and any help would be great.

Looks like there is a problem with xirsys_stdjs lib.
The reference project you link to is using only one file called Html5Dom.hx (originally from Jeash project) to define the HTML5/webgl API. You don't need xirsys_stdjs if you reuse this file.
While you're at it, mikecann's project seems to include a lot of basic classes to get started writing webgl in haxe.

Tool for showing javascript, CSS, HTML dependencies

I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)

https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile

Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.

here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i

Handling common JavaScript files in Visual Studio 2010

We're beginning work on a couple of fully JavaScript-dependent web apps (our previous apps have been ASP.NET MVC, with JavaScript 'goodness' sprinkled over-the-top).
We have a few files that will be shared across the board, and it would be nice to store these files in a Common project, and 'Add As Link' them into individual projects (as would be possible with compiled code).
Obviously this doesn't work with something like JavaScript as the file isn't actually 'there' in the correct location.
Does anyone have any suggestions on keeping a single version of a shared JavaScript file, for use across multiple projects?

I know this issue is ancient, but still wanted to put forward my solution because it is a bit simpler than beardtwizzle's.
You can ensure that Visual Studio copies all linked files to where you placed the link in Visual Studio's Solution Explorer by adding this at the end of your .csproj file:
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)"
DestinationFiles="%(Content.Link)"
SkipUnchangedFiles='true'
OverwriteReadOnlyFiles='true'
Condition="'%(Content.Link)' != ''" />
</Target>
I've described how this works in my blog post at
http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx

In the end, this is how I've achieved it. It may not be to everyone's taste - but worked a treat for me.
Note: In all of our projects, static resources are in a root directory called 'Assets', so for example JavaScript is always in /Assets/js/ and CSS /Assets/css/.
Solution
In the project that is going to 'import' the common code, I simply add the common .js file 'As Link' within /Assets/js/.
Go to that new addition's Properties and set 'Copy to Output Directory' to 'Copy if newer'.
Now I simply edit the project's post-build event command line to the following:
xcopy /Y /E "$(TargetDir)\Assets" "$(ProjectDir)\Assets"
When the project builds, it copies the imported files to \bin\Assets\js - the post-build event then takes a copy of those over to the project directory - in time for the site to use them.

The correct solution is embedding javascript/css files in your project. You can do this by using WebResources.axd. This is the official way microsoft embeds js in its controls. (Like validation controls)
You can find a good tutorial on: https://web.archive.org/web/20211020131200/https://www.4guysfromrolla.com/articles/080906-1.aspx

I can also see this question is ancient, but thought I would add my two cents...
I have a javascript file in a separate project. I added a linked reference and this works well for publishing, but doesn't work in IIS Express or Casinni. I tried adding custom routing to catch the missing file and manually remap it, but it is bit of a hack and for some reason stopped working when I upgraded to MVC 5.1, so rather than fix the hack, I found a better way:
System.Web.Optimization has javascript bundles.
In your shared project, set the Copy To Output Directory to 'Copy Always' and Build Action to 'Content' on your js file. This means your js files end up in the bin folder of your website project. They cannot be served from there (IIS wont serve anything in the bin folder for obvious security reasons), but they can be included in bundles
using System.Web;
using System.Web.Optimization;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/externalLibrary").Include(
"~/bin/scripts/externalLibrary.js"
));
}
}
You then need to add this to Application_Start in your global.asax file (right next to register routes)
BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
then use your bundle link this in your razor cshtml:
<script type='text/javascript' src='#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/externalLibrary")'></script>
you will need the nuget package for microsoft.aspnet.web.optimization

Anyone that stumbles across this question here in the future should know that there are now Shared Projects in Visual Studio to solve this problem. Universal Windows projects use them by default and you can create your own by downloading and installing the VS extension here: https://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450
Once you download the extension you can add a Shared Project (Empty) to your solution. The project can be found in the project templates for Visual C#, Visual C++, and JavaScript.
Then include the files you want to share to the shared project in any folder structure that makes sense for you.
Next you will include the shared project as a shared reference in the other projects in that solution that need access to the shared files. Right-click the other project and choose "Add Shared Project Reference".
Now you can reference the shared files in your main project as if the files in the shared project existed there. They are compiled as part of that project.
The technology was intended for Universal apps to share code between Windows Phone and Windows Store apps so be warned that you may have trouble sharing in different scenarios but it is worth a try to see if it will fill your need.

You could perhaps use visual studio templates

great question, I've been thinking about this for quite some time. The only solutions that have popped up in my mind are hosting the files on the web and using them like a cdn or using symlinks. You could add a code snippet into your visual studio to reference them.

This blog post describes an alternative solution to the answer by #beardtwizzle:
http://consultingblogs.emc.com/jamesdawson/archive/2008/06/03/using-linked-files-with-web-application-projects.aspx
The idea is similar:
Add the shared file to to web project as a link
Modify the _CopyWebApplication build step in the project, so that the linked files are copied correct destination path.
So instead of a post build event the files are copied by a modified build step. For me this solution feels a little bit cleaner (but this may well be a matter of taste). Anyway I just added this to our solution and it works great so far!

Use proper version control.
Keep the js in one location and then just git pull (or the equivelant Mercurial / Bazaar) them back into your code whenever you've updated your javascript.