SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 choking! Object doesn't support this property or method...

    My partner put together this piece of Javascript to "un-class" all anchors which were childnodes of list items and add the class "selected" to the anchor that is clicked...

    Code:
    <script type="text/javascript">
    
    function CngClass(obj){
    
    ulist = obj.parentNode.parentNode;
    
    if (ulist.hasChildNodes() ) {
       liElems = ulist.childNodes;
       // Loop through the children
       for(c=0; c < liElems.length; c++) {
          if ( liElems[c].hasChildNodes() ) {
    	    aTags = liElems[c].childNodes;
       	    for(a=0;a<aTags.length;a++) {
    		  aTags[a].className='';
    	    }
    	}
       }
    }
    obj.className='selected'; 
    }
    
    </script>
    We added the "un-classing" because we were having an issue where if more than one instance of "slider" was used, selecting any other cleared all of them. We needed them to function independently of each other as there could be several per page.

    This works great in Firefox and in IE8 but unfortunately, IE7 is choking on line 29, character 5:

    Code:
    aTags[a].className=' ';
    Then giving me an "Object doesn't support this property or method" javascript error. We can't figure out what's going on... anyone out there care to try it?

    Full Page code here:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    
    <link rel="stylesheet" type="text/css" media="screen" href="slider_test.css" />
    
    <title>Privacy UI - Privacy Level Slider</title>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function CngClass(obj){
    
    ulist = obj.parentNode.parentNode;
    
    if (ulist.hasChildNodes() ) {
       liElems = ulist.childNodes;
       // Loop through the children
       for(c=0; c < liElems.length; c++) {
          if ( liElems[c].hasChildNodes() ) {
    	    aTags = liElems[c].childNodes;
       	    for(a=0;a<aTags.length;a++) {
    		  aTags[a].className='';
    	    }
    	}
       }
    }
    obj.className='selected'; 
    }
    
    /*]]>*/
    
    </script>
    
    </head>
    
    <body>
    
    <!-- begin slider instance 1 -->	
    <div id="form1PrivacySlider1" class="slider">
    		<ul class="bar">
      			<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
     			<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li> 
    			<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
    			<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
    			<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>
    
    		</ul>
    	</div>
    <!-- end slider instance 1 -->
    
    <!-- begin slider instance 2 -->
    <div id="form1PrivacySlider2" class="slider">
    		<ul class="bar">
      			<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
     			<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li> 
    			<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
    			<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
    			<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>
    
    		</ul>
    	</div>
    <!--  end slider instance 2 -->
    
    </body>
    
    </html>
    Thanks in advance to anyone who cares to take a shot at this one!

  2. #2
    SitePoint Member
    Join Date
    Mar 2009
    Location
    Zagreb, Croatia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man, your code makes my eyes hurt.... Not only that you are not using a JavaScript library (which you should), but you are setting the onclick attribute for each ANCHOR element in the HTML code and you are also using that horrible javascript protocol thingy, or whatever it is called ...

    Replace this...

    <a id="whatever" onclick="CngClass(this)" href="javascript:void(0);">whatever</a>

    with this....

    <a id="whatever" href="#">whatever</a>

    And then use a JS library to bind the click handler... for example in jQuery the code would be like so...

    $("li > a").click(function() {
    $(this).addClass("selected").parent().siblings().children("a").removeClass();
    });

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We're currently using ICE Faces for the majority of our page components but we wanted to use a custom interface for setting the privacy level. Purchasing the custom slider component wasn't an option so we built this. I've asked about doing EVERYTHING with JQuery, including what we're trying to write by hand or use ICE Faces for but so far no luck.

    I'll continue trying to push the JQuery angle, maybe an IE incompatibility will be just the thing to make them go that route.

  4. #4
    SitePoint Member
    Join Date
    Mar 2009
    Location
    Zagreb, Croatia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They declined jQuery? What are they nuts? :-D

    Well, I assume there are rational reasons for a company to hesitate about using a particular library, but wich jQuery it's just so much harder to think of any reason ...

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by clockeby View Post
    My partner put together this piece of Javascript to "un-class" all anchors which were childnodes of list items and add the class "selected" to the anchor that is clicked...
    It looks like those elements may not all be anchors. Try changing that loop to this:
    Code:
        for(a=0;a<aTags.length;a++) {
    		     if( aTags[a].nodeName == 'A' )
    		      aTags[a].className='';		  
    	    }
    Tab-indentation is a crime against humanity.


Tags for this Thread

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
  •