Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by isnoend2001
at 2024-07-12 08:28:27
ModifyPoint:500 Replies:13 POST_ID:828965USER_ID:11865
Topic:
jQuery;;
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 ?
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 ?
Author: isnoend2001 replied at 2024-07-12 20:07:38
Thank you that fixed it
http://roofgenius.com/test1.asp
I am going to ask another adjustment question, hope you answer
http://roofgenius.com/test1.asp
I am going to ask another adjustment question, hope you answer
Accepted Solution
Expert: Scott Fell (padas) replied at 2024-07-12 19:55:04
500 points EXCELLENT
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;
inVal=inVal==Int(inVal)?Int(inVal):inVal;
by adding some slashes in front
// inVal=inVal==Int(inVal)?Int(inVal):inVal;
Author: isnoend2001 replied at 2024-07-12 19:49:52
whoops thats
http://roofgenius.com/test1.asp
http://roofgenius.com/test1.asp
Author: isnoend2001 replied at 2024-07-12 19:46:34
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
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
Author: isnoend2001 replied at 2024-07-12 10:33:04
Before I get to changing the label colors i want to make sure the page layout problems are corrected.
Expert: Scott Fell (padas) replied at 2024-07-12 10:27:12
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.
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.
Author: isnoend2001 replied at 2024-07-12 10:12:53
i see i have a lot to fix
does the css get entered before the mtea tags ?
does the css get entered before the mtea tags ?
Expert: Scott Fell (padas) replied at 2024-07-12 09:56:32
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> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:
Expert: Scott Fell (padas) replied at 2024-07-12 09:55:01
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> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:
Author: isnoend2001 replied at 2024-07-12 09:38:11
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
the styles moved
http://roofgenius.com/test10.asp
Expert: Scott Fell (padas) replied at 2024-07-12 09:26:36
>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
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 } } }); 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:
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
Expert: Scott Fell (padas) replied at 2024-07-12 09:21:51
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
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'); 1:2:3:4:
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 1:2:3:4:5:6:
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);" } 1:2:3:4:5:6:
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 1:2:3:
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 } } 1:2:3:4:5:6:7:8:9:
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.
Expert: duncanb7 replied at 2024-07-12 09:16:15
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
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');}});}); 1:2:3:4:5:6:7:8:9:
