Removing "value" attribute from "li" elements in web output

[TheGreatAndPowerfulOz]

If anyone out there happens to utilize CSS class definitions to hide ("display: none") certain ordered list items in web output, but finds that the list numbering gets fouled up as a result, I have a little workaround I can offer up...

Background
When Flare generates WebHelp or HTML5 output, the "value" attribute is applied to all "li" elements in a given topic page, even when it's not explicitly specified in the source content. The "value" attribute has been deprecated (see http://www.w3.org/TR/html401/struct/lis ... f-value-LI), and its insertion by Flare is problematic when one or more list items in an ordered list are not displayed in web output due to CSS definitions.

Example
If the second item in an ordered list has a particular class applied that dictates display ONLY in printed output, the set of list items in web output appears as "1, 3, 4, 5, etc." (missing "2") since the Flare-inserted "value" attribute is applied to each list item.

Below is a screen shot of some sample output that reflects this bad behavior (the upper area of the image is a portion the content as seen in the web browser; the lower area of the image is the element inspector pane, which shows the Flare-inserted "value" attribute on each "li" element):

ListItems_FlareOutput.png

In this example, the "AR" class happens to be defined in the CSS as "display: none" for the screen medium, so we see that style applied in-line in the element inspector, and the list item is consequently hidden from view in the browser. Unfortunately, since the next visible list item has a hard-coded "value" of "3", our list order goes awry.

Workaround
Since the "value" attribute is not required for valid HTML (indeed, it's deprecated), I've developed a small JavaScript function that will strip it from "li" elements after any given page in my output loads in the browser. Note: I've submitted an enhancement request to MadCap to omit the "value" attribute in WebHelp and HTML5 output (fingers crossed that they'll implement the change!); in the interest of keeping the execution of JavaScript to a minimum I'd rather not have to employ such a kludge.

Here's the resulting output (hooray!):

ListItems_TweakedOutput.png

Notice that the "value" attribute is not applied to the list item elements now. As such, the list order is rendered naturally by the browser as "1, 2, 3, 4, etc." (the list item with the print-only class "AR" is not displayed, yet its absence in the rendered browser page does not affect numbering of the remaining [visible] list items).

The Code
If you output to either WebHelp or HTML5 and use straight JavaScript (not jQuery), here's the function to call after the page has loaded (of course, you can name the function anything you'd like):

Code: Select all

function removeLineItemValues() {
	// Collection of all ordered lists in document
	var myOLs = document.getElementsByTagName('ol');
	for (var w = 0; w < myOLs.length; w++) {
		// Collection of all list items in a given ordered list
		var myOLLIs = myOLs[w].getElementsByTagName('li');
		// Remove 'value' attribute
		for (var x = 0; x < myOLLIs.length; x++) {
			myOLs[w].getElementsByTagName('li')[x].removeAttribute('value');
		}
	}
}

If you output to either WebHelp or HTML5 and use jQuery (much cooler and "slicker", of course), the function is a lot simpler. It should also be executed once the document is ready:

Code: Select all

function removeLineItemValues() {
	// Remove 'value' attribute from all list items in all ordered lists
	$( 'ol > li' ).removeAttr('value');
}

Hope this can help someone else out there!

[TheGreatAndPowerfulOz]

It occurs to me that someone may ask, "Why don't you just use conditional tags to cause those particular list items to be included only in print output? This would solve the problem."

True. The use of conditional tags would make this a non-issue. I use conditional tags extensively for many things, including preventing certain content from appearing in my web output. In some cases, however, I utilize CSS classes instead. I won't bore you with the details, but it has to do with dynamic display of content based on information in our application's CSH calls to the Help.

So, in my particular case CSS is the way I need to go to display/hide certain ordered list items. Some others may also have this need (or preference), so I figured I'd share my little workaround.

As I consider the enhancement request I've already submitted on the matter, asking that the "value" attribute be omitted altogether in Flare output, I wonder if I ought to specify that it just be an "Output Option" on the "Advanced" tab of the Target Editor (there may be some folks who rely on the "value" attribute for one reason or another). The option could be called something like "Omit 'value' attribute from list items". The check box option would be cleared by default, so that the "value" attribute would be applied to "li" elements as it is today. For someone with a need like mine, the check box could be selected, which would prevent the "value" attribute from being applied to "li" elements in output.

[Thomas Tregner]

Good tip! I had to do the same thing in a similar scenario. We were using a show/hide technique I had blogged about. But we ended up adding something to strip those values out so the script would work for list items. Unfortunately number restarts are harder to do without the value attribute. But those weren't an issue for that situation.

Code: Select all

function removeLiValue(){
	var liElements = document.body.getElementsByTagName('li');
	
	for (var i = 0; i < liElements.length; i++)
	{
		liElements[i].setAttribute('value', null);
	}
}

Posts:
http://tregner.com/flare-blog/version-f ... l5-output/
http://tregner.com/flare-blog/version-f ... -toggling/