YUI on Windows 8 Metro App: YUI is not recognized - visual-studio

I am trying to create a Hello World JS Metro app on Visual Studio 2011, using YUI3.
I´ve grabbed a local copy of YUI, added to a subfolder in the solution, and added a reference to yui-min.js on my default.html page:
<!-- TodoJS references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="js/yui/build/yui/yui.js"></script>
and then at the bottom of the page I´ve added the following code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
YUI().use("event", function () {
//some code will go here..
});
}, false);
</script>
When I run the code, I get a null ref error on YUI(). I do get intelissense working in Visual Studio (e.g YUI().add), so the reference seems to be OK, but YUI is not found on run time. Any tips?

I would try the steps outlined in How To: Create a Windows 8 Metro App with JS and YUI 3

I take it that you've got the issue fixed. However if you'd like to use the YUI components such as "calendar", "tabview" etc, you'll have to modify a few files that include innerHTML calls and wrap the added html content with toStaticHTML.
There were only a couple of files(dom-base.js, yui.js) that needed to be modified and most of the components worked fine(including the "datatable" and "charts" widgets), with the exception of the rich text editor. The nice thing about YUI is that it supports touch gestures for a majority of the components, for example panning "datatable" works correctly.

Related

Setting up CKEditor

I downloaded a custom build for CKEditor open source from the website and followed the documentation to set it up. I put the following in my header.html file which is included in EVERY file:
<script src="./includes/ckeditor/ckeditor.js"></script>
<script>
window.onload = function() {
CKEDITOR.replaceAll();
};
</script>
I was under the impression that this would load the script and then replace all <textarea> fields in forms with the editor but i'm just getting basic editors as default with textarea's. Any idea? All files were uploaded to the root/includes/ckeditor directory when unzipped.
Turns out it was an apache permissions issue. Problem solved.

#Url.Content not pointing to correct path in a new MVC project

I'm having trouble figuring out why when I create a new MVC 3 application the jQuery intellisence is not working until I alter the script tag in my _Layout page. According to a tutorial I watched, as long as I placed the vsdoc file in my scripts folder, I should have jQuery intellisense but that is not the case, at least thats not happening for me. After creating a new project, here is what the script tag looks like in my _Layout.cshtml page:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
I have included the vsdoc file in my Scripts folder but I do not have jQuery intellisense. If I do a view sorce on the page here is what I see:
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
It doesn't look as if the path is correctly resolved.
So I then delete this tag and replace it by dragging and dropping the file to the page and end up with this:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Now I get jQuery intellisense. So why do I have to make these changes befeore I get intellisense? Is this something that others have experienced or am I possibly doing something wrong? It seems like the #Url.Content functionality is broke and leads me to wonder if maybe I will have problems with it for other uses like placing images on a form.
As far as I am aware, your vsdoc.js script cannot just exist in the scripts folder. It has to be referenced in every view that will use it.
You should reference it like this:
#if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
Note: Check the version of the file that you reference is correct.
The if statement will prevent the browser from actually downloading the file.

Using MVCt4 inside Javascript

I have recently become a T4MVC fanatic and now I seem incapable of using visual strings in my MVC3 projects. I am currently trying to use an T4MVC link to a script file inside a JavaScript function but it appears that I'm either doing it wrong or it's not possible. The code follows. Any help would be appreciated.
<script type="text/javascript">
$(function () {
if (!Modernizr.inputtypes.range) {
$.getScript(#Links.Scripts.modernizr_1_7_min_js, function(){
$("input[type='range']").range();
});
}
});
</script>
EDIT:
Sorry, there is no issue with T4MVC in JavaScript. Looking at the page source, the link text is generated properly.
Sorry. This ended up being a non-issue. There is no issue with using T4MVC in Javascript. I guess I was thrown off because VS does not provide intellisence for T4MVC while editing JS. Thanks for following up David.

SyntaxHighlighter not showing toolbar

I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.

Visual Studio 10, JavaScript intellisense inside javascript.js file, and where is the MicrosoftAjax-vsdoc.js

I can get javascript intellisense going from and aspx or master page ie
<script src="../../Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
<script type="text/javascript">
$.isFunction(
</script>
gives me a drop down in vs2010.
I do all(most) of my js coding inside a js file.
How do I get intellisense drop downs inside js files ?
Also, is there a vsdoc for ms ajax (MicrosoftAjax-vsdoc.js) ?
At the top of your .js file add this:
/// <reference path="jquery-1.4.1.js" />
Or make the path relative, if it's not in the same directory, it'll look for the jquery-1.4.1-vsdoc.js when grabbing it for intellisense, any file you reference like this it'll look for the -vsdoc version if available. As a side note, jQuery 1.4.2 has additional bug fixes you should consider upgrading :)

Resources