By incorporating a link that leads to a new webpage or initiates a download, a font awesome icon is automatically included using a combination of JQuery and CSS through the ::after pseudo-element. Additionally, a tooltip appears when hovering over the link, informing users whether it opens a new webpage or triggers a file download.
This functionality was working flawlessly. However, upon adding a link with role="button" like
<a type="button" href="https://twitter.com/" class="btn-floating"><i class="fab fa-twitter"></i></a>Upon removal of the link with role="button," all other links rendered as expected once again.
Upon inspecting the page, an error message appeared: Uncaught TypeError: $(...).attr(...) is undefined
https://i.sstatic.net/kOkQ0.png
Specifically, the script highlighted the following line: return
$(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|xlxs|epub|odt|odp|ods|txt|rtf)$/i);However, after implementing relevant code in the code snippet, everything seemed to be functioning fine (at least for now)!
I seem to have hit a roadblock. Can anyone shed some light on this issue?
Best regards,
/** Icons JavaScript **/
/** Add new-window and download classes automatically to links **/
$('a[target=_blank]').addClass('new-window');
$("a").filter(function () {
return $(this).attr("href").match(/\.(pdf|doc|docx|
ppt|pptx|xls|xlxs|epub|odt|odp|ods|txt|rtf)$/i);
}).addClass('download');
/** Links JavaScript **/
/* Check for links in document */
var links = document.querySelectorAll("a");
/* Create index for download links unique id*/
var downloadIndex = 0;
/* Create index for new window links unique id*/
var newWindowIndex = 0;
/* Check links on page */
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
/* Creating a span to wrap the screen-reader text */
var srTxtWrapper = document.createElement("span");
/* Add class .sr-only to screen-reader span */
srTxtWrapper.classList.add("sr-only");
if (links[linkIndex].classList.contains("download")) {
/* Add download attribute */
links[linkIndex].setAttribute("download", "");
/* Add unique id to download link */
links[linkIndex].setAttribute("id", "download-file-" + downloadIndex);
/* Add title attribute saying download file */
links[linkIndex].setAttribute("title", "download bestand");
/* Add data-toggle tooltip data attribute */
links[linkIndex].setAttribute("data-toggle", "tooltip");
/* Creating the screen-reader text */
var srTxt = document.createTextNode("(deze link downloadt een bestand)");
/* Adding the screen-reader text to the span*/
srTxtWrapper.appendChild(srTxt);
links[linkIndex].appendChild(srTxtWrapper);
/* Increase downloadIndex by one for next download link */
downloadIndex++;
}
else if (links[linkIndex].classList.contains("new-window")) {
/* Add target _blank attribute for link to open in new window */
links[linkIndex].setAttribute("target", "_blank");
/* Add unique id to new window link */
links[linkIndex].setAttribute("id", "new-window" + newWindowIndex);
/* Add title attribute saying link opens in new window */
links[linkIndex].setAttribute("title", "open in nieuw venster/tab");
/* Add data-toggle tooltip data attribute */
links[linkIndex].setAttribute("data-toggle", "tooltip");
/* Creating the screen-reader text */
var srTxt = document.createTextNode("(deze link opent in een nieuw venster/tab)");
/* Adding the screen-reader text to the span*/
srTxtWrapper.appendChild(srTxt);
links[linkIndex].appendChild(srTxtWrapper);
/* Increase newWindowIndex by one for next newWindow link */
newWindowIndex++;
}
}/* Font Awesome icons for new-window and download classes links (not in button links) */
a.new-window:not(.button)::after,
a.download:not(.button)::after {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 0.35rem
}
a.new-window:not(.button)::after {
content: "\f08e"
}
a.download:not(.button)::after {
content: "\f019"
}
/* button floating */
.btn-floating {
position: relative;
z-index: 1;
display: inline-block;
padding: 0;
margin: 10px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 47px;
height: 47px
}
.btn-floating i {
font-size: 1.25rem;
line-height: 47px
}
.btn-floating i {
display: inline-block;
width: inherit;
color: #fff;
text-align: center
}
.btn-floating:hover {
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.btn-floating:before {<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c58425f425d">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<p>Link that opens a webpage in new window/tab: <a href="https://www.d2l.com/" target="_blank" class="new-window"
rel="noreferrer noopener">D2L
Homepage</a></p>
<hr>
<p>Link that opens as PDF download: <a
href="https://www.d2l.com/wp-content/uploads/2022/03/Video-transcript.pdf" download target="_blank" class="download"
rel="noreferrer noopener">Transcript of Inclusive Learning with D2L Brightspace (PDF)</a></p>
<hr>
<a type="button" href="https://twitter.com/" class="btn-floating"><i class="fab fa-twitter" style="color: blue"></i></a>