|
JavaScript - Changing Css Link Color Attribute
I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.
My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to. I've only ever done a small amount of JS coding but from the research I've done it should go something like this, Code: document.style.alinkColor = "COLOR" I got to that via discovering that Code: document.style.backgroundColor = "COLOR" will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case. Anyone able to point me in the right direction? Similar TutorialsIs it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue";
This is my CSS: Code: A:link {
color:#ffffff;
font-size:14pt;
font-weight:bold;}
A:visited {
color:#ffff00;
font-size:14pt;
font-weight:bold;}
A:hover {
color:#6698ff;
font-size:14pt;
font-weight:bold;}
A:active {
color:#c0c0c0;
font-size:14pt;
font-weight:bold;}
Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
So my functions are dealing with Time. The function delay_time() is called by clicking a button in html and the return value of the function is displayed in a textbox. What I need to do is basically if the value of resultingtime is greater that the value of delay time I need the value shown in red(ff0000) and bold and if it isnt then I need it displayed in bold green(00ff00). but Ive tried doing this in my javascript and found that I cant code it in there the way that I know. I really dont know what to do... I think that I have to do it in the html coding but I dont know how. Here is the javascript I wrote: Code: function delay_time(idealTime, startTime, stopTime, delayTime) {
var delay_time = idealTime.value;
var bigger_time = stopTime.value;
var smaller_time = startTime.value;
var resultingtime = subtract_time(bigger_time, smaller_time, delay_time);
//if (resultingtime > delay_time) {
//resultingtime = resultingtime.fontcolor("ff2000");
//resultingtime = resultingtime.bold();
//}
//else {
//resultingtime = resultingtime.fontcolor("60ff00");
//resultingtime = resultingtime.bold();
//}
delayTime.value = resultingtime;
}
function subtract_time(bigger_time, smaller_time, delay_time) {
var bigger_value = convert_time_to_value(bigger_time);
var smaller_value = convert_time_to_value(smaller_time);
var idealTime = delay_time;
var resultingtime = bigger_value - smaller_value;
return resultingtime;
}
function convert_time_to_value(time_format) {
var hh = time_format.substring(0, 2);
var mm = time_format.substring(3, 5);
var time_value = (eval(hh) * 60) + (eval(mm) * 1);
return time_value;
}
and here is the html code for the button : Code: ID="Button15" type="button" value="Delay Time"
onclick="delay_time(document.getElementById('TextBox102'), document.getElementById('TextBox104'), document.getElementById('TextBox105'), document.getElementById('TextBox106'))"/>
here is the text box I have the value going into: Code: <asp:TextBox ID="TextBox106" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium" Width="0.75in" BorderStyle="Inset"></asp:TextBox>
and here is the code from the box that I need to know if the value is bigger or smaller than: Code: <asp:TextBox ID="TextBox102" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: medium; text-align: right;" Width="0.5in" BorderStyle="Inset"></asp:TextBox>
please help. Hello, I can't seem, for the life of me to get this to work at all. I've tried everything out there and can't get it to work with IE 7: I would like to change the border color of my table row on hover. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.test {
border:1px solid #9CA4AA
}
.test:hover { border:1px solid #666666 }
</style>
</head>
<body>
<table width="536" style="border:1px solid #9CA4AA" cellspacing="0" cellpadding="1">
<tr class="test">
<td> </td>
</tr>
</table>
</body>
</html>
I desperately need your help before I have no hair left. Thanks for all your help in advance, Cheers, J hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like: <head> <title> Basics Exercise</title> <script type="text/javascript" src="js.js"></script> </head> <body> <form> <p> Click this button and the document's color will change again </p> <input name="button" type="button" value="Change the background color of the document"/> </form> js.js has function changecolor() { document.bgColor='#ea0d17'; } document.forms[0].button.onClick=changecolor(); I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working. 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)+")"}});
Hello 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>
Hi all, I currently have this javascript that will change the cell to green with one click... Code: <script type="text/javascript">
function ColorChange(obj){
obj.style.color='#FFFFFF';
obj.style.backgroundColor='#66CC33';
obj.parentNode.style.backgroundColor='#66CC33';
}
</script>
echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";
the problem is that I need around 3 different colors to be possible.. e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange. I'm not sure how to take this javascript further? Would someone be kind enough to point me in the right direction? Many thanks, Greens85 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>
I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now. Heres the code: Code: <html>
<head>
<script language="JavaScript">
var choice=confirm("Press ok for black. Press cancel for red.");
if (choice==true){
document.bgColor="yellow";
document.fgColor="black";
}
else {
document.bgColor="red";
document.fgColor="white";
}
</script>
<body>
<p>words</p>
</body>
</html>
If someone could take a second to set me straight, I would really appreciate it. btw: hope I posted all this according to the "rules". I tried I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? I go to a page and have this in the URL http://beta.pigskinempire.com/boxscore.asp?w=6&s=5&yr= I want to create a link on that page that when you click it it changes the URL to http://beta.pigskinempire.com/game.asp?gnum=6&gslot=5 as you can see the numbers 6 and 5 are about the only things that are similar in the substring. I will have this on multiple pages so it will be taking different numbers from the same spots of the URL and plugging them into the new URL into the correct location. Thank you very much if you can help me, I am thinking regEx will be needed but I am not very comfortable with it. Thanks again. First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
function changeText()
{
document.getElementById('link').innerHTML = 'View Smaller Image';
return false;
}
function changeImage()
{
var newImage = new Image();
newImage.src = "images/cottage_large.jpg";
document.getElementById('thumbnail').src = newImage.src;
return false;
}
/**/
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body>
<h3>Real Estate</h3>
<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
</body>
</html>
Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! Hi, i have a "customer login" link in my header for customers to login(obviously), when they login i want the link to change to "logout", any ideas on how to do this as i don't have a clue. not good at javascript at all. the link to my website is www.nandahosting.co.uk test login info if required: user: test@nandahosting.co.uk password: password thanks Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! www.e-decals.com/dev displays fine in Firefox and Safari, (link color a { color : #b2b2b2 correct) but IE showing default link colors around images in multibox - IE error he User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30618) Timestamp: Thu, 5 Nov 2009 15:11:40 UTC Message: Object doesn't support this property or method Line: 467 Char: 4 Code: 0 URI: http://www.e-decals.com/dev/multibox/multibox.js Any ideas? |
|||||||