We Keep Coding

How to remove div if its text is identical to another div?

I have a d3 area chart with a tooltip that displays the same text in two different divs. The first div, .tooltip.headline.record, displays the selected value in bold. Another div class, .record-label, displays the all of the values at a given point on the x-axis — for both the selected and non-selected paths. Here's a Plunker of the problem.
To illustrate, it currently looks like this:
I've been trying to achieve a result like this:
... or like this:
I've tried the following methods of hiding or removing the duplicative .record-label div, without success — and without error messages to assist in further diagnosis.
function getRecordContent(obj, pos) {
if ( $(".tooltip-headline-record").text() == $(".record-label").text() ) {
$(".record-label").hide();
//$(".record-label").remove();
//console.log("same");
}
return '<li><div class="record-label">' + obj.state + " " + obj.record.toLowerCase() + " " + numFormat(obj.values[pos].y) + '</div></li>'
}
Here, again, is a Plunker that demonstrates the problem I'm trying to solve (see, specifically, the code beginning at line 480:
http://plnkr.co/edit/NfMeTpXzXGTxgNFKPFJe?p=preview

Is this what you're looking for?
Plunkr
Relevant code changes:
The whole dataset was being passed to the getRecordContent function. So I changed that: when hovered over "admissions", pass "transfers" and "codependents". (line: 435)
var filtered_dataset = dataset.filter(function(row){return row.record !== d.record; });
for (var i = 0; i < filtered_dataset.length; i++) {
content += getRecordContent(filtered_dataset[i], idx);
}
Seems like you need to specify the state name as well along with the record. (line 480)
return '<li><span class="record-label">' + obj.state + ' ' + obj.record.toLowerCase() + '</span><span class="record-value">' + numFormat(obj.values[pos].y) + '</span></li>'
Edit:
Changes made for the tooltip to adapt to the main chart as well:
var filtered_dataset = dataset.filter(function(row){return row.record !== d.record && row.state === d.state; });
Changed z-index for the tooltip in main.css (try removing it and hovering close to the jquery slider)
z-index: 2;
Hope this helps. :)

How to check if html element is visible is(":visible") not working the way I need it to

I know is(":visible") will return false if a parent is invisible, so I know why the test I'm writing fails. My question is how to get around that.
The Test:
QUnit.module("updateLabel", function() {
QUnit.test("true value", function(assert) {
var key = "exchangestatus";
var value = true;
var element = $("#" + key + "-" + value);
assert.ok($(element).is(":hidden"), key + "-" + value + " should be hidden before updating");
MyCompany.updateLabel(key, value);
assert.ok($(element).is(":visible"), key + "-" + value + " should be visible after updating");
//THE ABOVE FAILS!
});
});
the html:
This label is in a div, which is in a div, which is in a form, which is in a div, which is in a div... The html has too much company specific stuff, so I'm omitting it, but this html is in deeply nested tags.
<label type="label" value="connected" name="ExchangeStatus" id="exchangestatus-true" class="control-label label-btn-success fusionconnect" style="padding: 8px 12px;">{{si011}}</label>
The JavaScript being tested:
updateLabel: function(key, value) {
var selectInput = "#" + key + "-" + value;
if (value) {
$(selectInput).show();
$("#" + key + "-false").hide();
} else {
$(selectInput).show();
$("#" + key + "-true").hide();
}
}
As I said in the first sentence, my assertion fails because its parent isn't visible. How do I check if that specific element has called .show(); irrespective of if it's actually visible because of its parent's visibility.

Stop additional click events on specific element ID - JQuery

I have a snippet of my jQuery code;
$('#elements').on('click', '.items', function () {
var content, id, tag;
tag = this.tagName;
id = $('#' + this.id);
content = id.html();
switch (tag.substr(0, 1)) {
case "P":
id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
break;
case "H":
id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
break;
}
});
The purpose of this is when I click on a paragraph tag, it will add a text area inside of the paragraph tag (with the content inside it ready for editing). When I click a heading tag, it will create an 'input' tag with the content inside it for editing.
Unfortunately, when i click twice on the paragraph, it adds a text area with the content inside it as it should but on the second click it adds another text area inside of that, now the 'content' of the textarea is: <textarea id="2In" class="PIn" type="text">Paragraph one. and with every click it adds: <textarea id="2In" class="PIn" type="text">
I understand this is happening as it should given the code but I want to stop the click event on that specific ID (this.id) but keep the click event active on the other elements with the class '.items'.
**Additionally: **
I'm sure this is bad practice to approach this by creating the editiable tags inside of the old ones so if anyone has a better approach be sure to let me know.
Many thanks,
Mike

I'd probably solve it by adding a :not(.clicked) to the selector, and adding that class when you add the input. E.g.:
$('#elements').on('click', '.items:not(.clicked)', function () {
$(this).addClass("clicked");
// ...your current handling...
});
But you could solve it by checking for the existence of the field, provided the input or textarea you're adding is the only one the paragraph will have:
$('#elements').on('click', '.items', function () {
if (!$(this).find("input, textarea")[0]) {
// ...your current handling...
}
});
Or actually jQuery extends CSS to provide :has and to allow :not to have more complex contents, so in theory this would work:
$('#elements').on('click', '.items:not(:has(input)):not(:has(textarea))', function () {
// ...your current handling...
});
...but that selector is getting a bit unwieldy...

