Chris May

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.

visualstudioflyoutmenus2.htm (17.7 KB)

We have been working with a pretty cool little javascript toolkit called Highslide.

http://vikjavev.no/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:

http://encosia.com/

 

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.

 

This site has some pretty cool links to sites that offer AJAX and DHTML snips and classes.

http://www.miniajax.com/

For example, and pretty cool little Poll thing I might convert from PHP to asp.net/XML:

http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller

Here is a cheat sheet that shows some of the main items when using Regular Expressions (RegEx / RegExp)

regular_expressions_cheat_sheet[1].png (80.91 KB)

Youtube provides a object tag that you can include on your site to show the videos directly, w/o making the user leave your site.

However, I noticed that this object tag was not being activated with the objectswap technique which makes it so you don't have to click on the flash object to "activate" it in IE.

To fix this you need to include the type="application/x-shockwave-flash" in the object definition.

I am not sure why you need this, but if you leave it out, somehow IE removes the object from it's DOM.

If you allow a page to load w/o this "type" and then try to find, using javascript, any OBJECT tags and it will tell you there are none.

 

UPDATE:  Still having some problems... thinking the trick above is causing some new problems.

If you ever work with an IFrame, you will notice that you can't set height=100%.

But, many times you might want to have an IFrame act as if that property had the desired effect.  i.e. If you make your browser window taller, you want the heigh of your IFrame to grow as well.

You can acheive this using the following script:

       function resize_iframe() {
            var myWidth = 0, myHeight = 0;
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
            
            var iNewHeight;
            iNewHeight = parseInt(myHeight)-40;
            document.getElementById("WgipIFrame").style.height = iNewHeight;     
        }

        //-- see if there is already something on the onresize
        var tempOnresize = window.onresize; 
        //-- create our event handler
        window.onresize = function(){ 
            //-- if tempFunc is a function, try to call it
            if (typeof (tempOnresize) == "function"){ 
                try{ 
                    tempOnresize(); 
                } catch(e){} //--- if it errors, don't let it crash our script
            } 
            resize_iframe();
        }

Then you can set the IFrame's onload="resize_iframe();" like this:

<iframe src="x.htm" style="width:100%;" 
  id="WgipIFrame" name="WgipIFrame" 
  onload="resize_iframe();"></iframe>

 

Here is a nice script, part of a larger section on getting window size/positions and scroll data out of various browsers.  This page really has a lot of good information.

function alertSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
}

When you are creating reusable javascript files, there are times when you want to tap into the window.onload event, which is fired when the window has finished loading the content.

The problem here, is that you can't have multiple event handlers for the same event.

So if you have a page that uses 2 scripts which both use the window.onload event, then which ever is loaded last will win, and the other script will never catch the event.

Well one way you can deal with this problem is to write your window.onload (or other events for that matter) using this type of a pattern:

    //-- see if there is already something on the onload
    var tempFunc = window.onload; 
    //-- create our event handler
    window.onload = function(){ 
        //-- if tempFunc is a function, try to call it
        if (typeof (tempFunc) == "function"){ 
            try{ 
                tempFunc(); 
            } catch(e){} //--- if it errors, don't let it crash our script
        } 
     //-- Call your onload function here
    }

This way, you can have several function that all utilize the onload event, and none of them have to know about each other.

 

A while back I blogged about SubModal, a little tool for creating nice modal dialogs on websites.

One of the things I wanted to do was have the modal dialog return a value, like the showModalDialog does in IE.

To achieve this, follow these instructions.

In your "main" html page, declare a callback function and a button that will launch the modal dialog:

    function myFunction(val){
        alert("Return value is...");
        alert(val);
    }

Then create an input button to launch the modal dialog.

<input type="button" onclick="showPopWin('modalcontent.html', 400, 200, myFunction);" />

Then, in the submodalsource file, or where ever you have your JS stored, change this function to include a return value, and have it use it.

/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value 
 */
function hidePopWin(callReturnFunc, returnVal) {
    //alert(callReturnFunc);
    gPopupIsShown = false;
    restoreTabIndexes();
    if (gPopupMask == null) {
        return;
    }
    gPopupMask.style.display = "none";
    gPopupContainer.style.display = "none";
    if (callReturnFunc == true && gReturnFunc != null) {
        // edited by CDM -- gReturnFunc(window.frames["popupFrame"].returnVal);
        gReturnFunc( returnVal );
    }
    gPopFrame.src = gLoading;
    // display all select boxes
    if (gHideSelects == true) {
        displaySelectBoxes();
    }
}

Then finally on your modal page, just some code to close the window, and pass back the return value.

<button onclick="window.parent.hidePopWin(true, 'I am the return value')">close</button>

Here is an interesting list of the top 10 things people do wrong when using AJAX.

http://weblogs.asp.net/mschwarz/archive/2006/11/20/the-top-10-mistakes-when-using-ajax.aspx

