I'm looping through a set of anchor tags and want to set a custom content tooltip that you can click into for each anchor.
However, just adding a simple text to each anchor tooltip content is not showing up at all. What am I doing wrong?
// attch is an array of anchor links
c$.each(attch, (i, a) => {
c$(a).tooltip({
content: "test"
});
});
Fixed it. Just need to add the anchor to the items attr of the tooltip.
Related
Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.
First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})
How to disable Anchor(a ) tag on pageload or (by default disable) and enable it using jquery or Javascript??
You can change href attribute to data-href and add href attribute using:
$(function() {
$('[data-href]').each(function() {
var self = $(this);
self.attr('href', self.data('href'));
});
});
this will iterate over all elements that have data-href and add href attribute.
Since you need to disable the anchor tags by default, you can add a class to each tag and remove the calss using javascript.
.not-active {
pointer-events: none; // disables all the clicks
cursor: default; // shows the default cursor when you hover it instead of hand
}
Also you can change the font color and others so that the text does not appear like a link.
[EDIT]
<script>
var anchorElements=document.getElementsByTagName("a"); //Gives the list of all anchor tag elements in the page as an array.
for(i=0;i<anchorElements.length;i++) // Iterate over the array
anchorElements[i].classList.remove("not-active"); // for each element .classList returns the list of classes specified. remove() is an array function to remove an element in the array
</script>
If you are using jQuery you can use removeClass() jQuery function
$("a").removeClass("not-active");
To answer your comment ("How can I Remove calss using javascript ?? plz help") on removing class, there is a property called classList that contains its class attributes. This property provides methods that make it easy to add or remove a class. Something like:
var myItemClasses= document.getElementById("item").classList;
myItemClasses.remove("my-classname"); // to remove
myItemClasses.add("my-classname"); // to add
Hope this helps.
I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
I am cloning a div (with an h3, a paragraph, and a clickable tag line) on the click of the tag line and appending the div to my sidebar. There is several divs with this same structure and when a div has already been cloned I want to make sure that that div is not cloned a second time. To accomplish this I am trying to match the H3 text of the div whose tag line was clicked with the H3 text of divs that have already been cloned. If there is a match, I pop up an alert message and don't append the cloned div to the side bar.
Here is the code i have:
$(this).click(function(){ // where $(this) is the tag line
var clone = $(this).parents('.full_result').clone(); // on the click of the tag line, find the parent whose class is .full_result and clones it (.full_result is the class of all divs)
var jobsH3 = $(this).parents('.full_result').find('h3').text(); // returns the text of the H3 that is contained in the same div as the clicked tag line
var middleColumnInnerDiv=$('#middle_column').find('.full_result').find('h3').text(); // returns the text of all h3 whose divs have been cloned to the side bar(sidebar id= #middle_column)
//below is where the magic should happen, but i cannot make it work. Tried several selectors and methods. The :contains is but one of them.
$(this).parents('.full_result').find('h3').each(function(){
if('middleColumnInnerDiv:contains(jobsH3)'){ // this line is giving me a headache
alert('You already saved this information');
} else {
clone.appendTo('#middle_column').hide().fadeIn(750);
}
});
};
Any help is much appreciated!
you are missing $ Jquery notation. try this $("middleColumnInnerDiv:contains('.jobsH3')")
I need some help in adding a tabindex to all the elements in a <div> dynamically. I need to do this for accessibility. If I specify a <div> element, it should automatically add the tabindex to all elements in that <div>.
I tried some thing like this:
$('#Latest-News-Content [tabindex]').each(function () {
$(this).attr( 'tabindex', parseInt( $(this).attr('tabindex') ) + 10 )
});
but it doesn't seem to work. Also, how can I add a tab index for elements which are hidden?
For example:
I have a title and description showing in a <div>. The description is hidden and has a jQuery collapser. When I click on the title the description expands. How can I set a tabindex for all the elements?
Here an example that adds tabindex for all a tags
$('#Latest-News-Content a').each(function(index) {
$(this).attr('tabindex', index)
});
Demo: http://jsfiddle.net/azk2n/1
You can use the same method for hidden elements.
#Sotiris
This might be an update with newer versions of jQuery. Use .prop() instead of .attr() to set property values.
$('#Latest-News-Content a').each(function(index) {
$(this).prop('tabindex', index)
});