getElementByClass Display:None

JavaScript
21

To be honest I don’t know what inline-block is. I used it because it was suggested elsewhere. Should I be using inline?

Regarding the link, removing that Javascript renders the “back” link useless. How does the login affect anything?

I’m confused :-/

22

The login affects this because it introduces a new element, the Edit anchor and because my code relied strictly on the structure of a non-login page it references the wrong anchor. Therefore the solution is to update this line in my JS:

	    backTo = getId('data_details').getElementsByTagName('a')[0],

To:

	    backTo = getId('back_to_list'),

And then edit the HTML for the back button to be as such:

<a href="#" id="back_to_list">&lsaquo; Back to Tank List</a>
23

Fantastic, now it works.

My heading_option is still appearing a line above “X Tanks” though. How would I fix this?

Also, what’s the difference between inline-block and inline? Why am I using inline-block?

24

Also, when I click on any row the pointer changes back to the arrow until I hover away and back to the table.

25

Hrmm couple more things.

  • My .ismore class no longer works.
  • I switched the + indicator with an image and the script no longer knows which rows have more details. How do I get it working again?
    I appreciate your help :slight_smile:
(function()
{
	var toggle=function(el, str)
	{
		if (!str)
		{
			el.style.display=(el.style.display==='') ? 'none':'';
		}
		else
		{
			el.style.display str;
		}
	},
	getId=function(id)
	{
		return document.getElementById(id)
	},
	table=getId('data_table'),
	backTo=getId('back_to_list'),
	currentlyOpen,
	getElementsByClassName=document.getElementsByClassName ? function (class_name, scope)
	{
		return (scope || document).getElementsByClassName(class_name);
	}
	: document.querySelectorAll ? function (class_name, scope)
	{
		return (scope || document).querySelectorAll("."+class_name);
	}
	: document.evaluate ? function (class_name, scope)
	{
		var n,
		r=[],
		x=document.evaluate("descendant::*[contains(concat(' ', @class, ' '), ' "+class_name+" ')]",
		scope || document, null, 5, null);
		while (n=x.iterateNext())
		{
			r.push(n);
		}
		return r;
	}
	: function (class_name, scope)
	{
		scope=scope || document;
		var nL=scope.all || scope.getElementsByTagName("*"),
		r=[];
		for (var i=0, n; n=nL[i]; ++i)
		{
			if (n.className && (' '+n.className+' ').indexOf(' '+class_name+' ') != -1)
			{
				r.push(n);
			}
		}
		return r;
	};
    if (!table || !backTo)
	{
		return;
	}
	var rows = getElementsByClassName('data', table);
    if (!rows.length)
	{
		return;
	}
	for (var i=0, l=rows.length, row; i<l; ++i)
	{
		row = rows[i];
		row.onclick=function()
		{
			var corresponding=this.id.slice(4);
			currentlyOpen = getId(corresponding);
			if (!currentlyOpen)
			{
				return false;
			}
			toggle(getId('data_table'));
			toggle(getId('data_heading_left'));
			toggle(getId('data_details'), 'block');
        	toggle(currentlyOpen, 'block');
        	return false;
		}
	}
	backTo.onclick=function()
	{
		toggle(getId('data_table'));
		toggle(getId('data_details'));
		toggle(getId('data_heading_left'));
		toggle(currentlyOpen);
		return false;
	}
})();
26

The behavior broke because the code was modified and the assignment operator was removed, resulting in a syntax error. To fix this, change

el.style.display str;

back to

el.style.display = str;

The declarations specified for .ismore are apparently being overridden because I said to update the other element’s selectors, to solve this we make the .ismore more specific like so ( in the css ):

[B]table#data_table td[/B].ismore {

inline-block and inline

An inline element is an element that appears inside of a block level and usually does not have dimensions defined:

<p><span>text</span></p>

The span inside of the paragraph is inline level, and for non-replaced elements ( <span>, <b> ) you cannot define dimensions ( though sometimes replaced elements can be given block level styles and adhere because they’re special - such as img, iframe, form controls and some other elements ). inline-block is a display mode which lets regular inline elements such as <span> be given dimensions, so you can define say a width of 50px and a height of 20px for that span and it appears inside of a paragraph along with other text, but is special. So by stating inline-block on a table you were basically telling it to pretend it was contained inside of a block level instead of its own box, limiting/restricting what declarations could be applied to it and certain behavior.

I’ll get to styling that back button or whatever is left over in a few, after these have been updated :wink:

27

Whoops on the =. Sorry about that.

I don’t understand a lot of development jargon as I’m essentially self-taught, and self-taught by hands-on experience rather than books, etc. I wasn’t sure what you meant by updating the selectors, but fixed now :slight_smile:

28

Apparently there was a rendering engine inconsistency between Firefox and Safari/Opera and so the way I styled it messed the vertical aligning in Safari. This should make it consistent, assuming this is the only page containing the .heading_option element:

.heading_option {
    float:none;
    margin:-11px 0 0;
    padding:0;
    text-align:right;
}

If you need less spacing above the top of the table, add top negative margins.

29

Thanks for all your help :slight_smile:

30

I decided to make one small change—to have the “Tank Details” heading update along with the details themselves. Unfortunately, I broke some of the code again. You can see that only the first tank will work.
http://www.myhybridcar.com/fueleconomy/view_car.php?cid=119
Sorry for all the trouble, but would you mind please providing a fix? Thanks :slight_smile: