|
JavaScript - Javascript, Css, Textarea Color
I'm not 100% sure if this can be done (I haven't been particularly successful in my Google searches).
I'm using Javascript and forms to create conditional information randomizers for data. An example might be "What should you have to eat?" The person can generate a random result or select restrictions (selecting an allergy to X would eliminate X-related results). I prefer to work with black backgrounds. Even if I end up changing a default site layout to non-black (for audience purposes), I'd want a personalized CSS for myself. I'm running into some difficulty determining how to make my textarea black. Is there a way to apply CSS to textarea boxes (including those related to javascript?) Ideally, I'd like to be able to automatically style every textarea but if that is not possible in relation to javascript, I'd settle for changing the code for individual boxes. I was unsure where to place this topic so feel free to move it if it's better suited for CSS. Thanks *** I figured I didn't need to bump my post needlessly, but Thanks to "devnull69" as the provided solution worked. For some reason, I was confused about how to type that operation in css properly. That's probably one of the problems that arises when one combines staying up late with learning multiple programming languages at the same time. All is well now. Similar TutorialsHello I want to html text to show diffrent color, if date in list is in the past. shoud this even work ? am i hopeless? Code: <script type="text/javascript">
var day = d.getDay();
var event = this.document.getElementById('list');
if ('day' < 'event')
{
document.getElementById('list').style.color = '#DB35B0'
}
</script>
<ul>
<li id ="list">26/02/12 Some happening here</li>
<li id ="list">27/02/12 Some happening here</li>
<li id ="list">28/02/12 Some happening here</li>
</ul>
I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst hi i am new to javascript. i want to make a form where a textarea, some buttons like bold,italic,link etc will be availablw. when user selecet some text from textarea and click bold button then one openig and closing tag will be added like this [sb]abc[/sb] how can i do this using javascript. any idea? pls. help Hello, I'm trying to create a textarea using Javascript, the function creates a textarea in IE, but it does not create that element in Firefox and chrome. JavaScript Code:- Code: function addRow()
{
alert("function start");
var table = document.getElementById('tableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var textNode = document.createTextNode(rowCount + 1);
cell1.appendChild(textNode);
var cell2 = row.insertCell(1);
var textArea = zxcFormField('TEXTAREA','option1');
textArea.setAttribute("cols","20");
textArea.style.height = "42px";
textArea.style.width = "496px";
cell2.appendChild(textArea);
alert("function end");
}
function zxcFormField(tag,nme,type){
alert("2 function start");
var el;
try {
alert("In Try");
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
alert("In Catch");
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}
When I call this function it goes in the catch block in Firefox and Chrome, the textarea is displayed and it disappears with a flash. I've banged my head against wall trying to figure this out. Thanks, Abhishek I am looking for a javascript that when a image is clicked on it clears a textarea
Hi I'm looking for ways to limit the textarea input, I dont want people to enter hundreds of lines cause, i only want them to enter max. 10 lines. I've looked at several javascripts (cause the problem only can be solved by javascript), and came up with this script: http://javascript.internet.com/forms...-textarea.html . It works great and even has a counter how many characters are left to type in. However when I copy paste something, the 'counter' doesnt adjust right away...it does when I try to type in something extra though. Is it possible to make the counter adjust automaticly whenever there is pasted ? I guess you guys have to test to see what I mean. Thanks in advance !! I found and am using the following script to add checkbox values to a textarea. Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value;
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>
<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
</textarea><br>
<input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob"><p></label><br>
<input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1"><span></label><br>
<input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2"><div></label>
That is working. However, I wanted to put carriage returns after each checkbox value added, so I added the + "\r\n" as follows: Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value + "\r\n";
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
That is working when adding the value, but removing the value when the checkbox is unchecked is not working. I know the regular expression, etc. needs to be updated to account for the carriage returns, but I have tried everything I can think of and cannot get it to work. Help correcting the code is appreciated. I am trying to create a sample form using javascript. The form has a series of option and a submit button followed by a textarea. When the user clicks the submit button the textarea should be filled with the selected information from the form. I cannot get the textarea to fill with text. I believe the problem lies in the fact that when I submit the form the page refreshes, but I am not sure if that's the case. With this version of the code I actually can't get passed the Room Type. It always says No Room Type selected. Here is my code: 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>Form Sample</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function checkForm(myForm)
{
regexp = /^\d\d\/\d\d\/\d{4}$/;
numReg = /^\d*$/;
str = "";
for (i = 0; i < 5; i++)
{
if (!myForm.roomType[i].checked)
{
alert("No Room Type Selected!\nPlease Select Room Type!");
return;
}
str += "Room Type: ";
str += myForm.roomType[i].value + "\n"
}
str += "Activities: \n";
for (i = 0; i < 4; i++)
{
if (!myForm.activity[i].checked)
{
alert("No Activities Selected!\n Please Select Activities!");
return;
}
str += "\t" + myForm.activity[i].value + "\n";
}
if (myForm.hotels.selectedIndex+1 < 1)
{
alert("No Hotel Selected!\n Please Select a Hotel!");
return;
}
else
{
str += "Hotel: ";
for (var i = 0; i < myForm.hotels.length; i++)
{
if (myForm.hotels[i].selected)
{
str += myForm.hotels[i].value + "\n";
}
}
}
if ( myForm.confname.value == "" || myForm.confname.value == null)
{
alert("No Conference Name Entered! Please Enter a Conference Name!");
return;
}
else
{
str += "Conference Name: " + myForm.confname.value + "\n";
}
if (!regexp.test(myForm.date.value))
{
alert("Invalid Date");
return;
}
else
{
str += "Date: " + myForm.date.value + "\n";
}
if (!numReg.test(myForm.zip.value))
{
alert("Invalid Zip Code");
return;
}
else
{
str += "Zip Code: " + myForm.zip,value + "\n";
}
myForm.info.value = str;
}
</script>
</head>
<body>
<h1>Host your Conference!</h1>
<form name="conference" method="post" onsubmit="checkForm(this); return false;" action="#">
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Room Type Type:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="radio" name="roomType" value="Large Meeting Room" />Large Meeting Room<br />
<input type="radio" name="roomType" value="Small Meeting Room" />Small Meeting Room<br />
<input type="radio" name="roomType" value="Video Conference Room" />Video Conference Room<br />
<input type="radio" name="roomType" value="Theater Lecture Hall" />Theatre Lecture Hall<br />
<input type="radio" name="roomType" value="Convention Center" />Convention Center<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Activities:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="checkbox" name="activity" value="Swimming" />Swimming<br />
<input type="checkbox" name="activity" value="lecture" />Lecture<br />
<input type="checkbox" name="activity" value="Golf" />Golf (Gentlemen Only Ladies Forbidden)<br />
<input type="checkbox" name="activity" value="Tour of the Facilities" />Tour of the Facilities<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Hotel:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<select name="hotels" size="4">
<option name="marriott" value="Marriot">Marriott</option>
<option name="doubleTree" value="Double Tree">Double Tree</option>
<option name="comfortSuites" value="Comfort Suites">Comfort Suites</option>
<option name="sheraton" value="Sheraton">Sheraton</option>
</select>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Confence Name:
<input type="text" name="confname" size="60" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Zip Code:
<input type="text" name="zip" size="12" value="Enter Zip Code"/>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Date:
<input type="text" name="date" size="10" value="mm/dd/yyyy" />
</div>
<br />
<div>
<input name="confSubmit" type="submit" style="background:#CCCCCC !important; color:#333333 !important;"
value="It's Conference Time!" />
<input name="confReset" type="reset" style="background:#CCCCCC !important; color:#333333 !important;"
value="Reset Form" onclick="javascript:return checkForm(this.form);" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Print This:
<textarea type="text" name="info" size="1200" style="vertical-align:text-top; height:175px; width:325px;">
</textarea>
</div>
</form>
</body>
</html>
And here is a link to the page: Form Sample I've done a bit of searching and I can't find the answer to my question. I'm working on a website for my business. I have some basic knowledge of coding but I'm mostly a code cobbler. I find various pieces and put it together and hope it works so take it easy on me. I have some code to display products on my site. It works fine. We just have a lot of products and for me to add each one by hand was getting ridiculous. I finally had the bright idea to use Javascript to generate the code for me and then copy it back into my actual HTML page. Last night I wrote the code below. It works perfectly except I have to constantly "View Source" in order to get the code. I was hoping to cut down on a step or two and have the code go into a TextArea. From there I can just select it and copy it into the HTML file. It should make things a little quicker and most importantly easier. Maybe after that I'll try to figure out how to write function to select everything in the TextArea and copy it to my clipboard. That would make things even faster. Any help? 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">
function calc (form) {
var images = form.images.value;
var imagesArray = images.split("\n");
var linebreak = "<br />";
var i=0;
var j=0;
var a=0;
while(i < imagesArray.length)
{
if(j==0)
{
document.write (" <!-- -------------------------------------------- -->\n");
document.write (" <div id=\"cols3-top\"></div>\n");
document.write (" <div id=\"cols3\" class=\"box\">\n");
}
a++;
if(j/2!=1)
{
if(a==imagesArray.length)
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
break;
}
else
{
document.write ("\n <!-- ---------------- -->\n");
document.write (" <div class=\"col\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
i++;
j++;
}
}
else
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
i++;
j=0;
}
}
document.close();
}
</script>
</head>
<body>
<div style="width:960px; margin:0 auto;">
<form name="myform" method="get" action="">
<textarea label="Image Names:"name="images" cols="30" rows="15" onclick="this.value=''" ></textarea>
<p>
<label>
<input type="button" name="calculate" value="Calculate" onClick="calc(this.form)"/>
</label>
</p>
</form>
</div>
</body>
</html>
I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item Hi, Looking for some help with something, I have a table with 20 columns, Im looking to color code column 7,8,9,10,11,12. all of the data is numeric. Here is how they should be colored. column 7 (column header name is test7) if >50 should be red if 41-50 should be yellow if <=40 should be green column 8 (column header name is test8) > 40 should be red 32-40 should be yellow <=31 should be green this is similiar for other colums, if someone could help with this one I could figure out rest. thanks jay when creating a button with javascript, is it possible to change the blue color when you mouse over it? I know its a stupid question but I am curious... I'm new to this javascript stuff..
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 i have an requirement i.e., i need to allow user to select one of color from color pallet and i need to store that color code value in database, how can i do this I am using jsp and js and 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. Hello Everyone, I'm new to JavaScript and I need some help, What I'm trying to do is type a background color for the content area of a table by using the prompt box. This is the code I had but it didn't work: <html> <head><title>Practice</title> <script type="text/javascript"> //content color var table = prompt("Choose a color for the content area", "white "); document.write("<table BGCOLOR=" + table + " >"); </script> </head> <body bgcolor="black"> <table bgcolor="" width="600px" height="600px" cellpadding="15" border="0" align="center"> <!-- ============ HEADER ============== --> <tr> <td height="35px" colspan="2" align="center"><p align="center"><a href="http://www.youtube.com/">YouTube</a> | <a href="http://www.facebook.com/">Facebook</a> | <a href="http://www.twitter.com/">Twitter</a> | <a </td></tr> <!-- ============ LEFT COLUMN (CONTENT) ============== --> <tr> <td rowspan="6" width="500" valign="top"><td></tr> <input type="file" onclick="disp_prompt()" value="Display a prompt box" /> <script type="text/javascript"> var <!-- ============ RIGHT COLUMN ============== --> <tr><td width="174px" valign="top"> </td></tr> <!-- ============ FOTTER ============== --> <tr> <td height="35px" colspan="2" align="center"> </td></tr> </body> </html> Here's the code a friend gave me but it didn't work either: <script type="text/javascript"> var contentbg = prompt("What background color would you like your content to be?", "White"); document.write("<table align=\"center\" border=\"1\" cellpadding=\"15\" width=\"600\" height=\"600\" bgcolor=\"" + contentbg + "\">"); </script> Please! help me out. Thanks. Hey guys, I have been trying to get better at my javascript as of late and there is this one particular color fading technique I have found that I am having trouble dissecting. The following code appears to be how they are making a rollover go from a dark gray to a subtle light gray with a nice fade but I can't exactly tell whats going on from the code. Is it just telling it to add a rgb point in so many seconds? Any professional help would be greatly appreciated. Code: colorInit=
true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],0),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],0),255),0)+")"}});
|
|||||||