PDA

View Full Version : [DHTML] Clean Calendar



iMarc
02-01-2007, 08:56 PM
1) CODE TITLE: Clean Calendar

2) AUTHOR NAME/NOTES: Marc Grabanski

3) DESCRIPTION: Clean calendar allows a user to select a date and then that date is put into a text field. CSS allows you to easily style the calendar any way you want!

4) URL TO CODE: Clean Calendar by Marc Grabanski (http://marcgrabanski.com/code/clean-calendar/index.html)

Code Features:

Attach the calendar to as many text fields as you want! (simply add a class)
Style any aspect of the calendar with CSS!
Object oriented Javascript.
No images needed and the calendar still looks very nice.

mburt
02-01-2007, 09:18 PM
Nice, works well too. Good job! :)

iMarc
02-01-2007, 10:49 PM
It probably should be named, "Clean Pop-Up Calendar". And realistically I can modify it in any way to be a static calendar or any other type. I think this is probably the most useful in Pop-Up form though.

jscheuer1
02-04-2007, 06:23 AM
It certainly looks clean and is a rather nice script. I'm a little curious where you get your information as regards XHTML as put forth on your site though. Many browsers do not parse XHTML and all of the benefits you mention for it are really possessed by cleanly written code that follows its HTML DOCTYPE or none (in the case of a skilled quirks mode coder). How 'clean' a page looks is really a matter of how it is designed, not the DOCTYPE used. Clean is not always the look a designer is going for, BTW.

iMarc
02-05-2007, 04:57 AM
How 'clean' a page looks is really a matter of how it is designed, not the DOCTYPE used. Clean is not always the look a designer is going for, BTW.

I was not talking about how 'clean' the design is... I was talking about the code:

