WebHelp tile - image hyperlink

ann.jensen
Posts: 228
Joined: Wed Jun 17, 2015 10:19 am

WebHelp tile - image hyperlink

Post by ann.jensen » Wed Jun 14, 2017 11:12 am

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: 87
Joined: Wed Feb 09, 2005 8:57 am

Re: WebHelp tile - image hyperlink

Post by HomeGoods » Wed Jun 14, 2017 4:39 pm

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

bogdan_cercelaru
Posts: 208
Joined: Tue Jul 01, 2014 11:48 am

Re: WebHelp tile - image hyperlink

Post by bogdan_cercelaru » Thu Jun 15, 2017 3:36 pm

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: 228
Joined: Wed Jun 17, 2015 10:19 am

Re: WebHelp tile - image hyperlink

Post by ann.jensen » Thu Jun 22, 2017 4:25 pm

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: 105
Joined: Tue Mar 06, 2018 1:34 am

Re: WebHelp tile - image hyperlink

Post by mdslup » Fri Jun 08, 2018 2:48 am

This worked for me too! Thanks.

Post Reply