Every time the client select an item from the autocomplete textbox, it automaticly appears in a div I created right under the textbox.
I would like to style with css each selected item that appears in the div, and not the whole div. For example, I want that every selected item will appear with a black border. (I could easily use css on the div, but then i'll get border for the whole div and not on each item selected).
That's the JS code. What i need is to add CSS to any new Selected country.
$(function() {
/* Textbox ID */ $("#destinations").autocomplete({
select: function (event, ui) {
/* div ID */ $("#DestinationsChosen").html(function(i, origText)
{
var SelectedCountry = ui.item.value.toString();
var CurrentText = origText.toString();
if ((CurrentText.indexOf(SelectedCountry) >= 0))
{
alert("Already Exists");
return CurrentText;
}
return CurrentText + " " + SelectedCountry;
})
}
});
})
Here is the whole code: http://jsfiddle.net/3zfcb04k/
Change this:
return CurrentText + " " + SelectedCountry;
to this:
return CurrentText + " <span>" + SelectedCountry + "</span><br/>";
Then apply the CSS on the span tag.
Here is the updated JSFiddle
try to put the css on the class="ui-menu-item"
.ui-menu-item{
color:red;
}
Related
I am making a todo list so I am adding new input tags with checkboxes on them so I can check off a to do list item. I am having trouble modifying the css so that the text displays a line through it when it is checked.
The check function works and it runs but I am unable to put a line through the specific html element.
var add = function() {
var task = $("#taskTextBox").val(); // references the value inside #task
if(task != ""){
inc++;
var itemName = "item" + inc;
var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+">"+task+"<br></br>");// makes a new <p> element
$("#taskTextBox").val(""); // empties out #task
var newHeight = $("#list").height() + 40;
$("#list").css({"height": newHeight});
addAttributes();
$("input[class=" + itemName + "]").change(function () {
if ($(this).prop("checked")) {
$("input[class=" + itemName + "]").css({'text-decoration': 'line-through'});
} else{
$("#list").css({"text-decoration": "none"});
}
});
}};
EDIT:
I forgot to mention that your code is not working because you are adding your class to the input which is just affecting the checkbox style not the text following it.
For my code to work you just need to modify this line, adding a span to wrap your task. You do not need the change function anymore.
var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+"><span>"+task+"</span><br></br>");// makes a new <p> element
SOLUTION:
You can achieve this with plain CSS using :checked pseudo-class and using a span or any other tag that can be used as a selector directly following your input:
JSFiddle
CODE SNIPPET:
.example:checked + span {
text-decoration: line-through;
}
<input class="example" type="checkbox"><span>Eggs</span>
<input class="example" type="checkbox"><span>Milk</span>
I have a question. So basically i'm trying to create a js script, when user clicks on a link, it colors the link in different color and then adds the link to an input box, and when the user clicks again on the same link, it changes the color back to original and deletes the text from the input box. The purpose whould be as a search filter, where you can add to search box, predefined keywoards.
$('.tagsSelect a').click(function() {
var clickColor = this.style.color;
if(clickColor = "#F5EBD5"){
var value = $(this).text();
var input = $('#popGirlMenu');
input.val(input.val() + value + ', ');
this.style.color="#f5d47f";
return false;
}
if(clickColor = "#f5d47f") {
var value = $(this).text();
var input = $('#popGirlMenu');
input.val(input.val() - value - ', ');
this.style.color="#F5EBD5";
return false;
}
});
This is my code, it works, bet when the user clicks again on the link, it doesn't change the color back to original and it doesn't remove the text from input box.
p.s sorry for my bad english
Use CSS for your layout, and check the class instead of a color value:
CSS
a { color: blue; }
a.selected { color: red; }
HTML
link a
link b
<input id="txt" type="text" />
JavaScript
$("a").click(function() {
var $this = $(this);
$this.toggleClass("selected");
if ($this.hasClass("selected"))
$("#txt").val($("#txt").val() + $this.text() + ", ");
else
$("#txt").val($("#txt").val().replace($this.text() + ", ", ""));
});
See this jsFiddle
Note to remove a part from a string, you need to replace that part with an empty string. - doesn't work on strings.
Use == or === (comparison) instead of = (setting a variable)
I have dynamic fields generated through jquery. I am able to display these fields through a select function trigger .change. Every select field has three options Biology, Calculus and Others-Not listed. When choosing Others-not listed with value of 3, the function displays a hidden div. My problem is that if there are two select fields and one has option Others-not listed chosen it will show the hidden div for all other select. I would like to just show this hidden div for the particular select field. JSFIDDLE
$(document).ready(function() {
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option){
var content = '';
for (var i = 1; i <= option; i++){
content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"'
content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"';
content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></br></div>';
$(document).on('change',"#coursename_"+i, function(){
if ($(this).val() == "3"){
$(".hideNewCourse").show();
}else{
$(".hideNewCourse").hide();
}
});
}
$('#course_catalog').html(content);
}
});
Change your code for the select fields to:
if ($(this).val() == "3") {
$(this).parent().find(".hideNewCourse").show();
} else {
$(this).parent().find(".hideNewCourse").hide();
}
jsFiddle example
In your code, $(".hideNewCourse") will show or hide all the elements with that class. By using $(this).parent().find(".hideNewCourse") you only select the element relative to the select that was changed.
You are anyways delegating the events. Instead of binding the event to each element specifically just use Attribute starts with selector.
$(document).on('change',"#coursename_"+i, function(){
can be changed to
$(document).on('change',"[id^=coursename_]", function() {
And move it out of the showFields method
And to show and hide the specific element containing to the container, use a mix of closest , which gets to the parent and then find the hideContainer div for that corresponding block.
$(".hideNewCourse").show();
will then change to
$(this).closest('div').find(".hideNewCourse")
Check Fiddle
$(".hideNewCourse").show();
The above represents all the elements with this class.
You have to be selective like
$(this).parent().find(".hideNewCourse").show();
Then,
$(document).on('change',"#coursename_"+i, function(){
if ($(this).val() == "3"){
$(this).parent().find(".hideNewCourse").show();
}else{
$(this).parent().find(".hideNewCourse").hide();
}
});
Fiddle
Try using the .next() function so it only grabs the next object, instead of all of them:
So instead of this:
$(".hideNewCourse").show();
Do this:
$(this).next(".hideNewCourse").show();
And you would do the same for hide:
$(this).next(".hideNewCourse").hide();
I am trying to figure out how to dynamically update a text input field when a user changes the option in one or two HTML select menus. I have included my code below showing how it currently works.
$('tickets').addEvent('change', function() {
if($('tickets').value > 0)
{
var cells = $$('.ticket2');
cells.each(function(cell) { cell.setAttribute('style','display:none;');});
var cells = $$('.ticket3');
cells.each(function(cell) { cell.setAttribute('style','display:none;');});
var sumValue = '$' + (100 * $('tickets').value + 10 * $('fiftytickets').value) + '.00';
$('ordertotal').value = sumValue;
$('ticket1heading').setHTML('Ticket(s)');
} else {
var cells = $$('.ticket2');
cells.each(function(cell) { cell.setAttribute('style','');});
var cells = $$('.ticket3');
cells.each(function(cell) { cell.setAttribute('style','');});
$('ticket2heading').setAttribute('style','text-align:center; font-weight:bold;');
$('ticket3heading').setAttribute('style','text-align:center; font-weight:bold;');
$('ordertotal').value = '$' + 250 + '.00';
$('ticket1heading').setHTML('Ticket 1');
}
});
The tickets select menu correctly affects the ordertotal text input field, but the fiftytickets select menu does not. I need the two to work independently of each other, but when each is changed, to affect the value of the ordertotal text input field.
Any assistance is greatly appreciated.
Thank you.
Mike
as said by JoDev, the select element's object is referenced with $('#tickets') and not just $('tickets').
also, I don't think that there is a value property in jquery for a select element.
you can get the value with the val() function.
Created a little fiddle for you here here
$('#tickets').change(function() {
$('#output').val($(this).val() + " - " + $('#fiftytickets').val());
});
$('#fiftytickets').change(function() {
$('#output').val($('#tickets').val() + " - " + $(this).val());
});
This is a jQuery function that determines the class of an image within a table and acts accordingly. If the image parent doesn't have the class selected, it gives it that class and then adds the td id to a div (order). If it does have the class selected, it should remove the class, which it does, and then remove the p element containing the td id.
$(document).ready(function () {
$('td img').click(function () {
if ($(this).parent().hasClass('x')) {
alert("Seat " + ($(this).parent().attr("id")) + " is taken");
} else if ($(this).parent().hasClass('selected')) {
$(this).attr('src', 'images/a.gif');
$(this).parent().removeClass('selected');
var z = $(this).parent().attr('id');
$(z).remove();
return false;
} else {
$(this).attr('src', 'images/c.gif');
$(this).parent().addClass('selected');
alert($(this).parent().attr("class"));
var z = $(this).parent().attr('id');
$('<p>').attr('id', z).text(z).appendTo('#order');
return false;
};
});
});
It works up until removing the p element, where it just doesn't. The p id is dynamically set and is the same as the td id, hence the use of a variable to choose the id.
Ok, so it was a combination of answers on here.
Firstly, the ids weren't unique, so I added a suffix to them:
var z = $(this).parent().attr('id');
$('<p>').attr('id', z+'1' ).text(z).appendTo('#order');'
Then used the suggestion of $('#' + z).remove(); but changed it for my new suffix, so it now shows this $('#' + z+'1').remove();
All seems to be working now, thanks for your help.