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.
Results 1 to 5 of 5
  1. #1
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

    HTMLElement prototyping in Safari

    We all know (and love!) the fact that Mozilla exposes element constructors (HTMLParagraphElement, for example) for prototyping. Turns out Opera 8 allows you do to the same thing.

    So this leaves Safari, which has actually allowed you to do this since 1.0, *but* doesn't publicly expose the constructors. The below code exports constructors into public variables matching those in Mozilla and Opera 8:
    Code:
    /*
    HTMLElement Prototyping in KHTML and WebCore
    Copyright (C) 2005  Jason Davis, www.jasonkarldavis.com
    Additional thanks to Brothercake, www.brothercake.com
    
    This code is licensed under the LGPL:
    	http://www.gnu.org/licenses/lgpl.html
    */
    
    if (navigator.vendor == "Apple Computer, Inc." || navigator.vendor == "KDE") { // WebCore/KHTML
    	function(HTMLConstructors) {
    		for (var i in HTMLConstructors) {
    			window["HTML" + i + "Element"] = document.createElement(HTMLConstructors[i]).constructor;
    		}
    	}({
    		Html: "html", Head: "head", Link: "link", Title: "title", Meta: "meta",
    		Base: "base", IsIndex: "isindex", Style: "style", Body: "body", Form: "form",
    		Select: "select", OptGroup: "optgroup", Option: "option", Input: "input",
    		TextArea: "textarea", Button: "button", Label: "label", FieldSet: "fieldset",
    		Legend: "legend", UList: "ul", OList: "ol", DList: "dl", Directory: "dir",
    		Menu: "menu", LI: "li", Div: "div", Paragraph: "p", Heading: "h1", Quote: "q",
    		Pre: "pre", BR: "br", BaseFont: "basefont", Font: "font", HR: "hr", Mod: "ins",
    
    		Anchor: "a", Image: "img", Object: "object", Param: "param", Applet: "applet",
    		Map: "map", Area: "area", Script: "script", Table: "table", TableCaption: "caption",
    		TableCol: "col", TableSection: "tbody", TableRow: "tr", TableCell: "td",
    		FrameSet: "frameset", Frame: "frame", IFrame: "iframe"
    	});
    
    	function HTMLElement() {}
    	HTMLElement.prototype     = HTMLHtmlElement.__proto__.__proto__;	
    	var HTMLDocument          = document.constructor;
    	var HTMLCollection        = document.links.constructor;
    	var HTMLOptionsCollection = document.createElement("select").options.constructor;
    	var Text                  = document.createTextNode("").constructor;
    	var Node                  = Text;
    }

    In Opera < 8, all elements inherit directly from Object(), so you can still prototype Object() if you need to do element prototyping. Internet Explorer's elements *don't* inherit from Object, oddly enough, so who knows with that browser. In any case, there you go. It also happens to work in Konqueror (AFAIK).

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting stuff So with this as a base, it's a simple as:
    Code:
    HTMLWhateverElement.prototype.whatever
    And your library will handle the conversions?

    Remind me why it didn't work in Opera 7, and can you give an example of what could be done? Presumably it's not possible to emulate the behavior you're talking about within your library - to pick up on collection prototypes and create Object prototypes from them?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    For Safari and Konq, the script will handle the conversion.

    In Opera < 8, elements inherit directly from Object, not HTMLSomethingElement. So you can still prototype:

    Object.prototype.test = function() { return this.innerHTML }

    And that will show up on the individual elements, however, it will also show up on Array objects, Strings, etc etc. Prototyping Object for this also works in everything *but* Win/IE (haven't checked Mac/IE).

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    really great Code.
    It works - but - Firefox stops every thing on this line:
    Code:
    function(HTMLConstructors) {
    no chance to put an if condition around.
    Any ideas, (beside of controlling it from the server) ?
    Andres

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Oops, use the code here:
    http://blog.codingforums.com/index.p...ror_and_opera/

    Needed to wrap the anonymous function in parantheses.


  •  

    Posting Permissions

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