Make entire box clickable

Questions about XML that are not covered by the other forums should go here.
jonathanm
Posts: 24
Joined: Tue May 25, 2021 4:17 pm

Make entire box clickable

Post by jonathanm »

How can I make the entire box clickable? Currently, only the words are clickable.
image.png
image.png (123.33 KiB) Viewed 303 times
cosmin_andrei
Posts: 109
Joined: Mon Jun 12, 2017 10:50 am

Re: Make entire box clickable

Post 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
Regards,
Cosmin
--
Cosmin Andrei
oXygen XML Editor and Author Support
jonathanm
Posts: 24
Joined: Tue May 25, 2021 4:17 pm

Re: Make entire box clickable

Post 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?
Costin
Posts: 803
Joined: Mon Dec 05, 2011 6:04 pm

Re: Make entire box clickable

Post 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
Costin Sandoi
oXygen XML Editor and Author Support
jonathanm
Posts: 24
Joined: Tue May 25, 2021 4:17 pm

Re: Make entire box clickable

Post 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 (22.95 KiB) Viewed 237 times
image.png
image.png (85.39 KiB) Viewed 237 times
Costin
Posts: 803
Joined: Mon Dec 05, 2011 6:04 pm

Re: Make entire box clickable

Post 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
Costin Sandoi
oXygen XML Editor and Author Support
jonathanm
Posts: 24
Joined: Tue May 25, 2021 4:17 pm

Re: Make entire box clickable

Post by jonathanm »

Hi Costin,

I added the placeholder and it worked. Thanks!
Post Reply