I'm trying to track an element (Text - Thank you) that appears after I click submit button, the Element Visibility trigger doesn't fire at all. I toggled "Observe DOM changes" on and used both ID and CSS selector.
Thank you text along with source code screenshot. There's no URL change or page load. Just the whole form input div get replaced by a text saying "Thank you"
https://i.stack.imgur.com/sGUTs.png
GTM screenshot (CSS selector)
https://i.stack.imgur.com/vH143.png
I also used other CSS selectors and also ID - formSuccessMessageWrap. Still doesn't work
The website is
https://www.hyundai.com/wallan/en/build-a-car/special-offers/special-offers
I am not familiar with Google Tag Manager, but I can see that "Thank You" is under an element with the following CSS:
display: none
The "display" property is different from the "visibility" property. It's possible that Google Tag Manager treats both the properties under the "Element Visibility" section.
Either way, the element that switches from "display: none" to "display: block" is not the one you have mentioned in the CSS Selector. Instead try using this selector:
#formSuccessMessageWrap
Hopefully this works. Let me know what's happens.
Edit: I just realized that you have already used "formSuccessMessageWrap" ID as a selector. Did you use the "#" sign before "formSuccessMessageWrap"? Also the question is what does the trigger do afterwards? How do you know it is not working? Also are any other Trigger Types available? Can you list them out?
Related
I have this element in my HTML page:
<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
<span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
<span style="display:block;font-size:1em;text-align:center">NOW ONLY</span>
<strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
<span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>
</span>
</a>
I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well.
The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.
Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.
I reported all the available HTML.
Here is an example http://subdir.co/help-center/default.aspx
It's the top banner there.
Let me know how to hide it from the page. Thanks.
Try with jQuery:
$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();
This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid.
Use:
document.getElementById('yourElementId').display=none;
You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.
If you need to do additional logic then you can access the text (e.g. price/title/url) before deciding to hide.
Use jQuery if raw javascript is to much for you.
Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.
But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.
I think something like this should do:
$('a:first').css("display","none");
You could try it with css:
a[style][href] {
display: none !important;
}
i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition.
It will be easy if you use some javascript library for dom manipulating for example jQuery.
after that you can write something like
$(".sCntSub3 > a").hide()
you can try finding element from browser console. It is easy way how to verify you choose right element
jsFiddle Classname Method DEMO
jQuery via Classname: In this method we "look inside" the anchor for clues.
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
$('.Tag_Co_RegisterPrice_TLD').closest('a').hide();
});
jsFiddle ID Method DEMO
jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
// No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
$('[id$="MasterUpdatePanel"]').next('a').hide();
});
Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel. The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!
On the twitter login page, the label for input fields arrive inside input fields that uses a common trick with javascript/jquery. However, I went through a twitter source to figure out how they are doing that. I found onChange: it adds a class 'hasome' to a parent div and has a default text as a span, which never gets a property like display:none;.
I have tried to go through their HTML/CSS/JS but could not find their methods. Can someone please tell how twitter is doing that?
Edit
Twitter code:
<div class="placeholding-input username hasome">
<input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
<span class="placeholder">Username or email</span>
</div>
Added twitter HTML in question. When we add some code, it only add one class 'hasome' in parent div. in firebug, I could not see any property assigned to class 'hassome'. My question is where is there code which is doing that or CSS if it is achieved by CSS.
While the hasome class is applied to the parent div, it's used in a selector that's setting CSS values on the child span. So in Firebug (or Chrome or IE's developer tools), you'll need to keep an eye on that child span, not the div, to see what's going on.
You should end up seeing the following rules applied, from the CSS file t1_core_logged_out.bundle.css:
.has-content .placeholder, .hasome .placeholder
{
font-size:0!important;
z-index:-1;
-moz-opacity:0;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
The part of the rule that ends up taking effect is the ".hasome .placeholder" part: when an element with style .placeholder has an ancestor with class .hasome, then various techniques are used to hide that child element. It's basically using a class on a parent to control styles of a child or descendant, which is a fairly common CSS technique.
It's just displaying an absolutely positioned span over the field, then hiding it as soon as anything is entered (and re-displaying it when the field becomes blank again). The immediate hiding is why it doesn't matter that the span obscures the field. Oddly, it doesn't look like they actually used labels, although I don't see a good reason not to have.
Even though this is not what they are doing, you can accomplish the same result by using the HTML5 attribute placeholder
Keep in mind that this is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you can definitely use this.
It's CSS.
http://a0.twimg.com/a/1347042098/t1/css/t1_core_logged_out.bundle.css has the following rule:
.hasome .placeholder{font-size:0!important;z-index:-1;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
Notice that for any .placeholder in a .hasome, its opacity is set to 0. Therefore, it doesn't show.
Not the way I would have done it, but that's how they're doing it at least.
I want to set focus on particular div using jquery or javascript. i have just use document.getElementById("pack_0").focus(); in that 'pack_0' is my div id but it doesn't work. I notice that '#' is already added in my url because of some popup coding, so my url is 'http://localhost/website/book#'
So, can any one help me for force fully focus on div when # in url?
Thanks in advance.
From the question, I think what you actually mean by "focus the div" is "change the window's vertical scroll position so the div is visible". If that is the case, you can use the following bit of jQuery code:
$(window).scrollTop($('#pack_0').offset().top);
Anthony Grist's assumption is likely correct in your case. However, it may help others searching on this topic to know that if the desired object of focus is a DIV, that DIV should have a tabindex set, e.g., tabindex="9999". Otherwise, most browsers will not assign the focus.
To set focus to div first we need to define tabindex for particular div like as below
<div class="leftbar-btn-module" tabindex="-1">'Content'</div>
And jquery to set focus
jQuery(".leftbar-btn-module").attr("tabindex",-1).focus();
I've found a couple of search results here but they're all for jQuery and the couple I looked at weren't applicable to my case.
This is a small project and I've avoided using jQuery so far. I want to keep it like that as to not need the library.
Basically, I'm dragging an <article> element to a <div> element. The div has the background-image of a closed trashbin. In the CSS it is set to display the same, but open, trashbin when :hover is triggered.
Now, when I pull my article element to the div, the :hover effect isn't being triggered.
How do I do this?
All required elements are set draggable and the needed event listeners have been added, Console.log confirms they work.
You can define a CSS class called 'open_trash' and set the background image of a open trash there and then you can use javascript to change the class of the dragged element on mousedown like this
document.getElementById("draggedItem").className = "open_trash";
You can set the class name to either an empty string or something else onmousedown.
I am not getting a tooltip to work and I think the problem is with my selector.
I had selected a plugin that is located here: http://flowplayer.org/tools/tooltip/index.html
It says that you can use the title attribute of an element as the selector. I am wanting to select menu items and attach a tooltip to each one (to describe the menu links). It seemed that the easiest way to do this is to use the title attribute. I only need to fit about 10 or less words in each tooltip. Before describing what could be the problem, let me also mention a couple things.
I have on the page a JQuery accordion too, from the jqueryui.com site. That link to the jqueryui is placed after the call to the jquery tools from http://flowplayer.org/tools/tooltip/index.html. I thought this was the jquery ui at first but jqueryui doesn't have a tooltip - though they have a dialog box that is similar but I don't need the header, just room for a few words.
So, let's see where I could have went wrong.
A) The call to the jquery tools comes before the call to the jqueryui. When that was reversed, my accordion didn't work.
B) The plugin documentation says that there is a class .tooltip which is available by default and the code also let me set the class for the tooltip to tooltip. It is definitely not getting any of the styling that I setup for the tooltip. I'm not sure how to confirm that this tooltip class exists because it only shows up when the tooltip appears.
C) My selector. At first I tried a CSS Descendant selector, just like I would in CSS. I even added a containing div with id of tooltip.
1)First selector: $('#tooltip a[title]), to get the a tags that have a title attribute. That was described in the documentation, though to me it seems like you would want to "trigger" on the anchor tag, not it's title attribute
2) Second attempt with descendant selectors $(".art-hmenu a.tt[title]") - I have inside the tag that has a class of art-hmenu an anchor tag with class tt and I want the title attribute. - didn't work.
3) lastly, I tried using ("#tooltip").find('a[title]') - thinking this would find the anchor tag with title attribute.
The documentation page says that this code will take advantage of the element's title attribute:
$("img[title]").tooltip();
That might put a tooltip on every img tag, wouldn't it? My first example above is similar in using ("#tooltip a:[title]") which doesn't work.
Maybe the title shouldn't be on the anchor tag but instead on the li tag.
I could use some help figuring this out - wherever the problem might lay, which I think is how I am making my selection.
Thanks,
Bruce
your looking for an attribute so use the $('#tooltip a').attr("title") instead.
It sounds like you are over-complicating this.
Give the link, phrase, input, button the class of "trigger" and a title. Tools will handle everything else. You can style the tooltip with a .tooltip class. You position the tooltip with the offset and position settings. If you want to get crazy with styling you can layout: or open the plugin source code and wrap html around the Append(title).