Expand clickable area of Webhelp tile

steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Expand clickable area of Webhelp tile

Post by steinbacherGE » Tue Nov 03, 2020 12:52 am

Is there a way to expand the clickable area of a webhelp tile? For usability, it would be nice if the whole tile (green) was clickable and not just the title text (red).

tile.png
tile.png (10.54 KiB) Viewed 431 times
I found this answer here, but the values don't match the entire tile area.

How to increase the clickable area of a <a> tag button?
https://stackoverflow.com/questions/110 ... tag-button

Code: Select all

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
Is there a way to make this work so that the entire tile area is clickable? Can this also take into account the responsive sizing of the tile?

alin
Site Admin
Posts: 201
Joined: Thu Dec 24, 2009 11:21 am

Re: Expand clickable area of Webhelp tile

Post by alin » Wed Nov 04, 2020 12:05 pm

Hello,

You can achieve this behavior by contributing a custom JavaScript that registers a 'click' event handler on each tile that opens the associated link.
The procedure is described in our User Manual:https://www.oxygenxml.com/doc/versions/ ... -html.html
The JS snippet may look like the one below:

Code: Select all

    const list = document.querySelectorAll('.wh_tile');
    Array.prototype.forEach.call(list, function (tile) {
        tile.addEventListener('click', event => {
            tile.querySelector('a').click();
        });
    });
I have created a sample Publishing Template containing the above customization. It is available here: https://github.com/oxygenxml/oxygen-pub ... k-on-tiles

Rgeards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: Expand clickable area of Webhelp tile

Post by steinbacherGE » Mon Dec 07, 2020 8:32 pm

Thanks for the sample publishing template. It works great!

:D

Post Reply