[DHTML] Clean Calendar

[mburt]

Use document.all instead... but I believe that iMarc did so, correct?
something to the effect of:

var obj = document.all?document.all:document.getElementsByTagName("*")

[iMarc]

First of all, when you select in the date box, but then click out of it, the calender doesn't go away. Maybe the user needs a way to turn of the calender all together.

Thats why there is a "Close Calendar" button. Thats not easy to see? I thought about making an "X" button but I didn't want to use images, I wanted the calendar to be plug and play.

Code wise, you need to watch your event code. Especially where you load the main function. You have covered both advanced models, but left out the "old way".

I don't know what you mean by this. I don't know what, "the old way" means

Another spot is your getElementsByClassName function(did you get it from dustindiaz.com, but the way?). Make sure you pass in the tag name, as * isn't compatible with IE5.

Would the following code work?

getElementsByClass(popUpCal.inputClass, document, input);

Yes I got it from Dustin Diaz. I only used the function once to walk the dom and attach the calendar to the appropriate input fields.

Which leads me to my next point. What kind of browser compatibility do you have?

I tested it in everything I had available to me. IE6, IE7, FF1, FF2, Opera, Netscape, AOL Browser. Oh and by the way... Thank you for taking such a close look at the code!

[blm126]

Thats why there is a "Close Calendar" button. Thats not easy to see? I thought about making an "X" button but I didn't want to use images, I wanted the calendar to be plug and play.

Oh, now I see it. Maybe it needs be moved or made bigger, because if I missed it, then others probably will,too.

I don't know what, "the old way" means

window.onload = popUpCal.init;

The add event function you are using does not cover that. You might be better off just writing the load code yourself.

Would the following code work?

getElementsByClass(popUpCal.inputClass, document, input);

Yes, that looks right. There is nothing wrong with other way, but this should be faster, and have better compatibility.

I tested it in everything I had available to me. IE6, IE7, FF1, FF2, Opera, Netscape, AOL Browser.

That looks pretty good. The comments above should increase the chances of it working in untested browsers, like Safari or Konqueror.

PS:Your demo link doesn't seem to work anymore. I had to navigate through your site to find it.

[jscheuer1]

Although not perfect, the following method of creating an onload event for just about any script that will 'play nice with others' is pretty darn good:

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", myInitFunction, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", myInitFunction );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            myInitFunction();
        };
    }
    else
        window.onload = myInitFunction;
}

Just substitute your init for myInitFunction. The only thing that you may need to add is an e in myInitFunction(e); if your function requires it. The only real drawback to this method is that if either of the older methods must be used and there is a later onload event on the page, there will be a problem.

[iMarc]

I just released my blog today and there is a redirect issue. The link works now. I'll make the few changes to the code in a bit and make a downloadable zip file with all of my code and styles stripped to ready it for publishing. I'll let you know when that happens. Thanks again for the great comments!

[blm126]

I just got a chance to check, it works fine in Konqueror.

[iMarc]

Updated have been made!

1. The Clean Calendar code is up for download.
2. Parameters added to getElementsByClass function:
   

   var x = getElementsByClass(popUpCal.inputClass, document, 'input');

3. Updated code to use jscheuer1's on load event:

   if ( typeof window.addEventListener != "undefined" )
       window.addEventListener( "load", popUpCal.init, false );
   else if ( typeof window.attachEvent != "undefined" )
       window.attachEvent( "onload", popUpCal.init );
   else {
       if ( window.onload != null ) {
           var oldOnload = window.onload;
           window.onload = function ( e ) {
               oldOnload( e );
               popUpCal.init();
           };
       }
       else
           window.onload = popUpCal.init;
   }

[iMarc]

ddAdmin! Where are you?