Why is my Jquery Tooltip not working? - javascript

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).

Related

GTM Element visibility trigger isn't firing at all

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?

d3.js Hierarchical Edge Bundling node color change on click

I am new to d3.js, and I am trying to modify the Hierarchical Edge Bundling from this link: https://bl.ocks.org/mbostock/7607999.
I have removed the links being displayed on hover, and put the on click instead. I would like to do the same with the node that I click on (highlight it). I have removed the hover event for the node. here is a fiddle of what I have so far https://fiddle.jshell.net/vdmn2oj4/.
How can I do this?
When it was on hover, we could just use the "hover" attribute in the css style, but there is no such thing with a click (only focus for links and textfields).
I have tried to change the data and make them links instead (so I could use focus in css):
<a href='#' onclick='return true;'>data</a>
but of course that didn't work (let me know if you can do that somehow though).
and using an attribute for links like so:
.attr({"xlink:href": "#"})
doesn't work either because I cannot change its style on focus with css (or I don't know how, but that might solve my problem if I could).
I have also tried manipulating the nodes, but so far, I have only been able to change all the nodes, the sources and the targets, but not the one I click on.
I also know that there is a "parent" attribute to nodes, which might be the ones I want, but I haven't found out how to use that either.
Any solution, even partial would be welcome, as I have spend a lot of time on this already.
Add this inside your function mouseclick:
d3.select(".node--clicked")
.classed("node--clicked", false);//removes the class of previously clicked nodes
var clicked = d3.select(this);//select the clicked element
clicked.classed("node--clicked", true);//set the class
Here is your updated fiddle: https://fiddle.jshell.net/vdmn2oj4/3/

Switch <li> active element

Here is a link for a fiddle project I am working on right now. What I am trying to do is to switch active menu element depending on what section is displayed right now on screen. So if it is Kontakti on screen, then Kontakti in menu (<!--NAV BAR-->) has to display as active item. I am not familiar with jS
Add data-role=navigate attribute to ul element where navigation is housed,
In the javascript section of this fiddle,
please try with the following code,
$(function()
{
$("[data-role=navigate]").find("li > a").click(function()
{
$(this).parents("ul").find("li.active").removeClass("active");
$(this).parent().addClass("active");
})
})
I will explain in brief what the code does...
1) Binds a click event handler to <a> inside <li> which is inside <ul> with attribute data-role=navigate
2) When the click happens, it removes the active class for the current element.
3) Assigns the active class to the immediate parent of the <a>
It is a good practice to target specific needs in JS by placing attribute in the DOM elements and hooking up event listeners using that attribute.
Hope it helps!
Bootstrap's Affix might be something that could be useful in this case. It highlights what part of the page is displayed on the screen on a separate sub-navigation part of the page.
Btw, if you have Bootstrap code you can display it on Bootply quite easily. It provides Bootstrap's CSS and JavaScript files by default.
You say you're not familiar with JavaScript but you're asking for functionality that needs JavaScript. I'd recommend trying to use a plugin if it's not something you can write yourself.
Waypoints would do exactly what you're looking for:
http://imakewebthings.com/waypoints/guides/getting-started/

How do I override a (css) metaclass property using a GreaseMonkey script?

My goal here is to make a script which will remove spoiler styling from /r/avatar.
By playing around with the "inspect element" element feature of Firefox I've managed to find the code in one of the CSS sheets which makes spoilered titles transparent. It looks like this
html:not([lang="ns"]) .thing.over18 a.title{
opacity:0.0
}
I've been searching for a way to override this attribute from greasemonkey, but I'm not sure how. I'm new to javascript: I've been trying to make use of
document.getElementsByClassName('.thing.over18')
to try and grab the elements with the (meta?)class attached to them, but no matter how I play with the class name I cant get it to select the right elements (I have an inkling that I'm not using the right function now).
There was actually a script on userscripts.org which did something similar (unspoiler /r/pokemon), but it seems that userscripts has been down so I cant look at its source.
There is no such thing as a "metaclass" in CSS or HTML. .thing is a class selector. .over18 is another class selector. You just have two class selectors.
getElementsByClassName only accepts a single class name.
document.getElementsByClassName('thing')
document.getElementsByClassName('over18')
If you want to use a selector, then use querySelector (for a single element) or querySelectorAll (for a NodeList).
document.querySelectorAll(".thing.over18");

Hide A element with CSS or Javascript

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!

Categories

Resources