WebHelp tile - image hyperlink

Post here questions and problems related to editing and publishing DITA content.
ann.jensen
Posts: 289
Joined: Wed Jun 17, 2015 10:19 am

WebHelp tile - image hyperlink

Post by ann.jensen »

Hi,
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,
Anm
HomeGoods
Posts: 96
Joined: Wed Feb 09, 2005 8:57 am

Re: WebHelp tile - image hyperlink

Post by HomeGoods »

I second that.
Currently I have to override the components expander, which is not fun to maintain.
bogdan_cercelaru
Posts: 222
Joined: Tue Jul 01, 2014 11:48 am

Re: WebHelp tile - image hyperlink

Post by bogdan_cercelaru »

Hello,

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

<script>
//<![CDATA[
...code...
//]]>
</script>
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/

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
ann.jensen
Posts: 289
Joined: Wed Jun 17, 2015 10:19 am

Re: WebHelp tile - image hyperlink

Post by ann.jensen »

Thanks Bogdan.
The following is working for me

Code: Select all

<script>
<![CDATA[
$( '.wh_tile' ).on( 'click', function() {
var anchor = $(this).find('.wh_tile_title').find('span').find('a');
window.location = anchor.attr('href');
});
]]>
</script>
And I also updated my custom skin.css to include

Code: Select all

.wh_tile:hover{
cursor: pointer;
}
Regards,
Ann
mdslup
Posts: 167
Joined: Tue Mar 06, 2018 1:34 am

Re: WebHelp tile - image hyperlink

Post by mdslup »

This worked for me too! Thanks.
Post Reply