JavaScript - Changing Colour On Click
How come this isn't working?
document.getElementById('glance').style.display='block'.color='gold'; Similar TutorialsHow 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. I have a JS that works, but only on the first Dynamically created check box and once the colour has chaned it wont change back when clicked again Please inspect my code to see exactly what I mean ... Code: <?php function create_time_range($start, $end, $by='30 mins') { $start_time = strtotime($start); $end_time = strtotime($end); $times = array(); for ( ;$start_time < $end_time; ) { $times[] = $start_time; $start_time = strtotime('+'.$by, $start_time); } $times[] = $start_time; return $times; } // create array of time ranges $times = create_time_range('0:00', '23:00', '1 hour'); // $times = create_time_range('9:30am', '5:30pm', '30 mins'); // format the unix timestamps foreach ($times as $key => $time) { $times[$key] = date('H:i', $time); } //print '<pre>'. print_r($times, true).'</pre>'; $days = array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', ); $s_day = array( 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', ); ?> <!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>Untitled Document</title> <style type="text/css"> legend{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } fieldset{ width:300px; height:auto; } label{ font-family:Arial, Helvetica, sans-serif; font-size:9px; display:inline-table; width:50px; } .short{ font-family:Arial, Helvetica, sans-serif; font-size:9px; display:inline-table; width:15px; } .on_lbl{ font-family:Arial, Helvetica, sans-serif; font-size:9px; display:inline-table; width:100px; } #myfield{ display: none; } #Toptions{ } </style> <script type="text/javascript"> function disshow(num) { var dayname = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); document.getElementById('legend').innerHTML = dayname[num]; document.getElementById('myfield').style.display = 'block'; } /* Color Changes*/ function changeColour () { if (document.getElementById('Toptions').style.backgroundColor=='green') { document.getElementById('Toptions').style.backgroundColor='red' } else if (document.getElementById('Toptions').style.backgroundColor=='red') { document.getElementById('Toptions').style.backgroundColor=='green' } } </script> </head> <body> <?php // Days Active echo("<form method=\"POST\">"); echo("<fieldset><legend>Days Active</legend>"); for ($i=0; $i<sizeof($days); $i++){ echo("<div class=\"on_lbl\"> <input type=\"checkbox\" name=\"dayOption\" value=\"" . $i . "\" id=\"option" . $i . "\"> <label for=\"option" . $i . "\">" . $days[$i] . "</label> </div>"); } echo ("</fieldset>"); // Select Days for Schedule echo ("<fieldset><legend>Schedule Times</legend>"); for ($i=0; $i<sizeof($s_day); $i++) { echo("<input type=\"radio\" name=\"sdayOption\" value=\"" . $i . "\" id=\"opt" . $i . " \" onclick=\"disshow('$i')\"> <label class=\"short\">$s_day[$i]</label>"); } echo("</fieldset>"); // Day: Schedule show Hours echo "<div id=\"myfield\">"; echo("<fieldset><legend id=\"legend\">day</legend>"); for ($i=0; $i<sizeof($times); $i++) { echo("<span id=\"Toptions\" style=\"background-color:green;\"><input type=\"checkbox\" name=\"timeOption\" checked=\"checked\" value=\"" . $i . "\" id=\"Toption" . $i . "\" onClick=\"changeColour()\"> <label for=\"timeOption" . $i . "\">" . $times[$i] . "</label></span>"); } //<input type=\"submit\" value=\"Save\"> echo ("</fieldset>"); echo ("<input type=\"submit\" value=\"Update\"><input type=\"submit\" value=\"Check All\"></form>"); echo "</div>"; ?> </body> </html> I am at my wits end and have spent over 2 hours looking into this... Hi, I used this on-click changeable background code for my website: http://www.codingforums.com/showthread.php?t=136821 And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files? website is: http://mintymix.com/ I hope it's ok to post here, the other thread is from 2008. Thanks for reading =) *edit* Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this? Hello, I am making a website with 4 frames lined up vertically. Frame 1 (from the left) is the menuFrame, Frame 2 (mainFrame) is a frame with subcategories/information, Frame 3 (rightFrame) is a frame where some information pops up on a click on one of the subcategories and Frame 4 (rightFrame1) is where a pictures pops up corresponding to the information about the subcategory. I have been working on getting frame 3 and frame 4 to clear on one click on one of the menu links and I have got it to work using this java script in the head of my frames and framset file: Quote: <html> <head> <SCRIPT LANGUAGE="JavaScript"> function setFrame(frameName, frameSrc) { parent[frameName].location=(frameSrc); } </SCRIPT> </head> </html> and links like this in the body section: Quote: <a href="javascript:setFrame('mainFrame','information.html');setFrame('rightFrame','blank.html');setFra me('rightFrame1','blank.html')">LINK</a> I have tried uploading the site to the Internet and when I access it from the computer where I made it, it works like a charm. The problem is: when I access the website from other computers these java links doesn't work - no information or anything pops up in any of the frames. Any thoughts on where I could have made an error? Best Regards, OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html> <head><title>menu</title> <script type="text/javascript"> var element = null; function select(xx) { if ( element ) { element.style.backgroundColor='gray'; } element = xx; xx.style.backgroundColor='navy'; } </script> <style type="text/css"> a {text-decoration:none; color:white} a:visited {color:white} a:active {color:white} a:hover {color:white} table#lay_menu {width:100%; margin:0px} table#lay_menu td {text-align:center; width:20%} .menu {text-align:center; background-color:gray; } .start {text-align:center; background-color:navy; } </style> </head> <body> <table id="layout"> <tr> <td width="188"> <a href="#"> <div class="menu" onClick="select(this)">Artists</div> </a></td> </tr> <tr> <td><a href="#"> <div class="menu" onClick="select(this)">CPAs</div> </a></td> </tr> <tr> <td><a href="#"> <div class="menu" onClick="select(this)">Doctors</div> </a> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html> Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? I like to figure out in my ready made For Loop it out puts a list of names and amounts I want to figure out how to put in a colour scheme. such as having every second row in yellow highlight? here is my code Code: <title>The Lighthouse</title> <link href="lhouse.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="list.js"></script> <script type="text/javascript"> total=0; for (var i=0; i<amount.length; i++) { total=total+amount[i]; } document.write(total); </script> </head> <body> <div id="title"> <img src="logo.jpg" alt="The Lighthouse" /> The Lighthouse<br /> 543 Oak Street<br /> Delphi, KY 89011<br/> (542) 555-7511 </div> <div id="data_list"> <script type="text/javascript"> document.write('<table'+' border="1"'+' rules="row"'+'cellspacing="0">'+'<tr>'+'<th>Date</th>'+'<th>Amount</th>'+'<th>First Name</th>'+'<th>Last Name</th>'+'<th>Address</th>'+'</tr>'); for (var i=0; i<date.length; i++){ document.write('<tr>'+'<td>'+date[i]+'</td>'+'<td>'+amount[i]+'</td>'+'<td>'+firstName[i]+'</td>'+'<td>'+lastName[i]+'</td>'+'</tr>');} </script> </table> </div> Any suggestions on how to add the colour within the loops Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head> <script> function autoClick(){ document.getElementById('linkToClick').click(); } </head> <body onload="setTimeout('autoClick();',3000);"> <a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a> </body> It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? 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? Hi. I am looking for a way to have a button that toggles the background colour of my website. So for instance, I will have one button called 'switch to light', when its clicked it switches the colour of the background to a light colour, and another button replaces this that says 'switch to dark', and so on. The main problem is I have no idea how to store this information when the user is on the site so when the page is refreshed the colour is remembered. I am a complete newbie to Javascript, so any help will be greatly appreciated! Thanks Hi All, I quite new to JavaScript and find myself stuck while trying to change the background colour of an input box. I have an external js file and everything seems to work perfectly but for some reason I cant get the colour to change. Any help is REALLY appreciated! Code: function validateID(id, name, value) { var regEx = /(abc)/; var result = regEx.test(value); alert(value + " " + result + " " + regEx + " " + name); if (result == true) { userFeedback(id, '<--Input Is Valid'); document.getElementsByName(name).style.backgroundColor='green'; } else { userFeedback(id, '<--Error: Input Is Not Valid'); } } Reply With Quote 01-12-2015, 11:35 AM #2 VIPStephan View Profile View Forum Posts Visit Homepage The fat guy next door Join Date Jan 2006 Location Halle (Saale), Germany Posts 8,989 Thanks 6 Thanked 1,054 Times in 1,027 Posts Don’t change styles with JavaScript. In order to separate the concerns (content/style/behavior) you should add/remove a class to the element and apply styles with CSS using that class as selector. Every contemporary browser has a developer console built in, look into the JS console and see if there are any errors coming up. Other than that, it helps if you posted a link to your page so we can see ourselves without having to guess. Reply With Quote 01-12-2015, 11:59 AM #3 murtagh View Profile Hi 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 I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is! The line the body is onmouseover: Code: <p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p> The function is as follows Code: function switchElementColour(elementName){ var tryId = document.getElementById(elementName); var yrf = tryId.style.backgroundColor; alert(yrf); } I've tried a number of different variations, including: messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online ...but I keep coming back to the above. The result is a blank alert box (no errors, just blank). The element name is getting passed, because when I create an alert box in the function that looks like this: Code: alert(elementName); The result is an alert box that says metallic (no quotation marks). Au secours por favore? 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 Hey guys, I have a colour picker on my site, see it at http://www.ludatha.com Now I want to change the colour of the links on the page, don't worry I know how to do all this. It's just if someone chooses full black (#000000) the theme looks awesome, but the links on the dark background are invisible. Similarly if someone chooses full white (#ffffff) then you can't see the text on the white background. So I want to know if you geniuses can make it so when a variable containing a hex, like #000000 is set as the main colour, then the link colour is changed to #666666 so you can still see it, but I want it to work with colours, so if you had #360000 (dark red) then the link colour would be something like #a10000. I know this is possible, somehow... I hope I have explained it well enough for you to understand, here is my code to change the background: Code: onChange: function (hsb, hex, rgb) { $('.colour-picker-colour').css('backgroundColor', '#' + hex); $('.background').css('backgroundColor', '#' + hex); $('.colour').css('backgroundColor', '#' + hex); $('.colour-text').css('color', '#' + hex); $('a .colour-text').css('color', '#' + hex); $('.colour-text-hover:hover').css('color', '#' + hex); $('.tabs a:hover').css('color', '#' + hex); $('.seperator').css('backgroundColor', '#' + hex); $.cookie('ludatha_colour', hex, { expires: 365 }); } P.S. My site may not look right for a few hours as the images and CSS is updating. 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 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> 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 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 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 |