w3 school on XHTML (http://www.w3schools.com/xhtml/xhtml_intro.asp)

jscheuer1
02-05-2007, 05:34 AM
The w3schools, although better than many free tutorial sites on the web, is not an authority on anything. HTML 4.01 strict is the current standard for HTML. XHTML isn't supported widely enough yet to make it a useful standard for web design.

iMarc
02-05-2007, 04:06 PM
XHTML isn't supported widely enough yet to make it a useful standard for web design.

Could you support your claim? I haven't seen any reference indicating that your claim has much credibility.

Our interactive lead has been in charge of web standards and accessibility for US Marines, 3M, United Healthcare, Ford and at her last job NBC Olympics.com. Any work we do is now in XHTML, and the sites typically start at $300,000 and go up to around $72 million.

I believe XHTML is indeed a useful standard.

XHTML Explained (http://www.yourhtmlsource.com/accessibility/xhtmlexplained.html)


The benefits of adopting XHTML now or migrating your existing site to the new standards are many. First of all, they ensure excellent forward-compatibility for your creations. XHTML is the new set of standards that the web will be built on in the years to come, so future-proofing your work early will save you much trouble later on. Future browser versions might stop supporting deprecated elements from old HTML drafts, and so many old basic-HTML sites may start displaying incorrectly and unpredictably.

Why is XHTML not a useful standard? Thanks jscheuer1.

jscheuer1
02-05-2007, 04:48 PM
Code however you like.

For many years, sites costing equivalent amounts and of equivalent prominence were poorly designed, only working in IE. The current trend toward XHTML, I believe is an overreaction to that practice.

However, I am not a standards junkie and do not go in for arguing about who or what is an authority on the standards too much, particularly on this subject (w3.org does come to mind, though). There are conflicting views on what is the best standard to use and it is pointless to argue much about matters of taste. If you think about it, we are each an authority of sorts on the subject. I am a little more inclined to debate what is or is not allowed in a particular standard as, that is a matter of fact but, I will often leave that to others as well.

For information on the standards and their use, I generally rely on what I hear from folks in these forums who I do consider to be standards junkies, those who I believe do know what they are talking about. It is possible that I've misunderstood what they've been saying for years, that they are wrong, or that it matters less than either of us might think as long as you adhere to and use either HTML 4.01 strict or whatever the current strict (I think it is 1) XHTML standard is. Or, as I said before, even working in quirks, so long as you know what you are doing. On the other hand, the use of xlm, is even more greatly frowned upon by these folks.

To sum up: I have no desire to get any further into a debate on the subject unless one of our resident 'experts' cares to get involved. If that happens, I expect to be about as often taken to task for what I've put forth on the subject here as have you for your views. It would be interesting reading though. Let's see if it happens.

iMarc
02-05-2007, 05:57 PM
jscheuer1: I appreciate your honesty and incite!

Yeah we will see if there are any gurus that will step up to the debate.

Otherwise, feel free to make more comments on my script! Thanks.

blm126
02-05-2007, 08:18 PM
Nice calendar! Only a couple of comments. First, you don't really need the language attribute on your script tag. And second, don't use a transitional doctype. If you feel the need to go with xhtml, use XHTML 1 strict.

As for the whole XHTML debate...The way I understand it is this. Due to bad support for true XHTML in outdated browsers(and IE), XHTML should be avoided unless necessary. Check out this (http://www.hixie.ch/advocacy/xhtml) for the full scoop.

iMarc
02-05-2007, 10:45 PM
@blm126: Wow, that article slams XHTML. I am going to do my research now and maybe change my ways. I still need to seek out more proof to change to 4.01 though. Thanks for the info!

Thanks for the comment on the calendar too!

boxxertrumps
02-06-2007, 12:21 AM
Mozzilla Firefox, K-melon, Opera, IE7

(My) well-formed and valid Xhtml is displayed the same in these four major browsers, regardless of weather it is sent as text/html, application/xhtml+xml, or text/xml.

i still keep the correct application format though...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>

i wonder if i can get Konquerer too...

iMarc
02-06-2007, 03:35 PM
Yeah, I see my XHTML the same on all browsers too. I even tried aol browser, netscape, and opera. If it works in every browser i can get my hands on.. why should I change?

jscheuer1
02-06-2007, 04:18 PM
Oh Oh, I see you are using XHTML transitional so, at the very least you are not benefiting as much as possible from the much touted forward compatibility features of a strict DOCTYPE.

P.S. I did say I liked your calendar. :)

iMarc
02-06-2007, 08:30 PM
I'm using strict now.

blm126
02-06-2007, 08:39 PM
Yeah, I see my XHTML the same on all browsers too. I even tried aol browser, netscape, and opera. If it works in every browser i can get my hands on.. why should I change?
It all comes back to what you classify as xhtml and what your browser classifies as xhtml. xhtml isn't hard to write, you just pick a doc type, and make sure you use all lower case. However, for a browser, xhtml is very difficult, because xhtml is actually XML, and should be parsed as XML. From what I understand, the browsers makers did not want to re-write their parsing engines(and who can blame them), so they took the short cut. They programmed their parsers to treat xhtml exactly like html with a few little differences. In fact, some browsers won't even parse an xhtml page sent with a xml mime type. So, the question is, If browsers are going to treat xhtml like html, what is the point of xhtml?

iMarc
02-08-2007, 03:44 PM
I think the XHTML discussion is done. Could we direct the comments to the calendar now?

Any suggestions on how to get the script posted on DD. Should I make it into a nice template for download or something?

jscheuer1
02-08-2007, 05:33 PM
I think the XHTML discussion is done. Could we direct the comments to the calendar now?

Any suggestions on how to get the script posted on DD. Should I make it into a nice template for download or something?

On the first part, wait until the real experts show up, if they do. I'm thinking about Twey and (if he ever returns), mwinter.

On the second part, that would sure help. However, the sole decision on inclusion in the library is ddadmin's. He is busy but, I am sure he will review this submission sooner or later. It doesn't hurt that most, if not all of the folks commenting here like the script so far. I haven't really inspected the code though. The interface is clean and works well in IE 7, FF 1.5.0.9 and Opera 9.01 for me. I take that as a very good sign.

Good luck with it!

mburt
02-08-2007, 11:53 PM
(if he ever returns), mwinter
His presence is missed here, I have to say. Without his insight all hell can brake loose, and noone be here to correct us... wait, Twey to the rescue!! (I'm slightly sleep deprived so anything I say that either doesn't make sense, or is just mindless ranting, igore :))

blm126
02-09-2007, 01:42 AM
I took a closer look, and I have got a couple more comments. 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. 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". 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. Which leads me to my next point. What kind of browser compatibility do you have?

mburt
02-09-2007, 01:47 AM
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
02-09-2007, 05:48 AM
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
02-10-2007, 02:44 AM
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
02-10-2007, 05:01 AM
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
02-10-2007, 05:42 AM
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
02-10-2007, 11:44 PM
I just got a chance to check, it works fine in Konqueror.

iMarc
02-12-2007, 06:52 PM
Updated have been made!


The Clean Calendar (http://marcgrabanski.com/code/clean-calendar/) code is up for download.
Parameters added to getElementsByClass function:

var x = getElementsByClass(popUpCal.inputClass, document, 'input');
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
02-16-2007, 07:51 PM
ddAdmin! Where are you?