Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Element.prototype

  1. #1
    Join Date
    Feb 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Element.prototype

    How can I get it to work in internet explorer without using the horrible htc files?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,924
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    What's so horrible about htc files? Anyways, I've always just used functions for manipulating elements. The prototype model really has little to offer over the function model other than a certain elegance in the way that the code looks. I would, of course use it for elements, if it were cross browser, which it is not.

    You can still do some fun things with prototype String and Array - those work in most browsers:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    Array.prototype.hide = function(v){
    for (var i = this.length - 1; i > -1; --i)
    if (typeof this[i] == 'object' && this[0].tagName)
    this[i].style.visibility = v;
    }
    String.prototype.arEl = function(){
    return [document.getElementById(this)];
    }
    </script>
    </head>
    <body>
    <div id="test">
    Hi
    </div>
    <input type="button" value="Hide" onclick="'test'.arEl().hide('hidden');"> 
    <input type="button" value="Show" onclick="'test'.arEl().hide('');">
    </body>
    </html>
    Last edited by jscheuer1; 06-22-2008 at 02:53 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    String.prototype.arEl = function(){ return [document.getElementById(this)]; }
    Never thought of this. Cool.
    Trinithis

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,924
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Trinithis View Post
    Never thought of this. Cool.
    It could be much more powerful and/or specific, consider this mod (arEls):

    Code:
    String.prototype.arEls = function(){
    for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
    a[i] = document.getElementById(a[i]);
    return a;
    }
    Which will return the same as the original, but can also return an array of multiple elements by their id's:

    Code:
    'test menu1 button2'.arEls()
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Trinithis (06-22-2008)

  7. #6
    Join Date
    Feb 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help jscheuer1.

    Quote Originally Posted by Twey View Post
    I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.
    I was trying to imitate the features of prototype, as it saves lines and lines of code. I've made my own personal js framework which builds powerful widgets with just a few lines of code, however I have one problem and it is with Element.prototype.

    In the same way prototype uses $("id").setStyle();

    I would like to do $("whatever").buildWidget(); etc.

    rather than $("whatever") = new Widget("more","parameters","needed","this","way")

    Before posting I tried adding elements to an array every time my $("id") function is called, and doing things that way with no success.

    Any idea how I can "use an accessor function"? I've never heard of it.

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,924
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    You can use the Array and/or String prototypes and bend them to your needs, ex:

    Code:
    String.prototype.widget=function(){
    var el = document.getElementById(this);
    do whatever to el here;
    }
    Usage:

    Code:
    'id'.widget();
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Feb 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You can use the Array and/or String prototypes and bend them to your needs, ex:

    Code:
    String.prototype.widget=function(){
    var el = document.getElementById(this);
    do whatever to el here;
    }
    Usage:

    Code:
    'id'.widget();
    I know I'm being fussy, but is there no way to use $("whatever"); (where $() returns document.get...

  10. #9
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Things like Prototype's $ function are accessor functions. They grab things. In addition, the $ function adds functionality to the things it grabs.

    Code:
    function $(element) {
      if (arguments.length > 1) {
        for (var i = 0, elements = [], length = arguments.length; i < length; i++)
          elements.push($(arguments[i]));
        return elements;
      }
      if (Object.isString(element))
        element = document.getElementById(element);
      return Element.extend(element);
    }
    See the highlighted code? That is where it extends the data. In this way, you can transparently add methods to elements in a way similar to that of Element.prototype. All you have to do is guarantee that you use $ when you grab an element (directly or indirectly).

    BTW, what exactly is a widget?
    Trinithis

  11. #10
    Join Date
    Feb 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Trinithis View Post
    widget?
    <input type="text" id="input" ... />

    <script>
    lEvents.onwhenready=function(){
    $("input").widget("spinbox","...")
    }
    </script>

    Changes existing things to make them better... I don't know if it's a widget but I call them that

Bookmarks

Posting Permissions

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