• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 255
  • Last Modified:

How to change the color of text defined in a class

on this page
http://roofgenius.com/test9.asp
i have this class
.Require{
font-size:80%;
color: #FF0000; //red text
      }
i want to change the color of text to black when conditions are met
line 356 under textbox change text to black when numbers entered is 100 and 100,000
<div class="Require">* Required</div></div>

line 382 under combo box change text to black when combobox text is not Select Pitch
<div class="Require">* Required</div>
how can this be done ?
0
isnoend2001
Asked:
isnoend2001
  • 6
  • 6
1 Solution
 
duncanb7Commented:
Is color changed to black if number enter is 100 and 100,000 or  ( 100 or 100,000)?

Hope understand your question.If not , please point it out

Duncan
$(document).ready(function() {
	$('.Require').keydown(function() {
		var num=$(".Require").text();

		if (event.keyCode == 13 && (num==100 || num==100000)) {
$(".Require").css("color",'black');
}
});
});

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
1) Move style/css above js

2) Change labels where you have class="Require" to below.  Notice I removed the class and added an ID
<div id="measureLabel">* Required</div></div><!--leftcolumn-->
<div id="selectPitchLabel">* Required</div>

3) At the start of the main function, set the two new div's to "Required" via jquery
$(function () { //WAIT UNTIL THE PAGE LOADS
   //RESET LABEL
    $('#measureLabel').addClass('Require');
    $('#selectPitchLabel').addClass('Require');

Open in new window


4) Reset label on change of dropdown
  // CHECK FOR A CHANGE IN THE DROP DOWN MENU
     $('#selectPitch').change(function () {
       
       $('#selectPitchLabel').addClass('Require'); // RESET LABEL
         var roofAreaVal = $(this).val();  // GET VALUE OF DROPDOWN
    

Open in new window

   

5) Change below comparison from !== to !=
 if (roofAreaVal !== 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN
to
 if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN

6) set selectPitchLabel ID to remove the 'Require' class turning it black
if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN
            
             calc(roofAreaVal);  // RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             $('#selectPitchLabel').removeClass('Require');
             $('#roofMesg').val('Roof ' + newAreaTxt + ' added ' + roofAreaVal);
         }

Open in new window


7) In the measurement label, reset to add the 'Require' class on change
   
 
$('#in').change(function () {  // DETECT CHANGE IN THE TEXT FIELD
     $('#measureLabel').addClass('Require'); //   RESET LABEL

Open in new window

 
8) When we have a good value in the measurement text field, remove the the 'Require' class
if (inVal <= 0) {  //IF IT IS NUMERIC, CHECK THAT THE NUMBER IS GREATER THAN 0

                 clearFields();  // IF NOT, CLEAR THE FIELDS 
                 alert('Please enter a positive number greater than zero');  // AND SEND THE ALERT
             } else {
                   $('#measureLabel').removeClass('Require'); // CHANGE LABEL FROM RED TO BLACK
                 calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             }
         }

Open in new window

You can see a working sample of this with the changes I made.  The sample on jsbin will not load your main css  http://jsbin.com/hagiy/1/edit

Notice that the red text gets bigger. I would suggest adding a css class were you set the font size only then add that class via the html to those two labels.  Then in your required class, you can remove the font size and just keep the color.

fyi, I commented out that added function for 'int' giving the error because I don't know what that is.  If you can explain what you format is wrong in the output we can make a proper adjustment.
0
 
Scott Fell, EE MVEDeveloperCommented:
>line 356 under textbox change text to black when numbers entered is 100 and 100,000

Duncan has a good idea. However, instead of adding on additional functions, I think it is best to keep it in the logic of the original js.  My sample did not check for the range, but if it is out of range, that should perhaps throw another alert.

