How to differentiate between multiple spans on mouseover? - javascript

I'm making a chrome extension where I need to get the email-id when I mouseover to any name i.e. of sender and receivers.
I'm getting the email-id of the sender by mouseover using the div class name:var exp = $(".acZ").find(".gD"), where 'gD' is the div class which contains emai-id.
The same is to be done for receivers, but the div of receivers has multiple span tags, each span tag for a receiver. So the issue is that I'm not able to separate the ids when I mouseover as they are all under the same div class: var exp1 = $(".xD").find(".g2"). Every receiver is under 'g2' class with span tags.
So how can I differentiate between the span tags?

In mouseover event, you can use event.target to get the reference to the DOM element on which the event is triggered.
<div class="xD">
<span class="g2" id="r1">Test1</span>
<span class="g2" id="r2">Test2</span>
<span class="g2" id="r3">Test3</span>
<span class="g2" id="r4">Test4</span>
</div>
<script language="javascript">
$(".xD").find(".g2").mouseover(function(event)
{
console.log("Concerned id " + $(event.target).attr("id"));
})
</script>
Please enable the Developer Console and see the output to verify.
Hope i was able to clarify your requirement...

Related

Insert div id into script

I have a script where clicking on a particular div (eg id=packtoa) will (amongst other things) .addclass('show') to listview items with a class which matches the id of the div clicked.
Which works great, but then I'll want the next div (id=packfhag) to do the same thing, and then the next one. So I've got the same script many times in my js with just the id & class name changed.
I'm sure there's a stupidly obvious way to automate this so that any div with an id starting with "pack" will trigger this script, pull the div id, and insert it into the script where the name of the class is called.
And I'm sure I'm close with trying to adapt this script:
$("div[id^=pack]").each(function() {
var match = this.id.match(/\w+$/)[0];
$(this).addClass('show');
});
But I just can't crack it. Either something above is wrong, or I'm inserting it into the wrong place in the script:
// Tears of Ameratsu menu functions
$(document).bind('pageinit', function() {
// When link is clicked
$('#packtoa').click(function() {
// collapse the expansions menu
$("#expansionsmenu").click();
// hide everything except this expansion
$(".hidden").removeClass('show');
$(".packtoa").addClass('show');
// clear the search, and trigger a blank search
$('input[data-type="search"]').val('');
$('input[data-type="search"]').trigger("keyup");
});
});
What am I missing?
// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");
The best option is to use class attribute, add class attribute to all those div, and then
$('.commonClass').addClass('show');
For Example :
// this is for testing
// say you click
$('#test').on('click',function(){
$('.testclass').addClass('show');
});
.testclass{
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>
<input type='button' value='Click me to view div' id='test' />

Clicking <span> element > JavaScript output document.activeElement VS. event.target

I’m newbie in JavaScript. Here’s my code below.
Upon clicking a button, I understand why event.target returns span object (because that’s the innermost element I click. correct?).
My doubt is, going by same logic why document.activeElement returns button object and not span object? Isn't it the span element that should be active when I click the button or not?!
Thanks in advance for your clarifications :=)
<!DOCTYPE html>
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement + ’-’ + event.target
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element <input id="myInput" value="input field" />
<button> <span>Sample button</span> </button>
<div id="output"></div>
</body>
This happens because document.activeElement reports the element which is currently focused (or will receive keystrokes).
Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.
Since elements like span and div can't receive keystrokes or be focused on (by tabbing to them) ordinarily, they won't ever be the activeElement. Those tags will be the activeElement only when they can receive keystrokes or be "active", such as when you've made them contenteditable or given them a tabindex.
Demo

Always select a parent element when clicking on a child

