SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast jeffbax's Avatar
    Join Date
    Jun 2003
    Location
    New Jersey
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Strange Opera-only JavaScript issue... (related to si-clear-children script)

    I'm working on a site that requires some overlapping html tables, and one of the issues is making sure that neither overlaps the rest of the site content when growth is unpredictable.

    I found a script that accomplishes this task

    http://www.shauninman.com/archive/20...nline_absolute

    And its quite good actually, the problem is Opera 9+ doesn't seem to want to participate and gives this JavaScript debug error:
    Code:
    JavaScript - file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/clear.html
    Inline script thread
    Error:
    name: TypeError
    message: Statement on line 65: Could not convert undefined or null to object
    Backtrace:
      Line 65 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        if (! elem.className.match(/\bclear_children\b/))
              Line 47 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        this.clear();
      Line 89 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        SI.ClearChildren.initialize();
    The code in question is... and I'll bold the lines
    Code:
    /*--------------------------------------------------------------------------------
     SI.ClearChildren v1.0
    
     Instructions for use:
    
     0. Include the following rules in your CSS (IE Win 5 requires `clear_children` to 
    	be display: inline; you can use the * html hack--just be sure to hide from IE 
    	Mac):
    
     	.clear_children,.cc_tallest { position: relative; }
    	.cc_tallest:after { content: ''; }
    
     1. Layout your elements using absolute positioning relative to a container with a 
    	class of `clear_children` which contains only the absolutely positioned 
    	elements (no other inline elements).
    
     2. This causes the containing element to collapse.
    
     3. Decide which contained element will be the deepest on the most occasions and 
    	assign a class of `cc_tallest`. This will cause the containing element to 
    	expand to the height of this element.
    
     4. Include this file.
    
     ---------------------------------------------------------------------------------*/
    if (!SI) { var SI = new Object(); };
    SI.ClearChildren =
    {
    	control			: null,
    	watchInterval	: 50,
    	height			: 0,
    	initialize		: function()
    	{
    		// IE Mac chokes on this (width and height assignments in particular). Go fish.
    		if (document.createElement && !(document.all && !window.print))
    		{
    			var c = document.createElement('div'), s = c.style;
    			s.position		= 'fixed';
    			s.top			= '0';
    			s.visibility	= 'hidden';
    			s.width			= '1.em';
    			s.height		= '1.em';
    			this.control = document.body.appendChild(c);
    			this.height = 0;
    			window.setInterval('SI.ClearChildren.monitor()', this.watchInterval);
    		};
    		this.clear(); //49
    	},
    	
    	monitor	: function()
    	{
    		var o = this.height;
    		this.height = this.control.offsetHeight;
    		if (o != this.height) { this.clear(); };
    	},
    	
    	clear : function()
    	{
    		if (!document.getElementsByTagName && !document.all) { return; }
    
    		var elems = (document.all) ? document.all : document.getElementsByTagName('*');
    		for (var i = elems.length-1; i >= 0; i--)
    		{
    			var elem = elems[i];
    			if (!elem.className.match(/\bclear_children\b/)) { continue; }; //65
    			var container = elem;
    			var tallest;
    			var maxHeight = 0;
    			for (var j = 0; j < container.childNodes.length; j++)
    			{
    				var contained = container.childNodes[j];
    				if (contained.nodeType == 1)
    				{
    					if (contained.offsetHeight > maxHeight)
    					{
    						maxHeight	= contained.offsetHeight;
    						tallest		= contained;
    					};
    					contained.className = contained.className.replace(/\bcc_tallest\b/, '');
    				};
    			};
    			// Add to the front of the existing classes to appease IE Mac. Save me Jeebus. 
    			tallest.className = 'cc_tallest' + ((tallest.className == '') ? '' : ' ' + tallest.className);
    		};
    	}
    };
    
    // Just do it.
    SI.ClearChildren.initialize(); //89
    IE7, Safari, and Mozilla all work well, but Opera is giving a pain but I'd rather not have to just use a different stylesheet for Opera as a workaround.

    You can download more examples with the code pack
    http://www.shauninman.com/assets/exa...ildren-1.0.zip

    And none seem to work in Opera.

    Anyone know what might be the issue?

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    opera

    Is your Opera browser identifying itself as Opera?
    Tools -> Quick Preferences -> Edit Site Preferences -> Network -> Browser Identification

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a guess, but perhaps some elements returned by Opera through document.all have no className. Try changing:
    Code:
    var elems = (document.all) ? document.all : document.getElementsByTagName('*');
    to
    Code:
    var elems = document.getElementsByTagName?document.getElementsByTagName('*') : document.all  ;
    and
    Code:
    if (!elem.className.match(/\bclear_children\b/))
    to
    Code:
    if (elem.className && !elem.className.match(/\bclear_children\b/))
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Enthusiast jeffbax's Avatar
    Join Date
    Jun 2003
    Location
    New Jersey
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No dice, I did that, and removed a line supposedly for IE Mac which gave this error...
    Code:
    JavaScript - file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/clear.html
    Inline script thread
    Error:
    name: TypeError
    message: Statement on line 83: Could not convert undefined or null to object
    Backtrace:
      Line 83 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        tallest.className = "cc_tallest" + (tallest.className == "" ? "" : " " + tallest.className);
      Line 47 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        this.clear();
      Line 89 of linked script file://localhost/Users/Jeff/Desktop/si-clear-children-1.0/si-clear-children.js
        SI.ClearChildren.initialize();
    But now the script just doesn't work
    Its on line
    Code:
    tallest.className = 'cc_tallest' + ((tallest.className == '') ? '' : ' ' + tallest.className);
    which I assume is where the actually fix is applied dynamically, but it didn't throw errors on the other lines anymore so maybe this is the last hurrah?

    *edit*

    nm... with those changes it doesn't work in any browsers now.

    And yes, Opera is identifying as Opera.

  5. #5
    SitePoint Enthusiast jeffbax's Avatar
    Join Date
    Jun 2003
    Location
    New Jersey
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh Logic, I tried just your first fix cause thats where the bug started, and it works


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
  •