MadCap Software Forums

Hi, has anyone had wonky hyperlink behavior in HTML output?
By that I mean that you need to click the linked object right in the middle of the linked object; clicking to the right or left does not work.



I've put these object in a div - could this perhaps have something to do with it?

<div class="two-tiles-3-3">
<div>
<h4 class="Heading4" style="text-align: center;"><a target="blank_1" href="Analysis/235_Analysis API.html">Analysis APIs</a>
</h4>
</div>
<div>
<h4 class="Heading4" style="text-align: center;"><a target="blank_2" href="GIS/235_GIS API.html">GIS APIs</a>
</h4>
</div>
</div>

This is working as expected. The link is on the text part within the DIV, so only the text will take you to your destination. Your DIV looks rather like a button but can't act like one because the link isn't on the DIV. Quite a lot of websites work the same way, which annoys me until I realise I have to click the text.

You'll find that text links always work that way. Whitespace belongs to no one

You can "own" it via CSS, though, and then they'll work the way you want them too work.

Add this CSS:

<div class="Your-div">
<a href="http://harveysquatlowllc.com" class="hidden-link">Your Link Text</a>
</div>

.Your-div {
position: relative; /* Required for the absolute positioning of the child link */
cursor: pointer; /* Changes the cursor to a hand, indicating a clickable area */
}

.Your-div .hidden-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* Makes the link invisible */
z-index: 1; /* Ensures the link is above other content in the div */
}

Add this to the bottom of the topics Template page just above the </body> tag:

(If you're already including jquery at the project level you don't need it again.)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
$('.clickable-div').click(function() {
window.location = $(this).find('.hidden-link').attr('href');
});
});
</script>