I'm want to track in Google Analytics clicks into internal links on my page using events in GTM.
I'm debugging my tag in GTM Debugger and it shows me that, there's a problem with my trigger rule.
The rule is:
Click classes -> Matches CSS selector -> .cb-feature-1 .cb-l .cb-grid-entry
Here's hierarchy:
As you can see, there are three links inside div with class .cb-feature-1 .cb-l .cb-grid-entry but all of them are the same so I just want to track all of them together.
Currently your selector looks like this:
.cb-feature-1 .cb-l .cb-grid-entry
which means it is looking for three nested elements:
<div class="cb-feature-1">
<div class="cb-1">
<div class="cb-grid-entry>
... (rest of code)
However this is not what your markup looks like, you want to target a single element with three classes. For this you have to remove the whitespace between the elements of your selector:
.cb-feature-1.cb-l.cb-grid-entry
This will look for elements that have all three classes at once. Since you want to target links within those elements you need to look for an anchor tag:
.cb-feature-1.cb-l.cb-grid-entry a
Choose "Click Element" instead of "Click Classes".
Related
I'd like to implement a listbox widget using the current web components specs. Moreover, the resulting listbox should conform to the ARIA standard. Instantiating the listbox widget should be as simple as:
<x-listbox>
<x-option>Option 1</x-option>
<x-option>Option 2</x-option>
</x-listbox>
For purposes of cleanliness and encapsulation, everything else should be rendered in shadow dom. To implement this widget, two custom elements, <x-listbox> and <x-option> are registered. The top-level element of the shadow dom of <x-listbox> is a <div> that carries the role=listbox and the aria-activedescendent attributes for accessibility (I don't want these attributes on the <x-listbox> element because they are implementation details.)
In order for aria-activedescendent to work, one needs ids on the option elements. Putting ids directly on the <x-option> elements won't work out of two reasons: Firstly, it would pollute the id namespace of the document that uses the listbox widget. Secondly and even more importantly, ids do not work across shadow boundaries (which is one purpose of the shadow dom), so the ids of the options have to live in the same shadow dom as the <div> with the aria-activedescendent attribute.
A solution for this would be to surround each <x-option> that is rendered as content inside the shadow dom of <x-listbox> with another <div> (belonging to that shadow dom), on which an id can be put.
My question is: Is this the right way to go and how to implement this using the custom element and shadow dom web apis?
Your probably should better implement this by creating an select element (using JavaScript). This should ensure screen readers recognize this correctly as an input for selecting a value/values from a list.
Add an select element like this below your <x-listbox> element:
<select class="only-screenreader">
<option>Option 1</option>
<option>Option 2</option>
</select>
Then add aria-hidden="true" to your custom <x-listbox> element.
Finally apply CSS to make the screenreader select element invisible.
.only-screenreader {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
That's my approach but maybe there's a better one.
In the markup provided, x-option is in the light DOM, not the shadow DOM, so it can be referred to by id. To avoid polluting the id namespace, I generate a random id, which is set when the component loads but can be replaced. This way I can refer to the element by id whether or not the component user has set an id on it.
Wrapping each option in a div seems unnecessary and likely to cause issues. Also, if the options are in a <slot />, it's simply not possible.
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
Normally CSS is my thing, but I'm somehow dumbfounded why this isn't working for me. I'm building a site through Cargo for CMS purposes and you can see it here: http://cargocollective.com/mikeballard
In my menu, I have five main categories, and clicking on them (images, for example) reveals the list of work under that category.
<div id="menu_2444167" class="link_link">
<a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>
Basically, I'm trying to select the last div in this set, and add a margin-bottom:15px to that div. I've tried using:
.project_link:last-child or .project_link:last-of-type but it doesn't seem to be working.
The HTML, which can't be altered too much to rely on Cargo, isn't great as if they had used list items, instead of divs with anchor tags I'm assuming this would be a lot easier.
The :last-of-type and :last-child selectors are not supported before IE9.
Class names, etc are not looked at when it comes to the :last-child and :last-of-type selectors. The .project_link:last-child selector will only trigger if the specific element is the last child in the parent element and has the class "project_link", and the .project_link:last-of-type selector will only trigger if the specific element is the last element of that type and has the class "project_link".
Both should trigger in a supporting browser, since it is implied as *.project_link:last-of-type and will check for every type of element inside that parent (which appears to only be divisions anyways). The last division shown here has the class "project_link" which would match this rule. The only reason these wouldn't trigger is if you had extra elements (or divisions) below what you're showing us, or you're using a browser which doesn't support it.
I have a tooltip that has a link to an anchor but it seems like it is not going to the right anchor. Rollover the person and click on the "[+]" inside the tooltip.
To view the sample click here
It's because of this:
<a id="david" ...>
on the links. That's the first match for a #david URL - that will match either an id or a name. The <a name=... anchors lower down the document are being ignored.
You need to rename either the ids or the names, so that there's only one element with an id of david, or one anchor with a name of david.
There are two anchors with the same identifier.
The first using the modern approach:
<a id="laurence" title="Laurence Rabino - Web Multimedia">Laurence Rabino</a>
and the second using the Netscape 4 compatible approach (which, for some reason, is contentless):
<a name="laurence"></a>
The browser scrolls to the first one.
Change the identifiers so they don't conflict.
The problem is that you have all of your id's defined for the div's that contain everyone's picture. For example:
<a id="laurence">Laurence Rabino</a>
You need to move the ID's down to their appropriate locations in the "summary" section, so that when you click on one it links to that person's information. For example:
<p id="laurence">
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.