I want to capture all click events on the menu of my page.
I've setup a tag that will capture all click events on my page. It works with the trigger setup to "Click - All elements".
When I set up the trigger to specifically register only the clicks on elements of the menu var, nothing is detected. So, definetly, I'm doing somenthing wrong within the trigger.
EDIT 1:
this is the web page: www.chazki.com
Menu code:
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="new_service">Solicita un Chazki</a>
</li>
<li>
Faq
</li>
<li>
<p class="new_service new-service" style=" padding: 6px;"><a>Login</a></p>
</li>
<li>
<a class="btn btn-default btn-lg location_ac"><i class="fa fa-fw fa-spin fa-star"></i>Lima</a>
</li>
</ul>
<form>
<fieldset class="navbar-form navbar-left">
<input type="text" name="track-code" id="track-code" class="form-control" placeholder="Código de tracking?">
<button id="track-find-button" class="btn btn-default" type="button">Buscar</button>
</fieldset>
</form>
</div>
Try 1 on trigger:
Element ID: It's supposed to limit the clicks registered for only the div containing the menu.
I get this error in debugging mode:
Try 2 on trigger:
on Click ID.
Click ID error:
#
I could also use the ul tag for the trigger, as it is the only unordered list on the page.
Any hint is welcome. Thanks!
Basically I needed to understand the different variables in GTM. I've found Simo Ahava web very helpful in this regard.
https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
Thanks to Simo, I also understood the benefits of usen "Match CSS Selector" option.
So my configuration ended like this:
Using:
Click All Elements.
This trigger fires on "Some Clicks".
"Click Element" -> "Matches CSS Selector" -> "#navbar-ex-collapse ul li a, #navbar-ex-collapse ul li p"
As I have li and a html elements, I needed to use 2 CSS selectors, separated by a comma.
Related
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
Is there a way to have multiple router-links inside a li and that li gets the active class in vue2?
I was thinking in something like this: https://jsfiddle.net/tejitak/o44z47ag/5/
<div id="app">
<ul>
<li>
<ul v-link-active>
<li>
<a v-link="{ path: '/foo' }">Go to Foo</a>
</li>
<li>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</li>
</ul>
</li>
<li>
<a v-link="{ path: '/baz' }">Go to Baz</a>
</li>
</ul>
<router-view></router-view>
</div>
It's supposed to be used in a menu which as submenus.
The migration docs only references a single link so I don't know if this is possible: https://v2.vuejs.org/v2/guide/migration-vue-router.html#v-link-active-replaced
You can use router-link like this to do that:
<ul>
<router-link tag="li" to="/foo">
<span>
<strong>
<a>/foo</a>
</strong>
</span>
</router-link>
</ul>
Here's the documentation for vue-router: http://router.vuejs.org/en/
Here's the documentation for router-link: http://router.vuejs.org/en/api/router-link.html
Here's a demo for nested router-links: https://jsfiddle.net/wx17jh2y/
<ul>
<router-link tag="li" to="/foo">
<span><a>Foo</a></span>
<ul>
<router-link tag="li" to="/bar">
<span><a>bar</a></span>
</router-link>
</ul>
</router-link>
</ul>
If you want to group multiple links underneath one element that should be considered active (e.g. using Bootstrap dropdowns), you can just make the parent element a router-link as well and prevent any interaction by setting the event attribute to an empty list. Example:
<router-link tag="li" to="/function" :event="[]">
<ul>
<router-link tag="li" to="/function/a"><a>Function A</a></router-link>
<router-link tag="li" to="/function/b"><a>Function B</a></router-link>
</ul>
</router-link>
See also the documentation on the event property on router-link.
I would not use router-link and instead bind to the href attribute on the anchor tags. If the links in the menu are static, then you may not even need to bind to the href attribute - just specify href="/foo" (at least that's how it worked in angular1). If the href needs to be generated, like if you're looping through menu items, then create the hrefs in a vue instance function and call it like :href="createHref(menuItem)" for example.
To assign the active class, I would assign the class if the href matches the current route (see https://v2.vuejs.org/v2/guide/class-and-style.html). The current route is in this.$route. Just make sure route is passed into the root app instance: https://router.vuejs.org/en/api/component-injections.html
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.
hi i have master page and menu like this
<ul id="ulhotel" runat="server">
<li class="userprof active"><a href="AddAdminDetail.aspx">
<p class="activenav">
<span class="entypo activenav">+</span>User Profile</p>
</a></li>
<li class="hoteldetails"><a href="AddHotelDetails.aspx">
<p>
<span class="entypo">j</span>Hotel Details</p>
</a></li>
<li class="hoteldirectory"><a href="AddHotelDirectory.aspx">
<p>
<span class="entypo">l</span>Hotel Directory</p>
</a></li>
<li class="appconfig"><a href="Appconfiguration.aspx">
<p>
<span class="entypo">#</span>App Configurate</p>
</a></li>
<li class="featoffers"><a href="OfferDashboard.aspx">
<p>
<span class="entypo">C</span>Offer Dashboard</p>
</a></li>
</ul>
now right now User Profile Is seleted now when i Click HotelDetail link I want to change it same as User Profile
i am trying this but its not working
$('#ulhotel li').click(function()
Thanks in advance.
You have
AddAdminDetail.aspx
AddHotelDetails.aspx
AddHotelDirectory.aspx
Appconfiguration.aspx
OfferDashboard.aspx
five different pages so you can also add active class to appropriate li tag on related page.
Comment Response
$('#ulhotel li').on('click',function(e)
and then set cookies for clicked li now when page redirected use that previously set cookies and add active class to appropriate li.
It is due to when you click link each time master page is loading.
you have to use script to change class in AddHotelDetails.aspx page to active related li.
In AddHotelDetails.aspx page you can use
$(document).ready(function(){
$('#ulhotel li').removeClass("active");
$('#ulhotel li.hoteldetails').addClass("active");
});
Hope this help you.