|
JavaScript - Color Of Text Within Text Box
I have a text box for a search. I have lightened the font color to a shade of grey with a default value describing what the box does. Everything works except the font color does not change to black onfocus, it remains grey.
Html: Code: <!-- Row 3, Col 2 - Search this website --> <td colspan="1"><form action="http://www.google.com/search" target="_blank" method="get" onsubmit="googleSearch(this)"> <input name="q" type="hidden" /> <input name="qfront" type="text" size="20" style="color: #bbbbbb; background-color: #00FF77; text-align: center;" value="Search SA Yorkies" onfocus="Focus(this);" onblur="Blank(this);" /><br /> <img src="site_graphics/powered_google.gif" alt="google pic" width="90" height="25" style="float: left;" /><input type="submit" value="Search" /> </form></td></tr> JavaScript: Code: // If box clicked value within disappears
function Focus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
// If nothing typed and box onblur the default value is restored within
function Blank(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
I have entered a CSS style that when the focus is on the box a blue border shows and am trying to get the text to show black again with the same code as below: Code: input[type="text"]:focus {
border: 2px solid #0000ff;
color: #000000;
}
Any ideas, I want to keep it simple. Similar TutorialsI'm going to try to explain this without sounding like a total idiot. I'm not even sure if this is the language for this. If not and someone could point me in the direction of a better language, please feel free. Lets say I have a word document, somthing.docx. This document includes text of varying colors. What I am trying to figure out is if there is a way of 'detecting' what color each word is. I would like the output be a txt file, which stores the text and description of formatting, which I can easily do myself. I really just have no idea how to figure out what color the text is, programmatically. Thanks for any help, ~Dave i have a javascript running on my web page, however the text in the input field is white, on a white background. making it unreadable. is there a way to change the text color for the script. site can be viewed he www.barren-county.net the script running is the toolbar at the bottom, more specifically the "Connect" app on the right, if you open it you see that the text field is white and text is invisible. here is the code i have: Code: <head>
{S_HEADER_TAGS}
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/style.css" />
<!-- IF S_MAIN_MENU or S_ADMIN_CSSMENU -->
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/cpgmm.css" />
<!-- ENDIF -->
{CSS_IE}
<script src="http://cdn.wibiya.com/Toolbars/dir_0585/Toolbar_585555/Loader_585555.js" type="text/javascript"></script>
</head>
<body>
can you help? here is my problem i need to set the color of a text here is what i need to change Code: <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;"> <font color="lightgreen" size="6"><b>* Mileage *</b></font><b> <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b> <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Engine size *</b></font><b> <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Body style *</b></font><b> <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b> </div> now i need to set the color from a text file server side so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml . now i would like to store the color in a text file color.txt i can make the code to change the txt file myself inside the color.txt would be "lightgreen" or other color how would i go about this. so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html Hi guys, Am creating a web page in which a user searches a customer using customer id. The results are then displayed in a table. This is working fine. In addition to this, I have created another form in which a user enters a value in a textbox. This value is then compared to the results obtained in the previous table.The values below should be shown in green and those above in red (identical values may be shown in amber). This should be acomplished using javascript. My code is as shown below: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Search Script</title> <script type="text/javascript"> function hallo(){ var value1=200 var inputVal = window.document.getElementById("one").value; //alert(negNum); if(inputVal > value1){ window.document.getElementById("color").style.color="red"; } else if(inputVal < value1) { window.document.getElementById("color").style.color="green"; } else if(inputVal == value1) { window.document.getElementById("color").style.color="#FF7E00"; } } </script> </head> <body> <form> Value1: <input type="text" name="one" id="one" ><br/> Value2: <input type="text" name="two" id="two" value="" onClick="hallo();"> <br/> Value3: <input type="text" name="three" id="$cell" value="test data"> </form> <?Php require_once("database.php"); $CustID=$_POST['CustomerID']; $query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID AND c.CustomerID='".$CustID."'"; $result=mysql_query($query) ; //If no matching records are found in the database,the code below will display a customized error message $num=mysql_numrows($result)or die("No Matching Records Found In The Database!"); $fields_num = mysql_num_fields($result); echo "<h3>Historical Meter Readings</h3>"; echo "<table border='0'cellspacing='5' cellpadding='5' id ='three'><tr>"; // printing table headers for($i=0; $i<$fields_num; $i++) { $field = mysql_fetch_field($result); echo "<td >{$field->name}</td>"; } echo "</tr>\n"; // printing table rows while($row = mysql_fetch_row($result)) { echo "<tr id='color'>"; // $row is array... foreach( .. ) puts every element // of $row to $cell variable foreach($row as $cell) echo "<td align='center' <font face='Arial, Helvetica, sans-serif' >$cell</td>"; echo "</tr >\n"; } mysql_free_result($result); ?> </body> </html> Currently my javascript code changes the entire row in the table, which is not I desired. How do I edit this script so that only values in particular CELL in a row e.g CELL 5, is changed and not the entire row? Thank you. Hi, I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way. Thanks! Code: //convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var R = parseInt(digits[2]);
var G = parseInt(digits[3]);
var B = parseInt(digits[4]);
Hex = new Array(R, G, B);
return Hex;
}
// Start the text fading
function FadeStart(id, FadeTo) {
Element = document.getElementById(id);
OriginalColor = getComputedStyle(Element, null).color;
Start = RGBtoHex(FadeTo);
rgb = RGBtoHex(OriginalColor);
red = (Start[0] - rgb[0])/16;
green = (Start[1] - rgb[1])/16;
blue = (Start[2] - rgb[2])/16;
BeginFading = true;
Fade();
}
//Actually do the fading
function Fade() {
var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
rgb[0] += red;
rgb[1] += green;
rgb[2] += blue;
var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
Element.style.color = ChangeColor;
time = setTimeout("Fade()", 500);
}
}
//Return text to original color
function FadeStop() {
BeginFading = false;
clearTimeout(time);
if (Element != null) Element.style.color = OriginalColor;
}
As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
Hi, I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than. Below is my javascript code: Code: <script type="text/javascript">
function hallo(){
var value1=200
var inputVal = window.document.getElementById("one").value;
//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}
</script>
And below is my php script that displays the data in a web table. Code: <body>
<form>
Value1: <input type="text" name="one" id="one" ><br/>
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
<br/>
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];
$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
<th><font face="Arial, Helvetica, sans-serif">Title</font></th>
<th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
<th><font face="Arial, Helvetica, sans-serif">January</font></th>
<th><font face="Arial, Helvetica, sans-serif">February</font></th>
<th><font face="Arial, Helvetica, sans-serif">March</font></th>
<th><font face="Arial, Helvetica, sans-serif">April</font></th>
<th><font face="Arial, Helvetica, sans-serif">May</font></th>
<th><font face="Arial, Helvetica, sans-serif">June</font></th>
</tr>
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
</tr>
<?php
$i++;
}
?>
</body>
As you can see from my javascript, i am getting the elements by id (getElementById("color")). Currently, only the first <td> with id='color' is changing when the value is entered. How do I make the text in other table cells with id='color' change color when the comparison value is entered? Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi, I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql. Here is a summary of the code: Code: <head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block';
}
else{
document.getElementById("textbox").style.display='none';
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block';
}
else{
document.getElementById("textbox1").style.display='none';
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>
<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation
<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>
Any help is appreciated, Thanks in advance! Hello. I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting) I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard. For example: Code: text line one text line two text line three user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'" What would be the approach? Thank you. Hi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! Hello there, this is my first post on this forum. I have learned a good bit of PHP and have implemented it for use in my work as a math tutor. My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper. I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met. For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct. The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically. Code: <SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
Thank you for the help. Hi. I have developed a form all working fine but am struggling on the following. I need a checkbox for an item, when the checkbox is true the user can enter text in a text box, only if the checkbox is ticked. I have numerous items I need for this. Hope someone can help. Thanks im clueless when it comes to javascript, but this is what im trying to find: i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in? The Hyperlinks: Code: <a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a> The textareas: PHP Code: <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> as you can see the textareas are created on the fly based on a php array. would anyone be willing to put some code together for this? or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field? hey im new to javascript and im working in this function , i can't get it work here is my code PHP Code: <SCRIPT LANGUAGE="JavaScript"> function text(form1) { var j = document.form1.diary.value; j = j.italics(); document.form1.diary.value = j ; } </SCRIPT> whats the problem ? Hi, I am wanting to insert text into a text area when a button or link is clicked. I know how to replace the whole lot in the text area, but I want it to insert text where the flashing cursor is in the text box. (Like Wikipedia) If any one can help, Then I will be very, very greatfull. Thank You. |
|||||||