Develop Reference

Google Tag Manager wont fire if I click on the Copy / Text of the Button

My google tag manager wont fire when I click on the copy of the CTA Button. But it fires when I click the CTA Button area around the copy.
If I click "Talk to us now", GTM wont fire. But if I click the orange area, GTM will fire
GTM Trigger: Click All Elements - Click URL - Equals - https://annotationlabs.com/contact-us/
I
I am using Elementor to edit my wordpress website if that helps. Not sure what the error is.
My Website Code is below:
<a href="https://annotationlabs.com/contact-us/" class="elementor-button-link elementor-button elementor-size-sm elementor-animation-bob" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-right">
<i aria-hidden="true" class=" stm-right-arrow"></i> </span>
<span class="elementor-button-text">Talk to us now</span>
</span>
</a>
Additionally "_event" comes as "gtm.js" which isnt same as "gtm.click"
Will be really helpful if someone can help me with the fix?

CSS Onclick Close (display none) Not Working, Responsive Design

I'm following the w3 tutorials and exploring a responsive design template here (see source code for details): https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm
I'd like to edit the sidebar so that a close button is always displayed, and close the sidebar when clicked. Under it's current design, this only works for the mid-size and small windows.
I tried revising the code to remove the hidden class (so it's always displayed). However, the function does not close the sidebar when clicked:
From:
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
To:
<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
I'm missing something very elementary here. But I've fiddled with this long enough I'd like to get pointed in the right direction. The code is right, I'm guessing this may be a DOM or bubbling issue, or basic design edit? Thanks!

There appears to be an !important media query CSS rule that's probably blocking your styling from having effect:
#media (min-width: 993px)
.w3-sidebar.w3-collapse {
display: block!important;
}
I did a document.querySelector("#mySidebar").style.display = "none" and it had no effect. You could remove that !important rule or otherwise work around it...

Hide side navbar's <hr> element on adding active class to <a>

i have a side navbar in which each anchor tag has a separate <hr>. I am adding a active class when user clicks on a link, which I have done successfully. But I want to hide the <hr> of the anchor tag that has the active class. The problem is once I hide the hr on active class I can't show it back when another <a> is active.
Menu
<i class="fas fa-home"></i>&nbsp&nbsp <strong>Home</strong><hr>
<i class="fas fa-chart-bar"></i>&nbsp&nbsp <strong>Report</strong><hr>
<i class="fas fa-money-bill-alt"></i>&nbsp <strong>Transaction</strong><hr>
<i class="fas fa-address-book"></i>&nbsp&nbsp <strong>Account Master</strong><hr>
<i class="fas fa-key"></i></i>&nbsp&nbsp <strong>Change Password</strong><hr>
<i class="fas fa-cogs"></i></i>&nbsp&nbsp <strong>Financial Year</strong><hr>
<i class="fas fa-sign-out-alt"></i></i>&nbsp&nbsp <strong>Logout</strong><hr>
jquery is:
$(this).addClass("menuActive").siblings().removeClass("menuActive");
$(this).find("hr").hide().siblings().find("hr").show();
As I have shown in the image when I click other <a> the <hr> of Report remains hidden.

This would be easier with a CSS rule:
a.menuActive hr {display:none}
Now all you need to manipulate in javascript is the menuActive class; the hr will appear and disappear on its own.
$(this).addClass("menuActive").siblings().removeClass("menuActive");

Try display:none and display:block instead of show and hide like this:
$("#id").css("display", "none");
$("#id").css("display", "block");

How to attach NGBootstrap tooltip to font awesome icon

Trying to add a tooltip to a font awesome icon in an Angular page. The normal Bootstrap method seems to be ignored so I am trying to use the NGBootstrap method used for adding a tooltip to buttons, but the tool tip never displays. https://ng-bootstrap.github.io/#/components/tooltip/examples
The typical Bootstrap method causes an error of Cannot set property 'title' of undefined when hovering.
<i class="fa fa-info-circle" data-toggle="tooltip" title="Name here"></i>
In the component:
ngafterviewinit() {
$(function() {
$('[data-toggle="tooltip"]').tooltip();
}
};

You can also try using button tag.
<div class="infoCSSClass">
<button class="icon-info" data-container="body" ngbTooltip="Here is tooltip text" #toolTip="ngbTooltip" (click)="toolTip.open()" placement="top"></button>
</div>

This seems to work:
<i id="icon" class="fa fa-1x fa-info-circle" [ngClass]="icon" aria-hidden="true" placement="right" ngbTooltip="tipContent"></i>

Fully clickable Ajax-Button with RichFaces and Bootstrap

I'm trying to have a fully-clickable span or Button with a Bootstrap refresh glyph-icon. With the code I've inherited, the icon itself is clickable, but the area between icon and button border isn't, i.e., it feels to the user as if clicking on the edge of the button doesn't work.
Here is the current code:
<span class="btn btn-default btn-xs" style="background-color: transparent;">
<h:commandLink id="refresh" style="height:25px">
<span class="glyphicon glyphicon-refresh"></span>
<a4j:ajax render="richTable cnt_label scroller"
execute="richTable cnt_label scroller" event="click" immediate="true"
oncomplete="richTableRerenderCompleted('refresh')"/>
</h:commandLink>
</span>
I've tryed replacing the outer span with a <button> and that seemed to do the trick, but it warps the table in a funny way while refreshing.
Using a RichFaces commandButton or commandLink directly made everything worse.
Any ideas?

Since the icon is just a letter you can create a button and put the icon in the label.
If you inspect the span you should see something like this:
<span …>
::before
</span>
Then check the CSS for ::before and you should see:
.glyphicon-refresh:before {
content: "\e031";
}
e031 is the number of letter, you can convert it to an HTML entity and do this:
<h:commandButton value="" styleClass="btn btn-default btn-xs glyphicon">