SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    ********* Articles ArticleBot's Avatar
    Join Date
    Apr 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Discussion thread for Well-Behaved DHTML: A Case Study

    This is a dedicated thread for discussing the SitePoint article 'Well-Behaved DHTML: A Case Study'

  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Example F does not work. Mozilla’s JavaScript console reports the following:
    Code:
    Error: invalid quantifier {
    Source File: http://www.sitepoint.com/examples/we.../ExampleF.html
    Line: 122, Column: 43
    Source Code:
            null == navigator.appVersion.match(/Safari/{d}+$/);
    Other than that, this is an excellent article.

  3. #3
    Your daddy. WALoeIII's Avatar
    Join Date
    Apr 2001
    Location
    USA
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Example F also does not work for me in Mozilla Firebird.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent article! I look forward to experimenting more with the code and ideas.

    I ran the demo on Win98 with Opera7.11, IE6 and Mozilla1.2.1.

    Opera and Mozilla didn't like the RegExp so I used indexOf(). I'm not familiar with Safari's appVersion - will indexOf miss something that the RE would have caught?

    The following function illustrates something interesting. There is a subtle difference between the C/C++ and Javascript logical operators.
    Code:
        function supportsDynamicLabels() {
          return 
            document.getElementById && 
            (window.attachEvent || window.addEventListener) && 
            null == navigator.appVersion.match(/Safari\/{d}+$/);
        }
    Try this:
    Code:
    alert( document.getElementById && (window.attachEvent || window.addEventListener) );
    In C/C++ it will return a boolean. In Javascript it returns a reference to a function. In Opera and IE it returns a reference to window.attachEvent. In Mozilla it returns a reference to window.addEventListener.

    From the Javascript reference: "Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value."

    I used this:
    Code:
        function supportsDynamicLabels() {
          return (
            xDef(document.getElementById)
            && (xDef(window.attachEvent) || xDef(window.addEventListener))
            && -1 == navigator.appVersion.indexOf('Safari')
          );
        }
    	function xDef() {
    	  for (var i = 0; i < arguments.length; ++i) {
    	  	if (typeof(arguments[i]) == "undefined") return false;
    	  }
    	  return true;
    	}
    And it worked great in all three browsers.

    Aaron, I really enjoyed your article and demo - well done!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is actually strange because I would have expected this:
    Code:
    if (supportsDynamicLabels())
    to have worked - even tho the function returned a function reference. ???

  6. #6
    SitePoint Member scratch's Avatar
    Join Date
    Jul 2003
    Location
    Belgium
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Example F does not work on IE6 either.

  7. #7
    Anonymous
    SitePoint Community Guest
    "The importance of careful testing for DHTML effects cannot be understated."

    Well, looks like I didn't follow my own advice here. Not sure how this stupid regex bug slipped by.

    Opera and Mozilla didn't like the RegExp
    Nothing wrong with regex's, just mine. The correct one function should be:

    function supportsDynamicLabels() {
    return document.getElementById &&
    (window.attachEvent || window.addEventListener) &&
    null == navigator.appVersion.match(/Safari/d+$/);
    }

    Note that I also moved the first part of the conditional up onto the same line as the return statement. The newline was actually throwing off IE and causing that function to be undefined.

    Somebody mentioned something about how the logical operators can sometimes return references to the objects they are performed on.

    This is absolutely true, but since everything in javascript can be evaluated in a boolean context, it doesn't really matter. I am getting references when I use ||, but what gets returned from the function is always used in a boolean context. The workaround you provide is not really necessary.

    thanks everyone for your comments, and I'm truly sorry about the error on example F.

    --
    Aaron

  8. #8
    SitePoint Member
    Join Date
    Aug 2003
    Location
    new york
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anonymous
    "function supportsDynamicLabels() {
    return document.getElementById &&
    (window.attachEvent || window.addEventListener) &&
    null == navigator.appVersion.match(/Safari/d+$/);
    }

    gah! the bulletin board changed my code. The regex should be:

    slash-Safari-backslash-slash-d+$-slash



    --
    Aaron

  9. #9
    Anonymous
    SitePoint Community Guest
    It hardly seems worth the effort of using DHTML for the little benefit it brings. Better to just design for round tripping and dumb browsers.
    If a rich client is needed use FlashMX or java applets. If you are going to break a browser you may as well go the whole hog with a plugin.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! That explains everything.

    Works like a charm now

    This is excellent stuff!

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at the length of the code and comparing it to the effect it provides, I can understand people who build scripts the easier and EVIL way!

    Look at sitepoints "Search the forums..."-field for instance.....

  12. #12
    SitePoint Member
    Join Date
    Aug 2003
    Location
    new york
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by torkil
    Looking at the length of the code and comparing it to the effect it provides, I can understand people who build scripts the easier and EVIL way!
    You've got a valid point there... I chose the labels effect as an example because it touched on all the major issues that I usually come across in DHTML. Unfortunately, it's not very sexy, especially for the amount of code required to get it "right".

    Usually, I would imagine that people would apply this strategy to effects which are either considerably simpler, or vastly more complicated. Either way, you're going to get more bang for your buck.

    --
    Aaron

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The concepts presented in the article are more important than the demo itself.

  14. #14
    SitePoint Member dtjmarsh's Avatar
    Join Date
    Jun 2003
    Location
    Sydney
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am wanting to use this technique for all my web forms so that all javascript events for things like form validation, field changing events, button events and onclick events are in a seperate javascript file and all events are attached through script. I am wanting to know if this is a good technique. That is attaching all events in script. I can see this would keep my HTML very clean but not sure how far I should take it.

  15. #15
    Anonymous
    SitePoint Community Guest
    I agree that the method is very important here, and not the example, which is overkill. But curious: why bother with the document.writeln of a stylesheet when you could just assign the style directly in js when you collect all the labels?

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dtjmarsh
    I can see this would keep my HTML very clean but not sure how far I should take it.
    The first question to ask yourself is... what is my target audience - what browsers do I have to support - does my client understand that the 'downgrade' page may not look/function exactly like the script-enabled page?

  17. #17
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anonymous
    why bother with the document.writeln of a stylesheet when you could just assign the style directly in js when you collect all the labels?
    I think this is a valid technique as well. But the technique of using document.write eliminates downloading a file that will not get used in downgrade mode. I like to use a combination of the two techniques.

  18. #18
    SitePoint Member
    Join Date
    Aug 2003
    Location
    new york
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why bother with the document.writeln of a stylesheet when you could just assign the style directly in js when you collect all the labels?
    There's no good vs. evil answer -- I just find that it's much easier for me to maintain and debug CSS when it's in a CSS block or CSS file, not as individual css attributes applied to elements. If doing that way works for you, then great!

    I think this is a valid technique as well. But the technique of using document.write eliminates downloading a file that will not get used in downgrade mode.
    Neither method downloads an unnecessary file, or any files for that matter. On the other hand, when my effect requires any more than a few CSS rules, I usually put them in a .css file and writeln the link to the file.

    This still does not result in an unnecessary download because I have already checked whether the browser can support my script at that point and know whether to writeln the CSS link or not. It's just a matter of personal preference and maintainability.

    --
    Aaron

  19. #19
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One reason still to use form values would be that accessibility guidelines require all text fields to have a default value for older browsers that don't display the field otherwise.

    Otherwise, I like this example better than the usual equivalent because it keeps the (X)HTML much cleaner and more self explanatory.

    And the underlying themes in the article are spot on.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  20. #20
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Lawrence
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    window.attachEvent alternatives?

    Quote Originally Posted by ArticleBot
    This is a dedicated thread for discussing the SitePoint article 'Well-Behaved DHTML: A Case Study'

    window.attachEvent doesn't work in Netscape 7.2 or other browsers, is there an alternative that can be used?

  21. #21
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    attachEvent is an IE only method. addEventListener is the W3C DOM method. Check them out on google for more info.

    Good Luck,
    aDog

  22. #22
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Lawrence
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I took a menu that used a call to attachEvent and simply changed it to addEventListener, would it work for all browsers, or for other browsers but no longer for IE, meaning I'd have to detect the browser first then make the call in the code based on the browser version?

  23. #23
    troyb
    SitePoint Community Guest
    In the case of the Opera browser, using navigator.appName is less reliable than navigator.userAgent isn't it? I realize that more and more browsers are allowing the spoofing of other userAgents, but how would one fix this for the Opera browser?

  24. #24
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just check for the existence of "window.opera".

  25. #25
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This sitepoint article was linked in a more recent article on alistapart.com:

    http://www.alistapart.com/articles/m...moreaccessible

    I Was wondering what the thoughts were on the methods over here versus the methods on the making compact forms more accessible" article.

    My end goal is to have a real sleek looking search bar on the main page of my site which is why I want it to appear label-less for the majority of the browsers viewing. But I would like it to be accessible too.

    I was wondering about how to go about two things:

    1) I would like the value that’s in the field to say “Please enter anything (name, city, zip, etc.) to get started” (I will make the field long enough to accommodate this sentence). But I don’t think I want this sentence to be a label for this field should JS be disabled.

    Right?

    Or maybe it would be ok to let the label be this sentence, but wouldn’t it be too long with spaces and everything to be used correctly with CSS and/or javascript code?

    Any advice on this?

    Also, 2) What if I wanted two different submit boxes – one for “find” and one for “add” depending on what they wanted to do with what they entered. What’s the best way to go about this?


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
  •