Develop Reference

Use two fonts in one input box

I am writing a program in which when a user click on check box , the font of the input (which i am writing) changes. Like firstly if the check box is unchecked the font is 'arial' and when the check box is checked the input font should become 'verdana'.
I am able to do this but the function changes all the previous text written into verdana.
Code Sample:
<input type= "checkbox" onchange = "tests();" name="remember" id = "remember"> **(Checkbox)**
function tests(){
if (remember.checked == 1){
$(.form-control).css('font-family','verdana');
}else{
$('.form-control').css('font-family','arial');
}
}
i need that whenever i check this , the upcoming data should be in verdana and the previous should remain same in input box.

Instead of changing the font of whole form class $(.form-control) do it for specific class of checkbox
Update:
add this css
input[type=checkbox]:checked + label {
font-family:'verdana'
}
input[type=checkbox] + label {
font-family:'arial'
}

In your code you seem to be using JQuery, so you can do this:
$("#remember").change(function() {
if ($(this).is(":checked")) {
$(".myText").css("font-family", "Verdana");
} else {
$(".myText").css("font-family", "Arial");
}
});
Here is the JSFiddle demo

jQuery results filtering multi filters

I am working on an filter option for a results page.
I have something thats working fine with one filter but when other filters are clicked its goes wrong. The problem is that when you filter a color and a size it will show the color rows and the size rows even if colored filter doenst have that size.
This is the filter javascript:
<script>
$(document).ready(function() {
$("input:checkbox").on('click', function () {
var showAll = true;
$('.resuts_show_hide').hide();
$('input[type=checkbox]:checked').each(function () {
showAll = false;
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]").parent().show();
});
if(showAll){
$('.resuts_show_hide').show();
}
});
});
</script>
So i thought lets do this:
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]**:visible**").parent().show();
But that's no option because it will alway hide all rows when a checkbox is clicked but and then shows the matching one. Works fine when one checkgox filter is activated, but when the second filter is activated he should only filter thru the visible ones, but with this javascript thats no option.
Any one has a solution for this so multi filtering is also possible?
Created a fiddle: http://jsfiddle.net/m9jrn5bq/.

How to get row values by selecting checkboxes

In this fiddle each check box is having id and its obtained from the json.There is a drop down also corresponding to each row
now suppose I have selected 1st and last row
then checkboxes values are 1 and 3
when the check box is selected then only the drop down menu will be enabled.
Now from the 1st row ,I have selected the text from the drop down menu and from the last row I have selected option and after that when I click save then it should return me 1:text,3,option so that I will pass it to server and do the necessary processing.The way I did gives me only 1,2
console.log($(".cd:checked").map(function () {return this.value;}).get().join(","));

Based on my understanding of the question, here is a solution. Let me know if it solves the problem.
FIDDLE
$('#addNew tr').each(function(index,element){
if($(this).find('.cd').prop('checked')){
key=$(this).find('.cd').val();
value=$(this).find('.QSelect').val();
newObject.push(key + ":" + value);
}
});
With the Good, Average & Poor checkbox selections. FIDDLE
$('#addNew tr').each(function(index,element){
if($(this).find('.cd').prop('checked')){
key=$(this).find('.cd').val();
value=$(this).find('.QSelect').val();
var options=[];
$(this).find('.checkbox-inline input').each(function(i,e){
if($(this).prop('checked')){
options.push($(this).parents('label').text());
}
});
newObject.push(key + ":" + value + ":" + options.join(','));
}
});

hide div unless associated number field is greater than 0

I have a set of number input fields, labeled small & medium.., and a set of div's with the label small and medium. In my actually project there will be more sizes than just small and medium. When you add a number to the small number input field a text input insertsAfter the div labeled small. When you subtract a number from the small number input field, the text input field that was recently added is removed.
If the small number field is 0, I want
<div class="name-number-field-container" data-size="Small">
to be hidden, if the small number field is greater than 0 I want the
<div class="name-number-field-container" data-size="Small">
to show. Same goes for medium.
http://jsfiddle.net/7PhJZ/62/
i tried:
$(document).ready(function() {
if ($("input.product-quantity").val() === '0') {
$(".name-number-field-container").hide();
}
else {
$(".name-number-field-container").show();
}
});
and...
$(document).ready(function() {
var $input = $("input.product-quantity");
var $field = $(".name-number-field-container");
$field[($input.val() === "0" ? 'hide' : 'show')]();
});

style multiple elements at the same time

i created four drop down select lists in html and dynamically load them from an ajax object. i made it so you could select an item in the select list and an onchange event that ran a javascript function that would get the items respective data and display in a table underneath the select list. there are four of these on the page and so that a person could select four different items and then compare their characteristics. THat all works like a charm, however im using a :hover in css to try and highlight the characteristics of the four products that match the one being hovered upon ie: if you hover over one product name it highlights all the product names. heres the code
function displayStrainInfo(event){
var eventTrigger = event.currentTarget;
Inspection::Ptr inspectionModelvar testOption = document.getElementById(eventTrigger.id);
var selectedIndex = testOption.options[testOption.selectedIndex].index;
//alert(flowerPeriod[0].firstChild.data);
//alert(eventTrigger.id.substr(6,5));
document.getElementById(eventTrigger.id.substr(6,5)).innerHTML = "<table class='strainInfoTable'><tr class='infoRow'><td id='strain_Name'>Strain Name: " + products[selectedIndex - 1].firstChild.data + "</td><td>Strain Genetics: " + genetics[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' colspan='2'>Indica:" + raceIndica[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspSativa: " + raceSativa[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspRuderalis: " + raceRuderalis[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Height: " + height[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Flower Period: " + flowerPeriod[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' id='botom'>Potency: " + potency[selectedIndex - 1].firstChild.data + "</td></tr></table>";
}
the above code is the function that creates the table that displays the choosen products information.
#strain_Name:hover{
padding-top: 20px;
padding-left: 20px;
color: blue;
font-size: 1.25em;
}
above here is the hover css for testing the effect on the name element.
it highlights just fine but it only highlights the element hovered over even though all the tables have the same .class and #id to match. just a newbie so any help would be greatly appreciated.

...even though all the tables have the same .class and #id to match
It sounds like you have duplicate IDs. IDs must be unique.
You can use the class attribute and define a class selector in CSS to match multiple elements and/or use a more elaborate CSS selector.
Simple Example of Using a Class Selector
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>
.foo:hover { background-color: red; }
Example of Using jQuery + Class Selectors
Full working example: http://jsfiddle.net/mSWcw/
$(".parent").hover(
// fired on entry
function(){
var matchingChildren = $(".foo", this); // select all children with the class "foo" within the parent object
matchingChildren.addClass("hovered");
},
// fired on exit
function(){
var matchingChildren = $(".foo", this);
matchingChildren.removeClass("hovered");
}
);​