JavaScript - Text Colour And Size Using Javascript
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 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. 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 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!!!!!!!!! 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 have this javascript to add a row to html: Code: <html> <body> <?php $vendor = $_POST['vendor']; $vendor_phone = $_POST['vendor_phone']; $vendor_email = $_POST['vendor_email']; ?> <table width=930> <tr> <td style="text-align: center" width=356><img src="http://www.shopphgmag.com/po/images/cwplogo.jpg"/><br> <p ><br> br> Ph: <br> Fax: </p></td> <td width=500></td> <td> <Fieldset> <legend>Purchase Order</legend> Number: </fieldset> </td> </tr> <td colspan="3"> <fieldset> <legend>Issued To</legend> <table> <tr> <td>Vendor: </td> <td><?php echo $vendor; ?></td> </tr> <tr> <td>Vendor Phone: </td> <td><?php echo $vendor_phone; ?></td> </tr> <tr> <td>Vendor Email: </td> <td><?php echo $vendor_email; ?></td> </tr> </table> </fieldset </td> </table> <script language="javascript"> function addRow() { var tbody = document.getElementById("po_table").getElementsByTagName("tbody")[0]; var row = document.createElement("TR"); var cell1 = document.createElement("TD"); var cell2 = document.createElement("TD"); var cell3 = document.createElement("TD"); var inp1 = document.createElement("INPUT"); inp1.setAttribute("type","text"); inp1.setAttribute("name","quantity[]"); cell1.appendChild(inp1); var inp2 = document.createElement("INPUT"); inp2.setAttribute("type","text"); inp2.setAttribute("name","description[]"); cell2.appendChild(inp2); var inp3 = document.createElement("INPUT"); inp3.setAttribute("type","text"); inp3.setAttribute("name","unit_cost[]"); cell3.appendChild(inp3); row.appendChild(cell1); row.appendChild(cell2); row.appendChild(cell3); tbody.appendChild(row); } function removeRow() { var table = document.getElementById("po_table").getElementsByTagName("tbody")[0]; var lastRow = table.rows.length; if (lastRow > 2) table.deleteRow(lastRow - 1); } </script> </head> <body> <form method="post" action="review_po.php"> <input type="button" value="Add Row" onClick="addRow();"> <input type="button" value="Delete Row" onclick="removeRow()"> <table id="po_table" border="1"> <tbody> <tr> <th bgcolor="#c1c1c1" width="30px">Quantity</th> <th bgcolor="#c1c1c1" width="340px">Description</th> <th bgcolor="#c1c1c1"width="30px">Unit Cost</th> </tr> <tr> <td><input type=text name="quantity[]"></td> <td><input type=text name="description[]" size="100"></td> <td><input type=text name="unit_cost[]"></td> </tr> </tbody> <tfoot> <tr> <th bgcolor="#e0e0e0">1</th> <th bgcolor="#e0e0e0">Shipping</th> <td><input type=text name="shipping"></td> </tr> <tr> <th bgcolor="#e0e0e0">1</th> <th bgcolor="#e0e0e0">Tax</th> <td><input type=text name="tax"></td> </tr> </tfoot> </table> </br> <table width=930> <tr width=930> <td><input type="submit" value="Back" name="/po/po/add_vendor.html" style="float:left"></td> <td><input type="submit" value="Review" name="review_po" style="float:right"></td> </tr> </table> </form> </body> </html> It works great, but I need the var inp2 textbox to be size=100 I can't figure out how to do it. Here is my page: http://shopphgmag.com/po/po/add_items.php and you can see if you click "add row" it adds the row with a smaller text box than the other row Hi, I've written a function to change the font, this is working in IE but not in FF or Chrome. No errors come up in Firebug. Once this is working in both browsers I will change the function to gradually increase the size of the font to make it look as if the font is growing. This is why I haven't just assigned a class to the text. URL of the site with the script is http://dev.creativepanda.co.uk/ Function in question is - Code: function alterFontSize(){ var sizeElem = document.getElementById('sizeTest').style; if(reverse == 0 && currentFontSize < endFontSize){ currentFontSize = endFontSize; sizeElem.fontSize = currentFontSize; } } Thanks for any help. i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
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! 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 I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize() { alert('height is now '+document.getElementById("Iframemain").height) alert('height is now '+document.getElementById("Iframemain").width) } Is it possible? 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. 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 How come this isn't working? document.getElementById('glance').style.display='block'.color='gold'; 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? 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 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... 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> |