I have a div (a tab) with 3 span inside, like this:
<div class="chat-tabs">
<div class="chat-tabs-cont">
<div id="chat-tab-1" class="chat-tab chat-tab-sel">
<span class="chat-tab-n">1</span>
<span class="chat-tab-t">Tab text 1</span>
<span class="chat-tab-c">11:00</span>
</div>
<div id="chat-tab-2" class="chat-tab">
<span class="chat-tab-n">2</span>
<span class="chat-tab-t">Tab text 2</span>
<span class="chat-tab-c">11:30</span>
</div>
</div>
</div>
These are tabs, so when I click on one tab, I have a click event in Meteor to give the new tab a class of chat-tab-sel and remove this class from old tab (standard tab behaviour).
My problem is that depending where the user clicks, my event.target is not allways the parent div chat-tab, but one of child span. And I need to add/remove classes to the parent div.
I think if the parent has display: block it may work, but in this case I need it to be display: flex because it makes sense to have flexible width on childs.
So: Is it possible to ensure that the parent div is targeted when user clicks on a child?
If you use a normal Meteor event handler in combination with #Brian Shamblen's tip it should just work.
Template.myTemplate.events({
'click .chatTab': function(ev){
$(".chat-tab").removeClass("chat-tab-sel"); // remove from all
$(ev.target).closest(".chat-tab").addClass("chat-tab-sel"); // set the one you're on
}
});
Events bubble. This means that you can listen for events on the parent. In an event listener this is bound to the element that you bind the event listener to. So we can listen for any clicks inside that element, then set the current active tab to inactive, and the clicked tab to active.
Not sure about Meteor specifically, but this is how I would accomplish this using vanilla JavaScript.
var tabs = document.querySelectorAll('.chat-tab');
for(var i in Object.keys(tabs)) tabs[i].onclick = function() {
document.querySelector('.chat-tab.chat-tab-sel').className = 'chat-tab';
this.className += ' chat-tab-sel'
}
.chat-tab-sel {
border: 1px solid #012450;
}
<div class="chat-tabs">
<div class="chat-tabs-cont">
<div id="chat-tab-1" class="chat-tab chat-tab-sel">
<span class="chat-tab-n">1</span>
<span class="chat-tab-t">Tab text 1</span>
<span class="chat-tab-c">11:00</span>
</div>
<div id="chat-tab-2" class="chat-tab">
<span class="chat-tab-n">2</span>
<span class="chat-tab-t">Tab text 2</span>
<span class="chat-tab-c">11:30</span>
</div>
</div>
</div>
Building on Tiny Giant's answer on events bubbling, here is to do this in meteor:
Template.theTemplate.events({
'click .chat-tab': function(ev) {
$('.chat-tab').removeClass('chat-tab-sel');
$(ev.currentTarget).addClass('chat-tab-sel');
}
});
Here is a interesting info.meteor.com blogpost that goes into some detail on this:
Browser events: bubbling, capturing, and delegation
Suppose you have this HTML structure:
<body>
<p>
<a><span>Hello</span></a>
</p>
</body>
Event delegation is not a browser feature, but a popular technique built into libraries like jQuery. Many blogs get confused talking about it or equate it with bubbling, but I hope the following description is clear.
Suppose you want to respond to a click on any A tag on the page, even if the set of A tags changes over time. In particular, you don't want to visit every A tag and add an event listener. So, taking advantage of bubbling, you bind a single event handler to the BODY, and from this handler you look at event.target to see if an A was clicked, and if so, which one. Be careful, though, because event.target may be the SPAN! You need to not just check if the event's target is an A tag, but also walk up the DOM tree in a simple simulation of bubbling.
This is event delegation. The BODY element is the delegate that handles events on behalf of the A tags. Conceptually, we'd like to think of the event handler as being on the A tags, so we create that illusion as much as we can. To that end, the final step in event delegation (at least in jQuery and Meteor) is to set event.currentTarget to the A tag. Further code that handles the event then sees an A tag as currentTarget and a SPAN tag as target. The BODY element is not really important, so it is nowhere to be found.

Recieving two values from data attribute one being undefined

I am trying to link to divs together by linking the data-attribute name with the id but seem to receive an error
<div class="pod-container grid_3" data-name="#george">
<div class="pod">
<img src="img/example1.png" alt="">
</div>
</div>
<div id="george">Hello World</div>
I'm referencing jQuery 1.8.3 and using the following code to identify the data attribute on the div i click
<script>
$('.pod-container').click(function(){
var identifyId = $(this).data('name');
console.log(identifyId);
//$(identifyId).show();
});
</script>
but when it is logged in the console I get.
#george testdoc.html:123
undefined testdoc.html:123
You've got two elements with class "pod". One of them has a data-name attribute, and one doesn't. Each click will trigger the event handler on both elements.
Just grab the elements that have the data-name. What you're currently doing is targeting just .pods which may or may not have data-name. With the below code, you're just being specific.
$('.pod[data-name]').click(function(){
var identifyId = $(this).data('name');
console.log(identifyId);
//$(identifyId).show();
});
You have 2 elements with the pod class and are getting 2 events fire. The inner div does not have a data-name attribute.

How to select element relative to 'this' in javascript

I have the following:
<div class="tab-pane" id="message">
<textarea rows="4" cols="50" id="send_message" placeholder="Enter text ..."> </textarea>
OK
Cancel
I want to bind the click method to the 'div' element , and when one of the child 'a' elements is clicked do separate things. I am trying to distinguish between them using the button text, but the following is not working:
$(function(){
$('#message').click(function(){
if($(this + ">a").is(":contains(OK)")) {
console.log("OK!!");
How can I fix this?
Okay there are two ways of doing this:
.find(selector)
if(this).find("a").is(":contains(OK)")) {
console.log("OK!!");
OR
$(selector,context)
if("a",this).is(":contains(OK)")) {
console.log("OK!!");
In javascript, this is essentially the context of the current function. In jQuery event callbacks, this is set to be the source element of the event - not the selector string, which is what you are treating it as.
Instead, you want to do a test like: if($("a", this).is(":contains(OK)")) {
This works because the second parameter to the jQuery selector is the context to search in, so you are only searching for the a tags under the source element of the click.
Binding the click element to the Div, then checking the text string of the A tags will make both events happen on every click. You want to bind 2 separate click events on each A tag. Add an ID to each A tag, then try this code
$('#okLinkID').click(function(){
console.log("OK!!");
});
$('#cancelLinkID').click(function(){
console.log("Cancel!!");
});
//Attaches only one listener to the #message div and listens for any 'a' element within it to be clicked.
$('a','#message').on('click',function(){
var $this = $(this),
btnText = $this.text();
console.log(btnText);
});
http://jsfiddle.net/YA7Ds/

Categories