Web Analytics Made Easy - StatCounter <label "for=(Opera)"?> - CodingForum

Announcement

Collapse
No announcement yet.

<label "for=(Opera)"?>

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    <label "for=(Opera)"?>

    Is it by design that the Opera browser does not allow a <label> to fire the onclick event for its target element, or am I missing something here?


    Here's an example w/ a workaround (maybe unnecessary?):

    <html><head>

    <style>
    body{background:#fff;color:#000;text-align:center}
    .inp{border:1px solid #fff;color:#000}
    .dsc{color:#444;font-size:smaller;margin-bottom:10px}
    .box1{border:3px double green;padding:6px}
    .box2{border:3px double blue;padding:6px}
    em{color:red}
    </style>

    </head><body>
    - Opera browser -
    <form>
    <p>
    <div class="dsc">must click checkbox for event</div>
    <span class="box1">
    <label for="cb1">
    <em>label</em>&amp;larr;</label>
    <input id="cb1" tabindex="1" type="checkbox" onclick="chk1()">
    <input readonly class="inp">
    </span>
    </p>
    <p>
    <div class="dsc">label event works here</div>
    <span class="box2">

    <label for="cb2" onclick="Opchk()">

    <em>label</em>&amp;larr;</label>
    <input id="cb2" tabindex="2" type="checkbox" onclick="chk2()">
    <input readonly class="inp">
    </span>
    </p>

    </form></body>

    <script>
    var itags = document.getElementsByTagName('input');

    function Opchk(){
    if (typeof window.opera != "undefined"){setTimeout(chk2,10)}}

    function chk1(){
    if (itags[0].checked == true){itags[1].value = "checked"}
    else{itags[1].value = ""}
    }

    function chk2(){
    if (itags[2].checked == true){itags[3].value = "checked"}
    else{itags[3].value = ""}
    }
    </script>

    </html>
    hmm... ?
    Tags: None
  • #2
    which version of Opera?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

    Comment

    • #3
      Version 7.11
      hmm... ?

      Comment

      • #4
        Hmm .. so it doesn't. I'll report it to the BTS and see what they say.
        "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

        Comment

        • #5
          Shot in the dark:

          Maybe it wants the name attribute as well?
          My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
          “Minds are like parachutes. They don't work unless they are open”
          “Maturity is simply knowing when to not be immature”

          Comment

          • #6
            Doesn't make a difference But that's just as well really, cos if Opera was doing label/name associations it would make radio controls unuseable..
            "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

            Comment

            • #7
              tru dat
              My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
              “Minds are like parachutes. They don't work unless they are open”
              “Maturity is simply knowing when to not be immature”

              Comment

              • #8
                aye, seen; innit
                "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

                Comment

                • #9
                  Hi,

                  Since scripting events for this problem is something that could become repetitive, I'm interested to know how this looks for a global function:

                  if (typeof window.opera != "undefined"){

                  var labl = document.getElementsByTagName("label");

                  for (i = 0; i < labl.length; i++){

                  labl[i].onclick = function (){

                  if(document.getElementById(this.htmlFor).onclick){

                  setTimeout("document.getElementById('" + this.htmlFor + "').onclick.call()",10)}}}}

                  If there's a better way of writing it, I'd like to learn something...
                  hmm... ?

                  Comment

                  • #10
                    Hmmm, I'd probably do it this way
                    Code:
                    if ( typeof window.opera != "undefined" )
{
    var forms = document.getElementsByTagName( "form" ), form, f = 0, labels, label, l;
    while ( form = forms[f++] )
    {
        labels = form.getElementsByTagName( "label" ), l = 0;
        while ( label = labels[l++] )
        {
            label.onclick = function ()
            {
                if( this.htmlFor && form.elements[this.htmlFor] )
                {
                    form.elements[this.htmlFor].focus();
                }
            }
        }
    }
}
                    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
                    “Minds are like parachutes. They don't work unless they are open”
                    “Maturity is simply knowing when to not be immature”

                    Comment

                    • #11
                      Thanks beetle... I learned a few things there.

                      Opera has a couple of problems with the specifics:

                      1. form.elements[this.htmlFor] throws an error

                      -------------------------------------------------

                      Event thread: onclick

                      message:
                      Expression evaluated to null or undefined and is not convertible to Object: form

                      Backtrace:
                      if (this.htmlFor && form.elements[this.htmlFor])
                      At unknown location
                      {event handler trampoline}

                      I'm guessing that an 'element id' won't work as a form.elements index...?

                      -------------------------------------------------

                      &nbsp;

                      2. Without a timeout in the code, the event fires before the target element changes, so with a checkbox, for instance, a function would work backwards (checked: true vs. false).

                      &nbsp;

                      &nbsp;

                      3. Setting focus() to the target element doesn't seem to fire its event... The only methods I've found which have done this are function.call() and fireEvent(JScript).

                      ................................................................

                      Anyway, the code works in this form (which seems better than what I had); thanks:

                      if ( typeof window.opera != "undefined" )
                      {
                      var labels = document.getElementsByTagName( "label" ), label, l = 0;

                      while ( label = labels[l++] )
                      {
                      label.onclick = function ()
                      {
                      if( this.htmlFor && document.getElementById(this.htmlFor).onclick )
                      {
                      setTimeout("document.getElementById('" + this.htmlFor + "').onclick.call()",10)}}}
                      }
                      Last edited by swmr; Mar 30, 2004, 02:29 AM.
                      hmm... ?

                      Comment

                      • #12
                        Sure thing. And if I may, one or two more optimizations for your function
                        Code:
                        if ( typeof window.opera != "undefined" )
{
    var labels = document.getElementsByTagName( "label" ), label, l = 0, elem;

    while ( label = labels[l++] )
    {
        label.onclick = function()
        {
            elem = document.getElementById( this.htmlFor );
            if( this.htmlFor && elem.onclick )
            {
                setTimeout( function() { elem.onclick() }, 10 );
            }
        }
    }
}
                        Here's what I changed, and why
                        1. Created reference to form element, as I end up using it twice
                        2. Implemented anonymous function for setTimeout instead of a string. The is just more efficient (as is uses my reference from #1) and doesn't ever present scope problems. Also, it just looks cleaner, yes?
                        3. change onclick.call() to onclick(). This is not of any benefit, other than brevity. In fact, I'm not sure of the compatibilty of this syntax, so YMMV.
                        P.S. FYI, using the this keyword inside event-functions in IE will always refer to window, and not the element you're attaching the event-function to, as you'd expect. Since this is an Opera-only function, this is'nt an issue here. Just the same, it's an idiosyncracy that I learned the hard way myself, so I'm sure you appreciate knowing it
                        Last edited by beetle; Sep 10, 2003, 04:16 PM.
                        My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
                        “Minds are like parachutes. They don't work unless they are open”
                        “Maturity is simply knowing when to not be immature”

                        Comment

                        • #13
                          beetle, that works perfectly (& looks much better )!

                          Its great to know how to implement an anonymous function like that...

                          Thanks a lot for all of the useful information and examples you provided.
                          hmm... ?

                          Comment

                          • #14
                            (post of script deleted due to errors in every browser)
                            Last edited by Choopernickel; Sep 11, 2003, 11:23 AM.

                            Comment

                            • #15
                              Originally posted by Choopernickel
                              (post of script deleted due to errors in every browser)
                              huh?
                              My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
                              “Minds are like parachutes. They don't work unless they are open”
                              “Maturity is simply knowing when to not be immature”

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X