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>
Wonky hyperlink behavior
Wonky hyperlink behavior
You do not have the required permissions to view the files attached to this post.
-
- Sr. Propeller Head
- Posts: 249
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Wonky hyperlink behavior
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.
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Wonky hyperlink behavior
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>
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>
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!