1. Don't use AJAX to update the complete page by putting everything in a UpdatePanel. You want to save time and traffic when running the web page. Never update parts of the web site that can be changed using JavaScript and DHTML (DOM).
2. Have in mind that there are a couple of visitors that have JavaScript disabled or using a web browser with an older or less JavaScript implementation like the most mobile devices have. What does your visitor see if everything is disabled? I don't recommend to have the full web site available as a JavaScript disabled version!
3. Cache the same requests on client-side web browser or implement any caching on the web server. The most used scenarios like AutoComplete or DropDown fields are filled everytime the same. A wrong written AutoComplete can slow down your web server (database server) because there more requests done than the version before using PostBacks. Think of pressing F5 (reload) all the time with your old web site. If you have cascading DropDown you can save more traffic/requests!
4. Don't run concurrent or long running AJAX requests when using CSS or JavaScript to change the UI. There are only two concurrent http connections possible with all common web browsers (I know you can change this, but the default behavior is set to two). If there are running to many AJAX requests running loading of images will be slow down.
5. Use everytime the asynchrouns invoke of the send method of XMLHttpRequest. There is no issue where you want to use the synchronous one. Your web browser will not be forozen when having network problems or slow connections.
6. Try your web application using a very slow internet connection. Try it again using a TCP/IP connection with a very high latency for each paket.
7. Is your web application running as a desktop replacement? Have a look at the memory usage of common web browsers if you run your application one hour, two hours or couple of days. Not everybody has a development machine like yours!
8. Check the http status code you will get back from XMLHttpRequest. There are a couple of common network errors like DNS not available, http server error 500. Did you ever checked for the status code which tells you if your web browser is in offline mode?
9. Try to disable the XMLHttpRequest object! With IE7 you can use the native object instead of the ActiveX object, but you can still disable the native object, too.
10. Check your AJAX requests for security issues! Did you simple open all your data access layers? Make use of FormsAuthentication and PrincipalPermissions on ASP.NET. Can anybody create requests (not only by clicking on a link)?

One thing that I really like about IE, but is not available in other browsers is the client side modal dialog.

A modal dialog is a popup window that must be acted on (or closed) before you can do anything else on the window underneath.

I came across a nice modal dialog being used on the forums.asp.net site.  I ended up emailing the guy who wrote the editor I was using, and he directed me to the original creator of the dialog "submodal."

Some people have made updates and extensions to submodal, and there has been a google group created for the discussion of submodal.

It is still not clear to me if this technique will allow you to pass back a value from the modal dialog to the opening page, because I think that is a very important feature, but I don't see any direct reference to it.

A while back I was looking at the AJAX toolkit page (http://ajax.asp.net/ajaxtookit) and I was really not impressed with anything I saw.

Things like the "Confirm" button, which is basically a button with 10 seconds of javascript coding built into it isn't a big deal, IMO.

But their list of controls has really grown and there are some really interesting things in that toolkit.

It still boggles my mind that they don't have an autocomplete dropdown list where your selections are LIMITED to the choices from the list.

 

Recently Microsoft lost a lawsuit which required that they not "automatically" enable dynamic content in their browser, or something.

Whatever.  The result is that you now have to CLICK on flash swf files running in your browser before they will be "Activated".

The way to get around this is to use javascript to do the dirty work. 

Check out this link for a quick include that can help with the work around:

http://www.sitepoint.com/article/activex-activation-issue-ie

 

I ran into a little problem trying to integrate Metabuilders combobox into an asp.net web app I am creating.

The problem was that the onload event handler was not properly firing when smartNav was turned on.

The "InitScript" was as follows:

if ( typeof( window.addEventListener ) != "undefined" ) {
    window.addEventListener("load", ComboBox_Init, false);
    alert('case 1');
} else if ( typeof( window.attachEvent ) != "undefined" ) {
    window.attachEvent("onload", ComboBox_Init);
} else {
    ComboBox_Init();

}

Well when you are using smartNav, the window.onload event is only fired the first time you reach the page.  So I used this bit of C# in the control to get it to work.

String initScript = resources.GetString("InitScript");
if (this.Page.SmartNavigation)
{
    this.Page.RegisterStartupScript("MetaBuilders.WebControls.ComboBox Init with Smartnav", "<script>ComboBox_Init();</script>");
}
else
{
    this.Page.RegisterStartupScript("MetaBuilders.WebControls.ComboBox Init", initScript); 
}

 

In some cases you need to be able to check if a variable has been defined, and if it has a value.

I recently had a problem where I needed a function to check if a variable had been defined, and if not, to return a default value "1".

The following code will check if the variable is defined, and if it is, it will also check and make sure that it isn't null, before returning the value.

 

function GetDefaultModuleId(){
    if (typeof(csDefaultModule) == "undefined"){                            
        return "1";
    }else{
        if (csDefaultModule == null){
            return "1";
        }else{
            return csDefaultModule;
        }                    
    }
}

 

This article shows how to create a control that will convert your email addresses into a unique code that is reconverted by javascript when the page loads... so it can't be screen scraped.

This article is supposed to offer some improvements to the RegisterClientScript functions. I didn't really read it though.

For $10 these guys are selling a scrolling datagrid that extends the existing datagrid.

Pretty cool, and cheap.

Here is a pretty nice, and free, javascript menu generator.

Works with a range of browsers (even opera).

function setCursorAtEnd(sTextboxID) {
    var oTextbox = document.all.item(sTextboxID);
    if (oTextbox .createTextRange) {
        var r = (oTextbox.createTextRange());
        r.moveStart('character', (oTextbox.value.length));
        r.collapse();
        r.select();
    }
}

This is a pretty cool menu creator. Again, it's kinda expensive ($100 or so), but looks good.

If you want to have some Javascript run before your ASP.NET controls do their postback, you can do it like this:

myDeleteButton.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this value?');")

I was having some trouble trying to manually add a giant block of Javascript from an ASP.NET Web Control.

Without testing it yet, I believe that this solves the problem by using IsClientBlockRegistered.