And a function that detects a range, should really go in this bit of code
$('#in').change(function () {  // DETECT CHANGE IN THE TEXT FIELD
        
         roofAreaVal = $('#selectPitch option:selected').val(); // GET THE VALUE OF THE SELECT MENU
         var inVal = parseFloat($('#in').val());   // CONVERT THE VALUE OF THE TEXT BOX TO A FLOAT NUMBER
         inVal = inVal.toFixed(1); // USE ONLY ONE DECIMAL PLACE FOR THE  VALUE
         inVal=inVal==Int(inVal)?Int(inVal):inVal;
         $('#in').val(inVal); // SEND THE NEW NUMBER BACK TO THE FIELD TO VISUALLY SHOW THE CONVERSION
         if (!$.isNumeric(inVal)) { // DETECT IF OUR NUMBER IS NUMERIC

             clearFields(); // IF NOT NUMERIC, RUN THE CLEAR FIELDS FUNCTION (SET EVERYTHING TO BLANK)
             alert('Please enter a valid number'); //ALSO SEND AN ALERT
         } else {
             if (inVal <= 0) {  //IF IT IS NUMERIC, CHECK THAT THE NUMBER IS GREATER THAN 0

                 clearFields();  // IF NOT, CLEAR THE FIELDS 
                 alert('Please enter a positive number greater than zero');  // AND SEND THE ALERT
             } else {

                 calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             }
         }
     });

Open in new window

Where we have
calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS
Right before that line is a good spot to check if the number is in range
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
isnoend2001Author Commented:
I must be doing something wrong, but when i move the styles above the functions the styles no longer work

the styles moved
http://roofgenius.com/test10.asp
0
 
Scott Fell, EE MVEDeveloperCommented:
Things are still a bit messed up on your page.  See if this primer helps understand http://jsbin.com/wuyizu/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  
  <!-- ADD CSS HERE -->
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <!-- LOAD CSS IN ORDER OF IMPORTANCE.  MOST IMPORTANT AT THE BOTTOM -->
  <style>
    .someClass{
      color:red;
      font-size:14px;
    }
    </style>
  <!-- ADD JS HERE -->
  <!-- KEEP DEPENDENT SCRIPS BELOW THEIR PARENT-->
  <script>
    // below WILL NOT work because it is loaded BEFORE jquery
    $(function(){
    $('div#test').addClass('someClass');
    });
    </script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
   <script>
    // below WILL work because it is loaded AFTER jquery
     $(function(){
    $('div#test_two').addClass('someClass');
     });  
    </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <div id="test">I am black</div>
  <div id="test_two">I am red</div>
</body>
</html>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
To better show css, adding the same class twice. The last one wins. (red)

<!DOCTYPE html>
<html>
<head>
  
  <!-- ADD CSS HERE -->
  <style>
    .someClass{
      color:black;
      font-size:14px;
    }
    </style>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <!-- LOAD CSS IN ORDER OF IMPORTANCE.  MOST IMPORTANT AT THE BOTTOM -->
  <style>
    .someClass{
      color:red;
      font-size:14px;
    }
    </style>
  <!-- ADD JS HERE -->
  <!-- KEEP DEPENDENT SCRIPS BELOW THEIR PARENT-->
  <script>
    // below WILL NOT work because it is loaded BEFORE jquery
    $(function(){
    $('div#test').addClass('someClass');
    });
    </script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
   <script>
    // below WILL work because it is loaded AFTER jquery
     $(function(){
    $('div#test_two').addClass('someClass');
     });  
    </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <div id="test">I am black</div>
  <div id="test_two">I am red</div>
</body>
</html>

Open in new window

0
 
isnoend2001Author Commented:
i see i have a lot to fix
does the css get entered before the mtea tags ?
0
 
Scott Fell, EE MVEDeveloperCommented:
The css and js are in the head section.  Where you put the meta tags does not matter.  Just be consistent.  

Some people will put all of their js just above the closing </body> tag.   There are arguments for and against either way.  Again, just be consistent.
0
 
isnoend2001Author Commented:
Before I get to changing the label colors i want to make sure the page layout problems are corrected.
0
 
isnoend2001Author Commented:
I think i got the laid out correctly with the function clearFields moved to the head and working
Re: the * Required red-black labels
the one under the textbox does not work only the one under the combo
I thought i had followed you step by step, but was unsure of some code placement
Could you look ?
http://roofgenius.com/test2.asp
0
 
isnoend2001Author Commented:
0
 
Scott Fell, EE MVEDeveloperCommented:
Try commenting out this line
  inVal=inVal==Int(inVal)?Int(inVal):inVal;

by adding some slashes in front

//  inVal=inVal==Int(inVal)?Int(inVal):inVal;
0
 
isnoend2001Author Commented:
Thank you that fixed it
http://roofgenius.com/test1.asp
I am going to ask another adjustment question, hope you answer
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now