Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Fully-navigable cross-browser calendar

    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 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.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Spain
    Posts
    420
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nice
    Don't resist to assimilation. Billions of Borgs can't be wrong!

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    USA
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Attached Files Attached Files
    Last edited by Algorithm; 12-28-2002 at 11:08 AM.

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It needs to be quote free...

    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.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    USA
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'm not sure it works..

    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.

  • #7
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I think part of the problem is..

    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!

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Location
    USA
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Algorithm; 12-31-2002 at 01:19 AM.

  • #9
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up I stand corrected.

    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!).

  • #10
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This implementation is shorter...

    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.

  • #11
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's an update utilizing Algorithm's suggestions:

    I've simplified the HTML() bookmarklet library'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 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!

    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!
    Attached Files Attached Files
    Last edited by ca_redwards; 01-29-2003 at 02:15 AM.

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    USA
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <input value="" /> <-- Valid
    <input value /> <-- Invalid
    In 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.
    Code:
    <td nowrap> <-- OK, but invalid XHTML
    <td nowrap="nowrap"> <-- Valid XHTML, and still read properly by older browsers
    Also, 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.
    Last edited by Algorithm; 01-29-2003 at 08:34 PM.

  • #13
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page doesn't load in Safari

    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

  • #14
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question What is Safari?

    ... besides offroading in animal country!

  • #15
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Safari is Apple's new browser that works in OSx.2

    Margaret

    - and it's more fun than offroading..


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •