WebHelp tile - image hyperlink

Posts: 207

WebHelp tile - image hyperlink

Wed Jun 14, 2017 11:12 am

Is it possible to (easily) make the WebHelp tile including image, title and description all a hyperlink?
Currently only the title is a link.
Thanks in advance,
Posts: 86

Re: WebHelp tile - image hyperlink

Wed Jun 14, 2017 4:39 pm

I second that.
Currently I have to override the components expander, which is not fun to maintain.
Posts: 197

Re: WebHelp tile - image hyperlink

Thu Jun 15, 2017 3:36 pm


To achieve this you could use a custom JavaScript. A best practice is to add your custom JavaScript at the end of the HTML page. For this, you should use the "webhelp.fragment.after.body" parameter. The value of the parameter can be a path to a file that contains a well-formed XHTML fragment. File content will be:

Code: Select all

Here you can find more information regarding WebHelp Responsive customization methods: https://www.oxygenxml.com/doc/versions/ ... tomization

Probably the best approach would be to listen for click events on the entire tile and trigger this event (the click event) to title inside the clicked element.
First of all you should identify the CSS selector of the element that will be clicked (in this case a WebHelp tile). This can be done with any modern browser inspector tool. For your specific request the selector should be ".wh_tile".

To listen for a click event you could use the jQuery library, included in the WebHelp output. Here are some useful links:
- https://api.jquery.com/on/
- https://api.jquery.com/click/ - short version for .on( "click", handler )

To pass the event forward to the title element, you should use jQuery trigger method:
- http://api.jquery.com/trigger/

Please note that in order to avoid an infinite loop of the click event you need to make sure that the title element would not bubble the event to its parents.
- https://api.jquery.com/event.stopImmediatePropagation/

Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
Posts: 207

Re: WebHelp tile - image hyperlink

Thu Jun 22, 2017 4:25 pm

Thanks Bogdan.
The following is working for me

Code: Select all

   $( '.wh_tile' ).on( 'click', function() {      
      var anchor = $(this).find('.wh_tile_title').find('span').find('a');         
      window.location = anchor.attr('href');

And I also updated my custom skin.css to include

Code: Select all

   cursor: pointer;


Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 2 guests