...

View Full Version : Fully-navigable cross-browser calendar



ca_redwards
12-27-2002, 12:37 AM
I welcome your opinion of a JavaScript I wrote.

Recently, I have learned about the document object model, along with vital facts about JavaScript Functions, regular expressions, and prototypes.

My learning has culminated in the creation of a powerful client-side HTML generation library. Now, my HTML() bookmarklet library (http://www.angelfire.com/ca/redwards/html__.calendar.html) packs 154 functions into less than 2K! Once these window, String and Array functions are loaded, large HTML constructs can be created with very compact JavaScript "clientlets."

I welcome your comments about this technique for client-side HTML generation. It's highly cross-browser.

Borgtex
12-27-2002, 01:54 AM
nice :thumbsup:

Algorithm
12-28-2002, 09:06 AM
After looking over your code, I found a number of things that could be improved upon, so I tinkered with it. Hope you don't mind!

I removed the global templates (improving interoperability), updated the syntax to meet XHTML standards, removed that annoying 'empty string' bug, and squeezed the filesize down to 1.4KB.

This is a great concept, and I can definitely see myself using this in the future. Thanks!

ca_redwards
12-30-2002, 10:01 PM
I appreciate your effort to slim down my code, but it is necessary that double quotes be avoided. That allows it to be included into a cross-browser javascript: link. Newer browsers would allow you to escape the double quotes, but older ones will just boff the HTML parsing.


Originally posted by Algorithm
After looking over your code, I found a number of things that could be improved upon, so I tinkered with it. Hope you don't mind!

I removed the global templates (improving interoperability), updated the syntax to meet XHTML standards, removed that annoying 'empty string' bug, and squeezed the filesize down to 1.4KB.

This is a great concept, and I can definitely see myself using this in the future. Thanks!

Thanks! And let me know if you can successfully get this slimmed down into a highly cross-browser (IE/NS/MZ) javascript: link.

Algorithm
12-31-2002, 12:44 AM
I know of no browser that supports JavaScript which does not also support character escaping. Although my code cannot be implemented in a link, it can still be embedded in the page within SCRIPT tags. This method carries the further advantage of automatic loading.

ca_redwards
12-31-2002, 12:54 AM
I renamed your file as html.js and included it as the source to a SCRIPT tag. Then I browsed that page, whereupon I invoked my calendar and bgcolor bookmarklets. But it does not work.

My original HTML() bookmarklet library creates 154 functions that do not seem get created properly by your modification of my code.

What broswer are you using? I am using IE 5.5 ...


Originally posted by Algorithm
I know of no browser that supports JavaScript which does not also support character escaping. Although my code cannot be implemented in a link, it can still be embedded in the page within SCRIPT tags. This method carries the further advantage of automatic loading.

ca_redwards
12-31-2002, 01:08 AM
In my original code, the regular expressions replace not only the function name, but parts of the literal in the function's code too.

Namely, in each of these functions...

function Y(W){return' Y'+(W?('='+String.fromCharCode(34)+W+String.fromCharCode(34)):'')};
function X(W){return'<X'+(W?W:'')+'>'};
function Z(W){return'<Z'+(W?W:'')+'>'+this+'</'+'Z>'};
function G(W){return'<G'+(W?W:'')+'>'+this.join('<G'+(W?W:'')+'>')};
function R(W){return'<R'+(W?W:'')+'>'+this.join('</'+'R><R'+(W?W:'')+'>')+'</'+'R>'};

... it is important to replace not only the function name in the header, but also in the string literal returned by the function. By using the .toString() method of the "template" function, the word "function" is returned too. This is critical for writing a viable function definition onto the appropriate object (be it window, String.prototype or Array.prototype).

Incidentally, you also dropped the code that writes my copyright message into the status line! :mad:

Algorithm
12-31-2002, 01:16 AM
Works fine for me; IE6, NS7, and NS4 all give identical results to your implementation.

http://www.undefined.net/null/html.html

EDIT:

I have the "function()" part in there, it's near the beginning of the code and is added to each template string. Look again and you'll see it.

The copyright was exised to save space, as you already had a comment in the code explaining the same thing, and status-bar messages often interfere with browsing. If you'd like to put it back in, go right ahead.

ca_redwards
12-31-2002, 01:30 AM
Yes, I see that it does work as you said earlier (I think I inadvertantly introduced a carriage return in there someplace!).

However, since I have developed bookmarklet-based "widgets" that use this library (pop-up calendar, websafe color palette, HTML page editor, etc), I still need to put it into a bookmarklet for use on other people's pages.

The major advantage of making these tools into bookmarklets is that they can interact with the dom implemented on other people's pages. For instance, the bgcolor utility allows you to recolor Yahoo's main entry page. Go to any newspaper site, and use the editor tool (IE only) to "adjust" the content of any articles there. (Just for fun, give printouts of such doctored articles to your most guillible colleagues!). ;)

