Another cool site.
Sometimes when you are trying to figure out what’s going on in some minified javascript, it’s quite difficult to read. Just copy and paste it into jsbeautifier and press Ctrl+Enter.
Here is the jquery source before (1 giant line):
and after (notice the scrollbar difference on the right):
Cool.
I came across Typescript today from Microsoft. It’s a superset of Javascript, that allows you to write a bunch of Javascript-like code and have it compile into Javascript. The main benefit here that I see is intellinsense and getting type checks at compile time.
Wouldn’t you love to write Javascript like this?
Nice intellisense!
In an application I am creating, I do validation, filtering and ajax saving of values when the user changes something in a textbox.
A problem arrises if the user makes some changes, and then presses the Esc key 2 times. This causes the form to reset, but it skips all my validation and auto-saving logic.
To prevent this, you can use this little snippet of jQuery javascript:
$(document).ready(
function() {
// prevent the esc key from resetting all the textboxes
$("form").bind("reset", function(e) {
e.preventDefault();
});
}
);
This page has a quick demo of all the easing methods in the jQuery Easing plugin: http://www.commadot.com/jquery/easing.php
Pretty cool. Just click on any of the boxes to see the easing action.
I was trying to use some jQuery effects on this page:
http://docs.jquery.com/UI/Effects
And none of them were working. After a while, I realized it was because I didn’t have the “jQuery Effects Core” or as they list it on that page: effects.core.js
Turns out you need to download it as part of the UI package here: http://jqueryui.com/download
I’ve been working on a project where I wanted to have a flyout window on the left just like how Visual Studio does their menus.
Maybe “slide out” is more accurate.
I used jQuery, which I am trying to use more in my projects, for the effects.
Anyway, I ended up making it a bit harder than it needed to be by having the tab itself slide out, as well as allow for multiple tabs.
At this point I’m happy enough to move on with a successful proof of concept, but I think if I were doing this from scratch again I wouldn’t bother having the tab slide out as well. I’d just show the sliding out window.
But, this should be a good starting point.
visualstudioflyoutmenus.htm (17.7 KB)
Update: And of course it completely fails in FF.
I made some changes, removed some things, tweaked others… looks ok in FF now.
We have been working with a pretty cool little javascript toolkit called Highslide.
It gives you some nice lightbox type effects but I like it more because of some of the options to load in iframes and stuff.
Someone wrote some asp.net wrappers as well to make it easier to add to your pages:
A coworker sent me this link. You just bookmark it, and then click the bookmark when you want to examine the layout of your page elements.
javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');
And it will add a little floating window in the upper left corner to show you everything you mouse over:
Yahoo has released a tool called YSlow that helps developers identify why a specific website is loading slow.
Take a look at this screen cap (click to enlarge):
I recently migrated one of the web applications I work on frequently to make use of the newly released ASP.NET AJAX toolkit.
In order to make this work, a bunch of changes were needed in the web.config. So many in fact that I decided to merge my web.config file into theirs, rather than vice versa.
After all was done and working, we started getting a few javascript errors in stuff unrelated to any ajax controls.
After some investigation I relized that the naming convention for controls had changed.
Controls that used to be named ASDF:ZXCV were now named ASDF_ZXCV.
So in some instances we had javascript looking for elements where the element name was hard coded as “ASDF:ZXCV”. Of course the correct way to get the element name is to use the ClientId property of the control, but that was not used 100% of the time on our site.
The problem is that when I upgraded the application from .Net 1.1 to a .Net 2.0 web application project, the upgrade tool included an item in the web.config file that was intended to ease the transition.
<xhtmlConformance mode="Legacy"/>
In ASP.NET 2.0, by default all rendered content is well formed XHTML. This was different from ASP.NET 1.1. By setting the xhtmlConformance mode to Legacy, it would not force the output to be XHTML compliant.
Another effect that this has, is the naming of controls. When Legacy is turned on, control hierarchies are separated by a colon “:”. In standard mode, they are separated by a dollar sign “$” in the name property, and an underscore “_” in the ID property.
This can be seen if you use reflector on the control class, you can see this:
internal char IdSeparatorFromConfig
{
get
{
if (!this.EnableLegacyRendering)
{
return '$';
}
return ':';
}
}
In 99% of the places where we reference asp.net generated code, we relied on the ClientId property, so we had no problems. But in that 1% of places where we took the shortcut of hard coding in the element, we got JS errors.
Chris May 