Page 1 of 1

Make entire box clickable

Posted: Mon Dec 05, 2022 9:54 pm
by jonathanm
How can I make the entire box clickable? Currently, only the words are clickable.
image.png

Re: Make entire box clickable

Posted: Tue Dec 06, 2022 2:12 pm
by cosmin_andrei
Hi jonathanm,
The default implementation is based on the following action - when you click on the text/word to open the respective chapter. In order to make the entire box clickable, you can find more details here:
https://github.com/oxygenxml/oxygen-pub ... k-on-tiles

Re: Make entire box clickable

Posted: Thu Dec 08, 2022 11:58 pm
by jonathanm
hi - I added .css information and it worked as far as making it clickable.

Where do I add the href or filename, so it knows to go to the correct topic?

Re: Make entire box clickable

Posted: Fri Dec 09, 2022 1:19 pm
by Costin
Hi Jonathan,

Please note that the "Click on Tiles" customization includes also an HTML fragment which should be added in your publishing template.
Please make sure that you follow the instructions from the WebHelp User-Guide to add the fragment into the template.
After you've added both the HTML fragment and the CSS customization, then you should publish the output using the custom publishing template you created.

Regards,
Costin

Re: Make entire box clickable

Posted: Fri Dec 09, 2022 5:18 pm
by jonathanm
I'm getting a red error line using the HTML fragment you provided:
<script type="text/javascript">
<!--
const list = document.querySelectorAll('.wh_tile');
Array.prototype.forEach.call(list, function (tile) {
tile.addEventListener('click', event => {
tile.querySelector('a').click();
});
});
-->
</script>
image.png
image.png

Re: Make entire box clickable

Posted: Mon Dec 12, 2022 12:43 pm
by Costin
Hi,

Please note that is not necessary for the fragment to be a valid HTML.
All that matters is that the fragment should be a well-formed XML, as also mentioned in the How to Insert HTML Content topic from our User-Guide.

Also, at line 15, in the template's description you did not specify any placeholder.
You should look into the HTML Fragment Extension Points user-guide topic to identify the correct placeholder you could use.

Regards,
Costin

Re: Make entire box clickable

Posted: Tue Dec 13, 2022 7:22 pm
by jonathanm
Hi Costin,

I added the placeholder and it worked. Thanks!