What about using .one?
By using one, the click event can only be triggered once. Here's an example.
$('#elements > *').one('click', function () {
var content, id, tag;
tag = this.tagName;
id = $('#' + this.id);
content = id.html();
switch (tag.substr(0, 1)) {
case "P":
id.html("<textarea id='" + this.id + "In' class='" + tag + "In' type='text'>" + content + "</textarea>");
break;
case "H":
id.html("<input id='" + this.id + "In' class='" + tag + "In' value='" + content + "' >");
break;
}
});
But it seems you are trying to do something like allowing a user to edit text and saving the new input. I'd advise using a combination of contenteditable and localStorage.

jquery event no change

The is(:focus) was the aproach. The final code is listed below:
setInterval(function(){
if($j("SELECT[name='cf20_field_7']").is(":focus")) return false;
var information = '';
var i = 1;
$j("#cf20_field_1").html();
//add new information to hidden field
$j("#cforms20form .info_for_email").each(function(){
var name = $j(this).find("INPUT[name='cf20_field_5']").val();
var inn = $j(this).find("INPUT[name='cf20_field_6']").val();
var view = $j(this).find("SELECT[name='cf20_field_7']").val();
//render
information += i + ")";
information += "Наименование организации: " + name + ".<br/>\n";
information += "Реквизиты организации: " + inn + ".<br/>\n";
information += "Стоимость заказа: выписка " + view + ".<br/>\n";
i++;
})
$j("#cf20_field_1").html(information);
hovered = true;
}
,100
);
Is there some possibility to fire function when there is no hover in SELECT field.
And also there may be aproach that to check is there is no hover on SELECT field.
It cause problemms. When you are trying to select another option cursor is begging while setInterval is working.
The best approach that i find is listed below:
//every 100 mil secconds update info
setInterval(function(){
$j("SELECT[name='cf20_field_7']").trigger('change');
if ( $j("SELECT[name='cf20_field_7']").on("change")) return false;
var information = '';
var i = 1;
$j("#cf20_field_1").html();
//add new information to hidden field
$j("#cforms20form .info_for_email").each(function(){
var name = $j(this).find("INPUT[name='cf20_field_5']").val();
var inn = $j(this).find("INPUT[name='cf20_field_6']").val();
var view = $j(this).find("SELECT[name='cf20_field_7']").attr("value");
//render
information += i + ")";
information += "Наименование организации: " + name + ".<br/>\n";
information += "Реквизиты организации: " + inn + ".<br/>\n";
information += "Стоимость заказа: выписка " + view + ".<br/>\n";
i++;
})
$j("#cf20_field_1").html(information);
}
,100
);
More information:
I can discribe situation more. So i had a form. onsubmit event didn`t work because there is another event is attachet. So i deside to update value of first field of form every 100 milisecs. The value is containing all dynamictly created "selects and inputs". But when i try to change value of the select by mouse. The function is fired and function check value of select and cause mouse begging. So i need somehow to check if that select is hovered to prevent firing of the function.

Invalid here:
if ( SELECT[name='cf20_field_7'].on("change"))
I guess you need this:
if ( $("SELECT[name='cf20_field_7']").on("change"))
But still, the above is invalid. You need some handler like:
$("SELECT[name='cf20_field_7']").on("change", function(){
return false;
});

if ($j("SELECT[name='cf20_field_7']").on("change")) return false
Not clear what should be checked here. I assume you want to run some function attached to onchange even of select. In that case you should use .trigger instead of .on. But in both cases return value will be jquery object (for chaining purposes) so basically your statement will always be true both with trigger and on If you want to test some value of select, you should do something like next:
if(someTestFunct($j("SELECT[name='cf20_field_7']"))) return false;
function someTestFunct(jObj) {
//some other code?
return jObj.val() == "some value to test";
}
Possibly some better approach may be used, but without more details it is hard to suggest something.

how to change visited link color dynamically using javascript?

I created dynamic list(list with hyperlink) using jquery.when I click that link fo rthe first time it will go to the next page.
I used the cookie for save the index of link value while I am clicking that link.Again run that application
get the saved index value from cookie in onload.Using that value change the color that particular link.
Now I want to I will run that application again that link is displayed in red color and the other links(unvisited) are displayed in blue color.
How to do this?
$(".sidemenu li ").click(function() {
var index = $('li').index(this);
// alert(index);
checkCookie(index);
// saveid(index);
});
}
function checkCookie(index)
{
var linkindexvalue=index;
// alert(linkindexvalue);
setCookie("indexvalue",linkindexvalue,365);
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + value;
alert(document.cookie);
}
$(document).ready(function(){
var list=getCookie("indexvalue");
if(list=='1'){
alert(" ");
$(".sidemenu li").css("background-color","red");
}
});
function getCookie(c_name)
{
alert("hj");
var value = "";
var DocumentCookie = " " + document.cookie + ";";
var CookieSearchStr = " " + c_name + "=";
var CookieStartPosition = DocumentCookie.indexOf(CookieSearchStr);
var CookieEndPosition;
if (CookieStartPosition != -1) {
CookieStartPosition += CookieSearchStr.length;
CookieEndPosition = DocumentCookie.indexOf(";", CookieStartPosition);
value = unescape(DocumentCookie.substring(CookieStartPosition, CookieEndPosition));
}
return value;
}
please guide me.
Thanks in advance

use css :visited tag. Else if you want to do so by jquery without any plugin then see my implementation on jsfiddle http://jsfiddle.net/JjMAX/1/.

There's actually the jQuery Visited plugin that let you get the visited links in your page.
Once included, you can select the links and attach a class with the new colour:
$('.sidemenu li a').visited().addClass('visited');
Notice that in this case you have to add an <a> inside your <li>s, since I don't think the visited feature it's strictly related to links on a anchor, not clicks on a list item.
If on the contrary you need to go for the cookies options, give me some time to check your code! :)