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

Changing text color using replace method

I am using the following code inside my click handler (shown in JSFiddle below) to replace a text when a user clicks on a cell value:
var value = event.args.value;
var color = "#FF0000";
var highlighted = text.replace(
' ' + value + ' ',
"<span style='color:" + color + ";'</span> "
);
panel.jqxPanel('clearcontent');
panel.jqxPanel('append', highlighted);
Q1:
It is behaving in a different manner. I mean when I click on the first cell value, it converts everything to red color, clicking on other values makes it behave in different manner as can be seen in my JSFiddle here
Q2. What can I use to preserve the html formatting? I mean using var text = panel.html(); instead of var text = panel.text(); didn't work for me.

You are missing the closing > on your span tag, and you are omitting the value that you obtained from var value = event.args.value; so the word goes missing.
var highlighted = text.replace(
' ' + value + ' ',
' <span style="color:' + color + ';">' + value + '</span> '
// ^ ^^^^^
Note I also changed the quote characters used so the HTML can have the double-quotes " which are more commonly used in markup, and javascript doesn't care about single or double quotes for strings — use whichever you like, just be consistent, for your own sanity.
Try the updated fiddle I created, changing only that line, and you will see the word you click on get highlighted.
That said, it is generally better to avoid inline styles like color="#FF0000" and use classes and CSS styles for them instead. You could instead have simpler code that doesn't have to work the var color into it:
var highlighted = text.replace(
' ' + value + ' ',
' <span class="selected">' + value + '</span> '
Your CSS would have a rule span.selected { color: #FF0000; } ... then, restyling your highlight color from red to something else you just change the CSS instead of having to change your javascript code.

Jquery appending text to an element

The aim is to append a line of text into the element below.
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPT oneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
this code is contained within a loop so each time a new anchor is created and given an incremented ID (countwide) for for example 'anchor1' 'anchor2'
What I need is to be able to append this variable below as part of the p element inside this anchor
image_price
I have tried this with no progress.
$("#anchor1").append(image_price);
obviously we need the id in the line above to increment in line with the loop.
Thanks.

Try:
$("#anchor" + countWide + " .popupDynamic").append(image_price);
Explanation:
I have just updated the selector so that it would pick up the child of the #anchor + countWide(this means anchor plus the dynamic ID) with the class of .popupDynamic and append the price to it.

You can use the countWide variable in your selector, this way :
$("#anchor"+countWide+" .popupDynamic").append(image_price);

Opening a html select option on focus

I had asked a question about How to open option list of HTML select tag on onfocus(). At that time it solved my problem but I missed one problem that every time on opening a html select option onfocus next select option went disappear.
I not able to find whats going wrong with this code.
here is link for that problematic question jsFiddle.

Yes, that's what the lines
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo(50,0);
do. They hide the next select, because otherwise it would show on top of the expanded one.
This isn't a good solution at all though. Instead i'd use z-index to prevent that from happening:
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto")).css('z-index',2);
});
$('select').blur(function(){
$(this).attr("size",1).css('z-index','1');
});
$('select').change(function(){
$(this).attr("size",1).css('z-index','1');
});
It would be even better to use a class instead of inline style. But i used that just as a demonstration.
http://jsfiddle.net/PpTeF/1/

Just comment out the fadeTo function. check this http://jsfiddle.net/PpTeF/2/
$(document).ready(function(){
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto"));
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo(50,0);
});
$('select').blur(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
$('select').change(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
//$(x).fadeTo('fast',1.0);
});
});
Cheers!!

Cannot Select div's after insert via JavaScript / jQuery

I have a descriptions for each layer of a map , being generated via JSON objects. I generate all html for these containers, which contains maps , legends, and descriptions.
html_description += '<div ' + hide + ' id="'+ map_div_id + '_description_' + id + '">' + layer_info.description + '</div>';
// Set the description from the layer info
$('#' + map_div_id + '_description').html(html_description);
Then I want to only show certain descrptions (depending on which layer is showing). So below should work , (as it works in my console debugger) .
// Hide Descriptions
$('#' + map_div_id + '_description div').hide();
$('#' + map_div_id + '_description_' + visible).show();
// Show Proper Description
console.log('#' + map_div_id + '_description_' + visible);
console.log($('#' + map_div_id + '_description_' + visible));
Also the odd thing is I can manipulate the heading contanier :
// THIS WORKS?!
$('#' + map_div_id + '_description').hide();
Any ideas?
http://jsfiddle.net/PazSs/2/

Thanks for the jsFiddle.
I modified it to investigate, and here's my copy:
http://jsfiddle.net/PazSs/8/
I do believe your problem is in your dynamic_layer array. I stepped through the code in jsFiddle and that array has zero elements.
The result is when you call
dynamic_layer[map_div_id].setVisibleLayers(layer_id);
It crashes, as you're dereferencing an undefined result (null).
I see you're populating the dynamic_layer further above:
if (typeof geo_server != 'undefined' && geo_server != null) {
gp_server = gis_server + '/' + geo_server;
gp = new esri.tasks.Geoprocessor(gp_server);
} else {
// Adds a dynamic layer
dynamic_layer[map_div_id] = new esri.layers.ArcGISDynamicMapServiceLayer(full_map_server);
map[map_div_id].addLayers([dynamic_layer[map_div_id]]);
}
This seems to be the only place you stuff objects into the dynamic_layer array, so I'd start there. Check out your logic and ensure that you always put the layer in when required.
Let me know if it works!

that selector:
$('#' + map_div_id + '_description div')
would look for a div inside your description div.
assumed the value of 'map_div_id' is 'test' your markup after insert should look like this:
<div id="test_description">
<div> ...your description here </div>
</div>
when i see how your build your html_descriptions string, it does not look like it is doing that... (it only would be like that if 'layer_info.description' would contain '...'
thats a lot of assuming, it's probably easier you show us some generated markup, and complete script. use jsfiddle

I can see your logic:
HIDE ALL layer descriptions
and then SHOW only the layers you want to see
What does "visible" mean? Is that an id? The name implies a boolean.
If it's a boolean, your selector
$('#' + map_div_id + '_description_' + visible).show();
doesn't look like it'll work properly.
Can you describe what visible is a bit more, please, and give examples of the actual markup?
Thanks.