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?
Adding an ID to a heading
Moderators: Alexander Halser, Tim Green
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Adding an ID to a heading
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:
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:
- 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.
- Make sure the option to not enclose the code a block element is activated in the Code Object tool.
- 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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 54
- Joined: Thu Jan 12, 2012 2:21 pm
- Contact:
Re: Adding an ID to a heading
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:
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>');
});