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!!
Related
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. :)
I am working on a JQuery application where I am trying to change the text of a previous element using $(element).prev().text("Mytext");. But when I scroll up / scroll down the page, the changes I have made are disappeared.
titles = $('.checkGroup:checked').parent().map(function () {
return $(this).text();
}).get(); // Generate Array of Titles
for (i = 0; i < titles.length; i++) {
$('span[level ="' + i + '"]').prev().text(titles[i]);
}
this is my code snippet. please help me to fix this
To fix this add the following JS.
Note that this is a quick fix. There must be some callback functions you can use to have the same end effect. The Slick.Grid plugin is rendering the HTML on scroll. Hence the issue.
Events for SlickGrid.
Edit 1:
grid.onScroll.subscribe(function(e,args){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})
Normally the following might have worked. But the SlickGrid had many mysteries of its own. Its not a scroll event.
$(document).on('scroll', '.slick-viewport',function(){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})
I have two dropdowns, the second dropdown shall change when something is changed in the first dropdown, this is working fine in Firefox, but not in IE. (IE9). Then in the second dropdown, I'm looping through the items, and hiding some of them.
var intermin = '${intermin}';
var intermin2=intermin.substring(1,3);
$('#startSemester').change(function() {
var start=$('#startSemester').val();
var end=$('#endSemester').val();
var start1=start.substring(0,1);
var start2=start.substring(1,3);
var start3="";
var end3="";
if (start1=="H"){
start3="2";
}
else
start3="1";
var start4=start2+start3;
$('#endSemester option').removeAttr("disabled");
var endSemesters= $('#endSemester');
$.each($('option', endSemesters), function(index, value) {
var end= ($(this).val());
var end2=end.substring(1,3);
var end1=end.substring(0,1);
if (end1=="H"){
end3="2";
}
else
end3="1";
var end4=end2+end3;
$('#endSemester ' + 'option' + '[value =' + end + ']').show();
if (end4 < start4 || end2 > intermin2) {
$('#endSemester ' + 'option' + '[value =' + end + ']').hide();
}
});
});
Is there some way of having this working in IE.
The problem with IE is the hiding option part. IE doesn't support much CSS on option elements.
Especially display: none which is what .hide() does.
Therefor I believe it's best for you to disable the option.
var changeOption = $('#endSemester ' + 'option' + '[value=' + end + ']');
changeOption.prop("disabled", false);
if (parseInt(end4) < parseInt(start4) || parseInt(end2) > parseInt(intermin2)) {
changeOption.prop("disabled", true);
}
You can test this in various browsers: http://jsfiddle.net/tive/wU6XL/
Or if you're persistent enough find a plugin that:
hides the select control and uses a replacement ul li structure
wraps <option /> with a span (demo1 demo2)
PS: you might want to change the option values accordingly since I have no view on your HTML.
Hey Please refer This code
<asp:DropDownList ID="ddlWeeklyWeightIn" runat="server" ClientIDMode="Predictable">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
Js Code Is
$('#ddlWeeklyWeightIn').on("change", function () {
alert($(this).val());
});
Please refer Link See Demo
Hope it helps you.
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.
I'm working on an ASP.Net webpage which will use the jQuery Dropdown Checklist (http://code.google.com/p/dropdown-check-list/). I'm fairly inexperienced with JavaScript and completely new to jQuery.
Could anyone help me with a JavaScript function that de-selects items from a jQuery DropdownChecklist? It would need to accept a string, then de-select the item that matches that string.
Thanks in advance.
Try changing the original <select> element so that the item you want to deselect is no longer selected and then refresh the jQuery dropdown-checklist using the "refresh" command. Something like this (where selectID is the ID of the original <select> element and targetString is the content of the <option> you want to deselect):
function deselect(selectID, targetString){
$("#" + selectID + " option").each(function(){
if($(this).text() === targetString) $(this).attr("selected", "");
});
$("#" + selectID).dropdownchecklist("refresh");
}
Following code deselects item and removes it from display.
document.clearSel = function(list,txt){
var ele=document.getElementById(list);
for(i=0; i < ele.options.length; i++ ) {
if (ele.options[i].selected && (ele.options[i].text == txt) &&
(ele.options[i].value != "")) {
var val=ele.options[i].value;
$("div#ddcl-" + list +"-ddw input[value='"+val+"']").each(function(){
$(this).attr("checked",false);
var spSel="span#ddcl-" + list +" span.ui-dropdownchecklist-text";
var spTxt=$(spSel).text();
$(spSel).text(spTxt.replace(txt+",",'').replace(txt,''));
});
}
}
}
document.clearSel("s8","Low");
I got "div#ddcl--ddw input[value='']" and "span#ddcl- span.ui-dropdownchecklist-text" selectors after examining demo page for drop down check list
PS:- I've trie $("#" + list).dropdownchecklist("refresh"); but I am not able to refresh the text;