ca_redwards
01-04-2003, 09:36 AM
I (now) agree that you have successfully reduced the code size, but in reviewing it, I have become more concerned about its efficiency/readability. My gut instinct is that a more RegExp-ish solution exists to address these issues, but I've yet to discover it.

I am now thinking about how to dynamically build a bookmark-ready HTML() library link, then eval its href. Once the library is loaded, the remainder of the page could be built with the library. (I'm warming up to the5k.org contest next Fall!)


Originally posted by Algorithm
Works fine for me; IE6, NS7, and NS4 all give identical results to your implementation.

http://www.undefined.net/null/html.html

EDIT:

I have the "function()" part in there, it's near the beginning of the code and is added to each template string. Look again and you'll see it.

The copyright was exised to save space, as you already had a comment in the code explaining the same thing, and status-bar messages often interfere with browsing. If you'd like to put it back in, go right ahead.

ca_redwards
01-29-2003, 01:55 AM
I've simplified the HTML() bookmarklet library (http://www.angelfire.com/ca/redwards/html__.calendar.html)'s invocation significantly. True to its name, the HTML() function can now be called (implicitly on window), with a string parameter that specifies what tags/attributes/containers to implement. These are identified by mixed/lower/uppercase respectively. I used to impose my huge list of 108 tag/attrs. But now you provide only what you need! By itself (without comments or volumes of tag/attrs), it weighs in at only 0.81K !!

Per Algorithm's suggestion, the factory functions (formerly called "template" functions) return lowercased tag names and attributes with the trailing space-slash inside of tags (formerly called "elemental" tags -- namely, those without any end tag). Attributes are still returned with a leading space, for easy concatenation and subsequent inclusion as the attributes parameter to the tag/container functions. These changes should not affect any existing html constructs that folks have already built with the old returns-everything-capitalized library.

One interesting optimization I made to both the HTML() bookmarklet library (http://www.angelfire.com/ca/redwards/html__.calendar.html) itself and the calendar's constructor code is how I define all the necessary functions in an array of functions known by a single identifier. Furthermore, I encapsulated these functions to reduce potential naming clashes with any outside JavaScript code.

In my attachment, I've partially commented the five-line JavaScript source that builds a fully-navigable cross-browser pop-up calendar (IE5.5, NS4.7/6.2/7.0, MZ1.1). Without the comments, it is only 2.84K of JavaScript code (but it generates a staggering 9.1K of html for each calendar!).

See you at the5k.org contest next year! :D


Originally posted by Algorithm
After looking over your code, I found a number of things that could be improved upon, so I tinkered with it. Hope you don't mind!

I removed the global templates (improving interoperability), updated the syntax to meet XHTML standards, removed that annoying 'empty string' bug, and squeezed the filesize down to 1.4KB.

This is a great concept, and I can definitely see myself using this in the future. Thanks!

Algorithm
01-29-2003, 08:22 PM
This code is an improvement from your original version. However, you still have the 'empty string' bug, wherein an empty string passed as an attribute will instead result in the attribute having no value, which is another thing entirely.
<input value="" /> <-- Valid
<input value /> <-- InvalidIn fact, as I recall, according to XHTML standards, no attribute should be valueless. My version of your code substitutes the attribute name if no value is supplied.
<td nowrap> <-- OK, but invalid XHTML
<td nowrap="nowrap"> <-- Valid XHTML, and still read properly by older browsersAlso, I must reiterate that allowing use of the double-quote character would greatly reduce your code's current size. There is no practical use of this code that requires its employment in a link.

winwintoo
02-11-2003, 01:01 AM
FYI I clicked on the link in the first message in this thread, but the page didn't load into Safari (it loaded fine in netscape)

Take care, Margaret

ca_redwards
02-11-2003, 01:07 AM
... besides offroading in animal country!

winwintoo
02-11-2003, 01:18 AM
Safari is Apple's new browser that works in OSx.2

Margaret

- and it's more fun than offroading..:D

ca_redwards
02-11-2003, 01:21 AM
Originally posted by winwintoo
Safari is Apple's new browser that works in OSx.2

Can you tell me what it does? ...With my calendar script, I mean.

Are there any errors issued or ... ?

winwintoo
02-11-2003, 01:40 AM
I wish I could tell you more, but Safari doesn't offer any diagnositic tools (at least I haven't found any)

It looks like the page is loading - it goes through all the busy-ness - the progress bar and all that - and I get your copyright on the status bar. And I can view source - and the page source is there, but the screen is white like the driven snow.

I communicate with an apple web developers list - I'll ask them for some insight and let you know.

Margaret

ca_redwards
02-11-2003, 01:43 AM
Thank you. If the new Apple machine gets sufficiently popular, I may have to rethink my "cross-browser" label!

winwintoo
02-11-2003, 02:14 AM
If the new Apple machine gets sufficiently popular

That's a joke right :D :D

Margaret

ca_redwards
03-23-2005, 03:47 AM
I've created a handy tool for creating clientlets. This HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html) makes it easy to see the results of your clientlet creations.

Enjoy!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum