|
JavaScript - N00b Q - Changing Background Color Of Table Cells On Click
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>
Similar TutorialsOk. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
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? 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;
}
}
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. 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> 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 I have a table row that I would like to have change color when onMouseOver, and revert back onMouseOut. That works fine. Now, I have added an onClick event, which when they click I want the color to stay. Here is what I have. It works, sort of, that is it changes only the first row and not the one I clicked. How do I refer to the row that is clicked? Thanks! Code: <script type="text/javascript">
function check(x)
{
document.getElementById("rowColor").bgColor=x
}
</script>
<tr id="rowColor" onClick="check('#99FF99');" onMouseOver="this.bgColor='#99FF99';" onMouseOut="this.bgColor='#FFFFFF';"><div>
Hello, I am trying to change the background color of a table based on the value of a picklist. For instance. if the picklist value was "1", then the background color of the table should be red. Not sure where I went wrong in my code. Code: <html>
<body>
<script type="text/javascript">
if (level="1")
{
levelColor = #FF0000;
}
</script>
<select name="level">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
<br><br>
<center>
<table name="levelColor" width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td><center>This is the level.</center></td>
</tr>
</table>
</center>
</body>
</html>
Please help. Thank you. Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm 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 How come this isn't working? document.getElementById('glance').style.display='block'.color='gold'; 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>Untitled Document</title>
<script>
window.onload = function(){
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
var names = ["Marble","Jarque","Dino","Pineapple"];
function abc(){
if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
else {names.sort()}
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>
First time sort: no problem But when it comes to the blue-highlighted parts It cannot do the sort().reserve() What's wrong with the codes? 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, Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
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. Hey. so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that. Here is what I have so far: Code: function add_new_proj(){
new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
var projectID=table.insertCell(0);
var ProjectName=table.insertCell(1);
var Client=table.insertCell(2);
var ClientProjectID=table.insertCell(3);
var delete_cell=table.insertCell(4);
projectID.innerHTML = new_proj_id;
ProjectName.innerHTML ="";
Client.innerHTML = "";
ClientProjectID.innerHTML = "";
delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
}
this is an example of what the cells look like (the ones that already exist, generated via PHP code): PHP Code: echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event. any help would be great! thanks Hello, I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing. The paradigm: I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came. Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why. The problem: The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for. So the order of the columns and rows are randomized, the data which is then placed into the html/php table. For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white. The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with. We want the information that a cell is filled with to dictate what background-color the cell is. Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading) What we want: Unrandomized: [.A.] [|B|] [#C#] Randomized: [#C#] [.A.] [|B|] What the problem is: Randomized: [.C.] [|A|] [#B#] Again, thank you for reading this long post. I'm up for any suggestions! TL;DR The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells. How do I make javascript issue a background-color change to each cell according to the information that it is populated with. I want to change the color of the gridview when a button which has the value of the row index of the gridview is clicked ...this button is not inside the gridview but some where else on the form but it can send the gridview rowindex to the function so need a function to change the color of the row or bring it to focus in someway... |
|||||||