|
JavaScript - Text Colour Change
Hi i am trying to change the colour of the text in my menu bar, i know you can do this with css or jquery but i want to try and do it with javascript in an external script sheet. I want to use the onmouseover and onmouseout functions to change the colours, and i want it so their are different colours for each menu item.
Can anybody help me? Similar TutorialsHi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red. Thanks how to change placeholder text colour in javascript? Code: <script> // this is inside a html form form['height'].placeholder+="enter password"; </script> how do I change the text above from grey to a different colour? Also, how do I check for isnotanumber in a form submission? Code: if(isNaN(form['weight'].value)) {
console.log('use a number');
it still outputs that console.log error!!!!!!!!! How do I do this? I've set up javascript to change the background colour depending on what colour square the user clicks on, this is working fine. However, I want to be able to set an initial colour, other than white, and then let the user chose their own. here is my code so far. <script language="JavaScript"> <!-- function changeBGC(color){ document.bgColor = color; } //--> </script> Then on the buttons: <a href="#" onclick="javascript:changeBGC('#486970')"><img src="images/blueSquare.jpg" alt="a" width="25" border="0" /></a> <a href="#" onclick="javascript:changeBGC('#dd737b')"><img src="images/pinkSquare.jpg" alt="x" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#4f814e')"><img src="images/greenSquare.jpg" alt="cx" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#594b31')"><img src="images/brownSquare.jpg" alt="s" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#ffffff')"><img src="images/whiteSquare.jpg" alt="x" width="25" /></a> I want the page to be initially set to the brown colour, then I want the user to be able to choose their own colour. Thanks for any help. Hi All I'm trying to get a drop down box to change the colour of more than 1 td cell at a time. I can get the boxes to work with single cells but not more than one. I've tried giving the additional cell the same id but that doen't seem to work It's probably simple but I just can't seem to see it. Thanks in anticipation. Mike http://www.blandfordsac.co.uk/ Code: <script type="text/javascript">function changeColor(bg) {document.getElementById("a").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorb(bg) {document.getElementById("b").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorc(bg) {document.getElementById("c").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColord(bg) {document.getElementById("d").style.backgroundColor = bg;}</script>
Code: <tr><!-- row 1 --> <td id="a" height="205" width="345"><p align="center"> <a href="images/bd8/bd8n.jpg" target="_self" rel="wplightbox~#~~#~"> <img src="images/bd8/bd8n%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8n.jpg"> </a> </td> <td height="205" width="246" colspan="3"><h1 align="center"><span style="font-weight: 400"><font face="Arial">Bd 8</font></span></h1></td> <td id="b" height="205"><p align="center"> <a href="images/bd8/bd8e.jpg" target="_self" rel="wplightbox~#~~#~"> <img src="images/bd8/bd8e%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8e.jpg"> </a> </td> </tr> <tr><!-- row 2 --> <td> <p align="center"> <select name="level" onChange="changeColor(value)"> <option value="">Choose</option> <option value="#FFFFFF">White</option> <option value="#33FF00">Green</option> <option value="#000000">Black</option> <option value="#FF0000">Red</option> </select> </td> <td height="59" width="246" colspan="3"> </td> <td> <p align="center"> <select name="level" onChange="changeColorb(value)"> <option value="">Choose</option> <option value="#FFFFFF">White</option> <option value="#33FF00">Green</option> <option value="#000000">Black</option> <option value="#FF0000">Red</option> </select> </td> </tr> Hi, I have 3 sum fields which I want to change to a red colour if the value is > or < 100. Apparently this is a DAP, but I am using javascript to tweek some of the settings in DAP. function subtotal() if(document.getElementById("Sum1").value>100&&<100) { this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: red' { else this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966' </SCRIPT> <SPAN class=MSTheme-Label id="Sum1_Label" style="Z-INDEX: 1; LEFT: 0.25in; OVERFLOW: hidden; WIDTH: 0.711in; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.161in">Totals:</SPAN><SPAN class=MsoBoundSpan id="Sum1" onmouseover="subtotal()" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 5.416in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 1</SPAN><SPAN class=MsoBoundSpan id="Sum2" onmouseover="subtotal()" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 2</SPAN><SPAN class=MsoBoundSpan id="Sum3" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 7.917in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 3</SPAN></DIV> I'm a noobie at coding, and I was wondeirng if anyone can help me with the coding. Many Thanks Hi Guys, I have a little question... I know that adding Code: onclick="document.body.style.backgroundColor='#F3B90C'; to a div will change the body background colour to the above colour.. But what I was wondering was this.. Is it possible, instead of adding the code to the actaul div itself to pass the function like this... Code: <script type="text/javascript">
$("Object").click(function(){
document.body.style.backgroundColor = "#000000";
});
</script>
Any help/info is appreciated Kind regards, paffley I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/ I have also tried to use javascript to change a picture depending on the time of day, this is what I have used. IN THE <head> Code: <script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script><script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script>
IN THE <body> Code: <div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
<script type="text/javascript">
if (sun()) {
document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
} else {
document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
}
</script>
</div>
Hi, Sorry to bother you all with this but I'm really new to JavaScript and can't figure this out but I'm sure it's probably quite simple for you guys. I've been using this bit of code to limit the number of characters in a text field (taken from http://www.shiningstar.net/articles/...reacounter.asp: Code: <SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<form name="myForm"
action="/articles/articles/javascript/dynamictextareacounter.asp?ID=<%=siteID%>"
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>
<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>
What I'd like to do is make the background colour and maybe the font colour change on the 'characters left' field depending on the value of that field. So most of the time the colour is green but when the field = 0, the background colour changes to red. Can I just add to the function above or will I need a new one? If anyone could help, that would be great Cheers Dear All, I have tried to change the text colour and size but with no successful. I have two files. (a) Test.html (b) marquee.js Any advise is highly appreciated. (a) Test.html code is stated as below : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head><script type="text/javascript" src="marquee.js"></script> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" > <title>Test</title> </head> <center> <body bgcolor="#fffff"><div id="fade_base" style="BORDER-RIGHT: 0px dotted; PADDING-RIGHT: 0px; BORDER-TOP: black 0px dotted; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: black 0px dotted; WIDTH: 250px; LINE-HEIGHT: 1.8em; PADDING-TOP: 5px; BORDER-BOTTOM: black 0px dotted; HEIGHT: 60px"> <br> <strong><em><a id="fade_link"></a></em></strong> </div> </center> </body> </html> (b) marquee.js file is stated as below function setupFadeLinks() { arrFadeLinks[0] = ""; arrFadeTitles[0] = "..Business Presentation..."; arrFadeLinks[1] = ""; arrFadeTitles[1] = "..Art of Public Speaking..."; arrFadeLinks[2] = ""; arrFadeTitles[2] = "...Business Meeting..."; arrFadeLinks[3] = ""; arrFadeTitles[3] = "..Increase Confidence..."; arrFadeLinks[4] = ""; arrFadeTitles[4] = "...Workshop..."; } // You can also play with these variables to control fade speed, fade color, and how fast the colors jump. var m_FadeOut = 255; var m_FadeIn=0; var m_Fade = 0; var m_FadeStep = 3; var m_FadeWait = 1600; var m_bFadeOut = true; var m_iFadeInterval; window.onload = Fadewl; var arrFadeLinks; var arrFadeTitles; var arrFadeCursor = 0; var arrFadeMax; function Fadewl() { m_iFadeInterval = setInterval(fade_ontimer, 10); arrFadeLinks = new Array(); arrFadeTitles = new Array(); setupFadeLinks(); arrFadeMax = arrFadeLinks.length-1; setFadeLink(); } function setFadeLink() { var ilink = document.getElementById("fade_link"); ilink.innerHTML = arrFadeTitles[arrFadeCursor]; } function fade_ontimer() { if (m_bFadeOut) { m_Fade+=m_FadeStep; if (m_Fade>m_FadeOut) { arrFadeCursor++; if (arrFadeCursor>arrFadeMax) arrFadeCursor=0; setFadeLink(); m_bFadeOut = false; } } else { m_Fade-=m_FadeStep; if (m_Fade<m_FadeIn) { clearInterval(m_iFadeInterval); setTimeout(Faderesume, m_FadeWait); m_bFadeOut=true; } } var ilink = document.getElementById("fade_link"); if ((m_Fade<m_FadeOut)&&(m_Fade>m_FadeIn)) ilink.style.color = "#" + ToHex(m_Fade); } function Faderesume() { m_iFadeInterval = setInterval(fade_ontimer, 10); } function ToHex(strValue) { try { var result= (parseInt(strValue).toString(16)); while (result.length !=2) result= ("0" +result); result = result + result + result; return result.toUpperCase(); } catch(e) { } } Best Regards Hexian OK right I got a modification from here that someone requested a few weeks ago. It was supposed to replace text in the userlinks. Since I'm in IPB I find it very useful. But here's the thing I try to replace "0 New Messages" to "Inbox[0]" it worked but when I get new PM's it doesn't work like it should. So I rearranged the code but it doesn't work Code: var mb = document.getElementById("userlinks").getElementsByTagName("a");
for(bm = 0;bm < mb.length;bm++){
if(mb[bm].innerHTML=="My Controls"){mb[bm].innerHTML="Preferences"}
for(fi=0;fi < mb[bm].innerHTML.length;fi++){
if(fi[mb['bm']].innerHTML==""+fi+" New Messages"){fi[mb[bm]].innerHTML="Inbox "+fi+""}
}
}
^^ My part there in the code is retarded lol I am trying to learn SVG and I have alot of the basics including javascript manipulation. But I am really stuck on trying to manipulate the actual text itself. Code: <text id="text1" x="300" y="200" font-size="60" font-family="tempus sans itc" stroke="red" stroke-width="2" onmouseover="changeText()"> OMG </text> I am trying to change the text "OMG" to say something else when you hover over it. For example: It says OMG, I want to hover over the text and have it change to WTF. Like you could do with innerHTML. anybody have any experience with SVG that cuold help me? Im new to this forum and was wondering if anyone would mind helping me out. Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english. heres the code <code> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .hide { display:none; } .show { display:inline; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener('load',showlinks,false); } else { if(window.attachEvent){ window.attachEvent('onload',showlinks); } } function showlinks() { lis=document.getElementById('nav').getElementsByTagName('li'); for(c=0;c<lis.length;c++){ lis[c].onmouseover=function() { this.getElementsByTagName('span')[0].className='hide'; this.getElementsByTagName('span')[1].className='show'; } lis[c].onmouseout=function() { this.getElementsByTagName('span')[0].className='show'; this.getElementsByTagName('span')[1].className='hide'; } } } </script> </head> <body> <ul id="nav"> <li> <span>[Closed]</span> <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.google.com/">google.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://w3c.org/">w3c.org</a></span> </li> </ul> </body> </html> </code> As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages. Code: function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}
This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text. It's a bit ostentacious as it is.. I would appreciate any pointers. Site is here. Thank you. Hi all, Hope you can help with the following. I'm trying to change the contents of DIV2 when I click on DIV1. The following code doesn't work for some reason. I'm using Windows 7 (64-bit), and testing on Firefox 3.6.8 and IE8. Code: <html>
<head>
<script type="text/javascript" language="javascript">
function test() {
document.getElementById("test2").innerHMTL="hello";
}
</script>
</head>
<body>
<div id="test1" style="border: 1px solid #ff0000; width: 200px; height: 100px;" onclick="test();">Test Box 1</div>
<div id="test2" style="border: 1px solid #ff0000; width: 200px; height: 100px;">Test Box 2</div>
</body>
</html>
Any help appreciated, Cheers Sean hi i wants to change one input to texarea when i select one from radio, plz any suggestion how i would do that? my code PHP Code: <input type="text" name="other" value="this need to become textarea" /> <input type="radio" name="inputtext" />Text <input type="radio" name="inputtext" />Textarea so when i click inputtext radio name"other" will become a textrea rather then input type text. thanks for any help. Hello, I'm trying to put a site together and this time I'm going for an interactive feel. Code: <p id="status">[Closed]</p> Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into Code: <a href="index.php">Open</a> but I can't get this figured. Could someone help me? Thnx! 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 I would like to have a text link do 2 things: 1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value;
var allElements = document.form1.product;
var len=allElements.length;
if(allElements.length){
for (i = 0; i < len; i++){
allElements[i].value = price;
}
I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help |
|||||||