Adding an ID to a heading

Discussions about Help+Manual 9

Moderators: Alexander Halser, Tim Green

Post Reply
Marc
Posts: 53
Joined: Mon Dec 18, 2006 1:47 pm
Location: Germany
Contact:

Adding an ID to a heading

Unread post by Marc »

To be able to use a particular JavaScript library, I need to add IDs to heading elements. The result in the HTML code of the page should be something like this:

<h2 id="myidvalue">Hello world</h2>

When I add the ID in the XLM editor, Help+Manual removes it when saving the file.

Is there any way or place where I can add IDs like these?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Adding an ID to a heading

Unread post by Tim Green »

Hi Mark,

To do this, you need to add your h2 heading as an HTML Code Object, using the Code Object tool in Write > Insert Object. This allows you to insert any HTML in a way that will export it directly to HTML without changes. There are a couple of points you need to bear in mind when doing this:
  1. Check the HTML in your published WebHelp and copy that. Things like style references will be different in the generated HTML than in the source XML, and there will be nested h1 and span tags for the paragraph and text settings.
  2. Make sure the option to not enclose the code a block element is activated in the Code Object tool.
  3. Code objects are only exported to HTML. If you are also publishing to PDF or Word, make sure you use conditional code tags to include alternative versions for those formats.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
michal_novomesky
Posts: 51
Joined: Thu Jan 12, 2012 2:21 pm
Contact:

Re: Adding an ID to a heading

Unread post by michal_novomesky »

We use a dynamic approach, i.e. a custom javascript code to add unique ID based on heading title (if title in different heading is the same, add -2, etc.).
As well as a copy icon showed on hover for each heading element.

jQuery part of the code:

Code: Select all

	$("#topicText h2, #topicText h3").each(function() {
		slugString = slug($(this).text());
		if (slugsDefined.includes(slugString)) { // avoid duplicit slugs
			var slugIncrement = 2;
			while (slugsDefined.includes(slugString+'-'+slugIncrement))
				slugIncrement++;
			slugString = slugString+'-'+slugIncrement;
		}
		slugsDefined.push(slugString);
		$(this).first("span.f_Heading2, span.f_Heading3").addClass("anchorHeading").attr("name", "s-"+slugString).attr("id", "s-"+slugString);
		$(this).append('<a href="'+filename+'#s-'+slugString+'" class="anchorURL"></a>');
	});
Post Reply