We Keep Coding

Unable to clone button with on click function with jQuery

I have button to show phone number if clicked with this code:
var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$("#phone_ch").hide().after('<div id="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div#clickToShowPc)').addClass('xoom_c');
$("#clickToShowPc , #phone_cc").click(function() {
$("#phone_ch").show();
$("#phone_cc").hide();
$("#clickToShowPc").hide();
});
And I try to clone it with this code:
$( ".phone_c" ).clone(true , true).attr('class', 'phone_c col-lg-6').appendTo( ".main-section" );
And this is the original button HTML:
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span id="phone_ch" style="display: none;"> 012 73962304</span><div id="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div id="phone_cc">Show phone</div>
</div>
The button cloned but with showing the hidden elements and If I click it it will show the hidden element on the original one.
Can some one advise me with the correct code please?
I tried to search here and I found that I need to enable the
.clone(true , true)
in my code. And also I found something about duplicating ID's but it was not clear to me and I failed to solve my problem.
Thank you

When you clone your div ".phone_c", you will have multiple elements with the same ID. So, when you use the DOM Selector "#phone_cc", it will select the first one because it's how it works. If you had :
<span class="phone_ch" style=...
So you could use the DOM Selector ".phone_cc" and all elements with that class will be selected.
Now, you want to show and hide only elements "near" the cloned clicked element. To do that, you will have to use classes instead of IDs.
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span class="phone_ch" style="display: none;"> 012 73962304</span>
<div class="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div class="phone_cc">Show phone</div>
</div>
Then try to reach the parent element to reach the children :
var shortNumber = $(".phone_ch").text().substring(0, $(".phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$(".phone_ch").hide().after('<div class="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div.clickToShowPc)').addClass('xoom_c');
$(".clickToShowPc , .phone_cc").click(function() {
var parent = $(this).parent();
$(".phone_ch", parent).show();
$(".phone_cc", parent).hide();
$(".clickToShowPc", parent).hide();
});
I hope this helps.

Only fire one onmouseover when hovering over multiple elements

I'd like to have basic code like the following:
<span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span>
However, I'd like to keep it from firing both of these events if both are being hovered over; e.g. if I hover over "this" it should fire only its event and alert "hello." How can I do this?
Thank you in advance!

$(".container").hover(function(){
alert($(this).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="container" id="hi">
Hello,
</span>
<span class="container" id="hello">
this
</span>
<span class="container" id="hi">
is a test
</span>

I am going to assume that the overlapping elements are not the same size. I.e one is bigger than the other.
HTML and inline js:
<span class="container" id="hi">
Hello,
</span>
<span class="container " id="hello">
this </span>
<script>
var hello =
document.getElementById("hello");
var this =
document.getElementById
("this");
hello.addEventListener("click
",pop("hello"));
this.addEventListener("click",pop(" hi");
function pop(string) {
window.alert(string);
}
<\script>
That being said very little is mentioned about the nature of the elements this and hello. Op plz show your CSS and update ques

Here's the relevant portion of what I ended up using. I used JQuery.
var mouseHovered = function(element) {
//get all hovered spans
var hoveredElements = $("span:hover");
//get the element with the smallest text
var smallestElement;
for(var i=0; i<hoveredElements.length; i++) if(!smallestElement || hoveredElements[i].textContent.length < smallestElement.textContent.length) smallestElement = hoveredElements[i];
//if this is the smallest text in the elements
if(element == smallestElement) {
//log the text
console.log(element.textContent);
}
}

You need to prevent Event bubbling when you hover/click on inner span.
This can be done using event.stopPropagation().
Look at two solutions provided at this JSFiddle.
Solution 1 - Use of e.stopPropagation() in the handler function innerSpan().
Solution 2 - Use of event.stopPropagation() in inline onclick event.
<span onclick="alert('Outer span');">
Outer
<span onclick="event.stopPropagation(); alert('Inner span');">
Inner
</span>
</span>

Inline editing with icon on side

i'm trying to create an inline editing plugin for a new project, I'm working on. It should be very easy. Just an fa-pencil icon on side of the text, which should be edited.
Currently I've got HTML like so (simplified):
<div class="inline-edit-icon">
<i class="fa fa-pencil"></i>
</div>
<div class="inline-edit">
<p id="doctor-info-text" class="inline-edit-text">{{userInfo.description}}</p>
<textarea class="form-control inline-edit-input" ng-model="userInfo.description"></textarea>
</div>
And I'm triggering the visibility of the .inline-edit-icon div via jQuery:
$('.inline-edit-text').hover(function(e){
var coordinates = $(this).offset();
$('.inline-edit-icon').css('top', coordinates.top);
$('.inline-edit-icon').css('left', coordinates.left - $('.inline-edit-icon').width());
$('.inline-edit-icon').show();
}, function(){
$('.inline-edit-icon').hide();
});
The problem is, I can't click on the icon, as it gets hidden before I get my mouse to it.
How can I keep it visible when the mouse is over either text or icon?

Does this example help you? Notice the changes I made with HTML AND CSS:
$('.inline-edit-text, .fa-pencil').hover(function(e){
var coordinates = $(this).offset();
console.log(coordinates)
//$('.inline-edit-icon').css('top', coordinates.top);
//$('.inline-edit-icon').css('left', coordinates.left);
$('.inline-edit-icon').show();
}, function(){
$('.inline-edit-icon').hide();
});
JSFiddle

Add a container around your .inline blocks, and you trigger the hover on it.
Something like :
<div class="inline-container">
<div class="inline-edit-icon">
<i class="fa fa-pencil">o</i>
</div>
<div class="inline-edit">
<p id="doctor-info-text" class="inline-edit-text">{{userInfo.description}}</p>
<textarea class="form-control inline-edit-input" ng-model="userInfo.description"></textarea>
</div>
</div>
and the script part:
$('.inline-container').hover(function(e){
var coordinates = $(this).children('.inline-edit').offset();
var $icon = $(this).children('.inline-edit-icon');
$icon.css('top', coordinates.top);
$icon.css('left', coordinates.left - $icon.width());
$icon.show();
}, function(){
$('.inline-edit-icon').hide();
});
Working Fiddle: http://jsfiddle.net/qej24s5m/
Hope it's gonna help you.

You may want to use mouseenter and mouseleave events:
$('.inline-edit-text, .fa.fa-pencil').on('mouseenter',function(e){
var coordinates = $(this).offset();
$('.inline-edit-icon').css('top', coordinates.top);
$('.inline-edit-icon').css('left', coordinates.left - $('.inline-edit-icon').width());
$('.inline-edit-icon').show();
});
$('.inline-edit-text, .fa.fa-pencil').on('mouseleave',function(e){
$('.inline-edit-icon').hide();
});

Show certain DIVs with onclick

In a Blog you can determine a tag for each post e.g. Video, Photo, Quote etc... If I created a div class for each tag e.g.
<div class="Video"></div>
<div class="Photo"></div>
<div class="Quote"></div>
How can I create a onclick link so when I click it only shows div's called Video and hides all other div's?

DEMO HERE
Using Jquery....
$(document).ready(function()
{
$('.filter').click(function(e)
{
e.preventDefault();
var filter = $(this).html();
$('.boxes').hide();
$('.'+filter).show();
});
});
Then in your HTML
<a class="filter">Video</a>
<a class="filter">Photo</a>
And your divs....
<div class="boxes Video">Blahblah</div>
<div class="boxes Photo">Blahblah</div>
Or you can do it using data attributes, to keep your HTML more readable...but this works too
DEMO HERE

I'd recommend using jQuery for this. And it would be much better if you give all your "tag" divs a class like, for example, tag and separated with a space it's specific type.
For example class="tag audio". But this should work for now:
$('div').click(function () {
var tags = ['Video', 'Photo', 'Quote'], tag = $(this).attr('class');
if ($.inArray(tag, tags)) {
$('.' + tag).show();
$('div').not('.' + tag).hide();
}
});

How can I find an element within parent element ID using jQuery?

I am trying to find the DIV within another DIV id.
<div id="container1">
<div class="inside">
</div>
</div>
<div id="container2">
<div class="inside">
</div>
</div>
Notice there are 2 DIVs with the class "inside". I am trying to select the one within a specific container.
When there is only 1 set of containers, this works:
$carousel_container = $(carousel).find(".inside");
However, when I define the parent ID, then try to select the inside div, it does not work:
$carousel_container = $(carousel).find("#" + o.theid + " .inside"); // where o.theid = container1 or container2

Try
$(carousel).find("#" + o.theid + " > .inside");
Where > means child of.

Have you tried:
$carousel_container = $(carousel).find("#" + o.theid).children('.inside');