WebHelp tile - image hyperlink

[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]

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

[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

[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]

This worked for me too! Thanks.