SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cross browser safe changes on child attributes of an element

    I have a function from http://www.quirksmode.org that I can use to get an element by id in most major browsers.


    Code:
    function getObj(name)
    {
      if (document.getElementById)
      {
      	this.obj = document.getElementById(name);
    	this.style = document.getElementById(name).style;
      }
      else if (document.all)
      {
    	this.obj = document.all[name];
    	this.style = document.all[name].style;
      }
      else if (document.layers)
      {
       	this.obj = document.layers[name];
       	this.style = document.layers[name];
      }
    }

    Another function that loops though the child elements of an element, it requires the id of the element to be hard coded in though.


    Code:
    function init()
    {
    
    	var parent1 = document.getElementById("commentholder");
    	var thisChild = parent1.firstChild;
    	while ( thisChild != parent1.lastChild )
    	{
    		if ( thisChild.nodeType == 1 )
    		{
    		
    			//alert(thisChild.id);
    			invi( thisChild.id, 1);
    		}
    		thisChild = thisChild.nextSibling;
    	}
    }

    I wish to combine the two. I tried altering the init() function like this but recieved an error that object was required.

    Code:
    function init(holder)
    {
    
    	var parent1 = new getObj(holder);
    	var thisChild = parent1.firstChild;
    	while ( thisChild != parent1.lastChild )
    	{
    		if ( thisChild.nodeType == 1 )
    		{
    		    //alert(thisChild.id);
    			invi( thisChild.id, 1);
    		}
    		thisChild = thisChild.nextSibling;
    	}
    }
    I tie them togther like this
    Code:
    function en(vari){
    // set child elements to invisible 
    var a = new getObj('commentholder');
    init(a);
    // show something
    invi(vari, 0);
    
    };


    HTML Code:
    <img src="image.gif" alt="Timeline6Pathway" width="573" height="150" border="0" usemap="#Map">
    <map name="Map">
      
    <area shape="rect" onmouseover="en('comment1')" onfocus="en('comment1')"  coords="14,24,74,45" href="#">
    <area shape="rect" onmouseover="en('comment2')" onfocus="en('comment2')"  coords="74,21,133,41" href="#">
    <area shape="rect" onmouseover="en('comment3')" onfocus="en('comment3')"  coords="136,17,219,33" href="#">
    
    </map>
    
    
    
    
    
    
    
    <div class ="balloon" id="text">
    <ul id= "commentholder" > 
    
    <li id="comment1"><b>Introductory Week</b><br>18th September – Course starts – introductory week</li>
      <li id="comment2"><b>Personal &amp; Professional Skills workshop and Macromolecular Assemblies Research Meeting</b><br>25th Sept</li>
    </ul>
    </div>


    Why does this line not work?


    Code:
    var parent1 = new getObj(holder);

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What exactly is holder? If it's not a String, it will fail.

    The getObj function seems unnecessary. Simply use document.getElementById("idOfElement");

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The getObj function doesnt return the DOM object, it returns an object with 2 properties:

    thingy.obj (the DOM object) and
    thingy.style (the style)

    Maybe you need to use
    var parent1 = new getObj(holder).obj;

  4. #4
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats it, thanks


    var parent1 = new getObj(holder).obj;


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
  •