Page 1 of 1
WebHelp tile - image hyperlink
Posted: Wed Jun 14, 2017 11:12 am
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
Re: WebHelp tile - image hyperlink
Posted: Wed Jun 14, 2017 4:39 pm
by HomeGoods
I second that.
Currently I have to override the components expander, which is not fun to maintain.
Re: WebHelp tile - image hyperlink
Posted: Thu Jun 15, 2017 3:36 pm
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
Re: WebHelp tile - image hyperlink
Posted: Thu Jun 22, 2017 4:25 pm
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
Re: WebHelp tile - image hyperlink
Posted: Fri Jun 08, 2018 2:48 am
by mdslup
This worked for me too! Thanks.