|
JavaScript - Animate The Movement Of Cell Content From One Table To Another.
Hello,
I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2 from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2. I am new to HTML/javascript programming I really appreciate your help Similar TutorialsHi, I am new to javascript and need help to get the value from af gridview cell and write it to an asp.net control on my aspx page ( language Visual Basic ). I have a gridview ( gridview1) which contains some numbers in the first column. I need to get the number in the column on mouseover and write to an asp.net label, textbox or hiddenfield. I know how to activate the script from from my aspx page, but I havent got a clue on how to write the script. Any help is deeply appreciated. <script language="javascript"> function splitNumber() {alert("inside splitnumber"); var x = parseInt(document.getElementById("value1").value); var z = x%10; /*units*/ var y = (x - z)/10; /*tens*/ var c = parseInt(document.getElementById("value3").value); var a = c%10; /*units*/ var b = (c - a)/10; /*tens*/ for(var i=0;i<=z;i++) { var parseInt(document.getElementById("u1").td.value); for(((document.getElementById("u1").td.value))=0;((document.getElementById("u1").td.value))<=i;((doc ument.getElementById("u1").td.value))++) { document.write("<td> " +document.getElementById("u1").td.value +"</td>") } } } </script> /*this is the code i write for generating unique values in the table cells, but it is not working*/ <body > <div class="left"> <table class="main" cellpadding="3px" cellspacing="6px"> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> </tr> </table> </div> <div class="right" > <table cellpadding="3px"> <tr> <td width="5px"></td> <td><span class="row"><input min="0" max="99" type="number" id="value1" name="value1" value="0" onchange="javascript:addNumbers()"/></span></td> </tr> <tr> <td width="5px"><b style="font-size:25px; position:relative; top:18px;">+</b></td> <td><span class="row"><input min="0" max="99" type="number" id="value3" name="value3" value="0" onchange="javascript:addNumbers()"/></span></td></tr> <tr><td width="5px"></td> <td><span class="row" ><input style=" width:66px; position:relative; right:25px;" readonly="readonly" id="answer" name="answer" value="0" /></span></td></tr> </table> </div> </body> Hi, I am trying to use the onmouseover on a table element (table/row/cell) when creating the table using HTML everything is ok. Code: <TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
However when I am trying to do the same using javascript it is not working. I can see the correct table data and background color but it doesnt change on mouse over. Code: function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}
can someone explain to me what's wrong? Hello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html>
<body>
<h1 align="center"><u>ITA Tutorial</u></h1>
<h3>Problem Statement</h3>
<p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p>
<br><br>
<table border="1" align="center" cellpadding="2">
<script type="text/JavaScript">
var i, j
for (i=1;i<6;i++)
{
document.write("<TR>")
for(j=1;j<6;j++)
document.write("<TD> </TD>")
document.write("</TR>")
}
</script>
</table>
</body>
</html>
I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. Hello, Can someone please show me how to do the following in Javascript. I basically want the background color of a div (banner) to change when the user clicks a green or blue table cell. So if they click the blue table cell, the backgound color of the div changes to blue (its green by default). Also, when they have picked what color they want, I'd like the color to be stored in the value of the form 'BannerBGColor' so I can post their banner color to database. Any help is greatly appreciated. Many thanks -------------------------------------------------------------------------- Banner: <div style="width:400px; float:center; background:#00FF00; border-color:#000000; border-style: solid; border-width: 2px;"> <p>This is a banner.</p></div>'; -------------------------------------------------------------------------- Colour picker table to change colour of Banner above: <table width="300" border="1" cellspacing="1" cellpadding="1"> <tr> <td colspan="2">Pick a color below to change banner background:</td> </tr> <tr> <td bgcolor="#00FF00">Green</td> <td bgcolor="#00FFFF">Blue</td> </tr> </table> ------------------------------------------------------------------------- Form field to insert chosen Banner Background colour when form is submitted - <input type="text" name="BannerBGColor" value="'.$_POST['BannerBGColor'].'"> I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column. I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens. I have Code: document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
Any ideas? 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"); } Hello all, I've been attempting to have a popup window open upon clicking a specific table cell. So far I've not been able to make any headway except that I'd like for the popup to be a Modal window. Here's the code I have for the page so far: Code: <?
include('include/queries/getCustomerOrderInfo.php');
// now run the queries...
if($_SESSION['issuperuser']){
//var_dump($sqlGetOrderInfo);
}
$qryGetOrderInfo = mysql_query($sqlGetOrderInfo, $connection_id);
?>
<link href="css/dropshipetc.css" rel="stylesheet" type="text/css">
<span class="smokeytext bold letterspacing_1px">ORDER INFO</span>
<hr>
<div id="OrderInfoTableHeader" style="margin-top:10px; width:550px;">
<table style="border-collapse:collapse; width:528px;" border=0>
<tr>
<!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">PO No.</td>--->
<td style="width: 75px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Status</td>
<td style="width: 77px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Item No.</td>
<td style="width: 151px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Tracking No.</td>
<td style="width: 222px; border-bottom: 1px solid;" class="oi_tableheader">Shipped To</td>
<!---<td class="oi_tableheader"></td>--->
</tr>
</table>
</div>
<div id="OrderInfoWrapper" style="overflow:auto; width:550px; height:575px;">
<!---<table style="border-collapse:collapse; width:533px;" border=1>--->
<table style="border-collapse:collapse; width:528px;" border=0>
<?
$lastPurchaseNumber = '';
while ($thisRow = mysql_fetch_assoc($qryGetOrderInfo)){
$thisShippedToName = $thisRow['soshpname'];
$thisPurchaseNumber = $thisRow['sopurchno'];
$thisItemNumber = $thisRow['solnsvptno'];
if(strlen($thisRow['solnkitno']) > 0){
$thisItemNumber = $thisRow['solnkitno'];
}
if(strlen($thisItemNumber) == 10){
$thisItemNumber = substr($thisItemNumber, 0, 6);
}
switch(strtolower($thisRow['orderstatus'])){
case 'returned' :
$thisStatus = 'Returned';
$cellClass = 'redbackground';
break;
case 'pending' :
$thisStatus = 'Pending';
$cellClass = 'yellowbackground';
break;
case 'processing' :
$thisStatus = 'Processing';
$cellClass = 'orangebackground';
break;
case 'shipped' :
$thisStatus = 'Shipped';
$cellClass = 'greenbackground';
break;
default:
$thisStatus = 'PENDING';
$cellClass = 'yellowbackground';
break;
}
$thisTrackingNumber = $thisRow['upstrackno'];
if($thisPurchaseNumber != $lastPurchaseNumber){
$lastPurchaseNumber = $thisPurchaseNumber;
?>
<tr>
<td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?>
</td>
</tr>
<?}?>
<tr>
<!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;"></td>--->
<td style="width: 76px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;" class="<?echo $cellClass; ?>"><? echo $thisStatus; ?></td>
<td style="width: 77px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisItemNumber; ?></td>
<td style="width: 150px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisTrackingNumber; ?></td>
<td style="width: 226px; border-bottom: 1px solid;"><? echo $thisShippedToName; ?></td>
</tr>
<?}
?>
</table>
</div>
This is the table cell I need clickable: Code: <td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?></td> ANY help would be greatly appreciated! I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell. Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> Hi, I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than. Below is my javascript code: Code: <script type="text/javascript">
function hallo(){
var value1=200
var inputVal = window.document.getElementById("one").value;
//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}
</script>
And below is my php script that displays the data in a web table. Code: <body>
<form>
Value1: <input type="text" name="one" id="one" ><br/>
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
<br/>
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];
$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
<th><font face="Arial, Helvetica, sans-serif">Title</font></th>
<th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
<th><font face="Arial, Helvetica, sans-serif">January</font></th>
<th><font face="Arial, Helvetica, sans-serif">February</font></th>
<th><font face="Arial, Helvetica, sans-serif">March</font></th>
<th><font face="Arial, Helvetica, sans-serif">April</font></th>
<th><font face="Arial, Helvetica, sans-serif">May</font></th>
<th><font face="Arial, Helvetica, sans-serif">June</font></th>
</tr>
<?php
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>
<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
</tr>
<?php
$i++;
}
?>
</body>
As you can see from my javascript, i am getting the elements by id (getElementById("color")). Currently, only the first <td> with id='color' is changing when the value is entered. How do I make the text in other table cells with id='color' change color when the comparison value is entered? I was wondering if anyone could help me with getting this working. I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus. I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B]. My code for javascript function and html table are below: Code: function calculate(textID){
var table = document.getElementById('course'); //id of table
var rowCount = table.rows.length;
var array = []; //array to hold the values
var c = 0;
dmenus = document.getElementByTagName("select"); //get the drop down menus
for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
var row = table.rows[a];
var check = row.cells[0].childNodes[0];
if(null != check && true == check.checked){
for(var b = 0; b < dmenus.length; b++){
val = dmenus[b].options[dmenus[b].selectedIndex].value;
array[c] = val; //set index of array to equal value of dropdown box
c++;
}
}else{
b++;
}
}
Html code for table: Code: <table id="course">
<tr>
<td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
<th style="color:white">Course Title</th>
<th style="color:white">Credits</th>
<th style="color:white">Grade</th>
</tr>
<tr>
<td><input type="checkbox" name="tick" id="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option...</select></td>
<td>
<select name="grade" id="grade">
<option...</td>
It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it. How can I edit my code to give each cell a different Id? Or is there a better way of doing this? My table code looks like this (i have filled it with random data so it is not just a blank table). <code> <script type="text/javaScript"> window.onload = fnInit; function fnInit() { // Declare variables and create the header, footer, and caption. var oTable = document.createElement("TABLE"); var oTHead = document.createElement("THEAD"); var oTBodyam = document.createElement("TBODY"); var oTBodypm = document.createElement("TBODY"); var oTFoot = document.createElement("TFOOT"); var oCaption = document.createElement("CAPTION"); var oRow, oCell; var i, j; // Declare stock data that would normally be read in from a stock Web site. var heading = new Array(); heading[0] = ""; heading[1] = "Monday"; heading[2] = "Tuesday"; heading[3] = "Wednesday"; heading[4] = "Thursday"; heading[5] = "Friday"; var block = new Array(); block[0] = "8:30"; block[1] = "9:55"; block[2] = "11:20"; block[3] = "12:45"; block[4] = "2:10"; block[5] = "3:35"; block[6] = "5:00"; block[7] = "6:30"; var stock = new Array(); stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46"); stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46"); stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46"); stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46"); stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46"); stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46"); stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46"); stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46"); // Insert the created elements into oTable. oTable.appendChild(oTHead); oTable.appendChild(oTBodyam); oTable.appendChild(oTBodypm); oTable.appendChild(oTFoot); oTable.appendChild(oCaption); // Set the table's border width and colors. oTable.border=1; oTable.bgColor="lightslategray"; // Insert a row into the header and set its background color. oRow = document.createElement("TR"); oTHead.appendChild(oRow); oTHead.setAttribute("bgColor","lightskyblue"); // Create and insert cells into the header row. for (i=0; i<heading.length; i++) { oCell = document.createElement("TH"); oCell.innerHTML = heading[i]; oRow.appendChild(oCell); } // Insert rows and cells into bodies. for (i=0; i<stock.length; i++) { var oBody = (i<3) ? oTBodyam : oTBodypm; oRow = document.createElement("TR"); oBody.appendChild(oRow); for (j=0; j<stock[i].length; j++) { oCell = document.createElement("TD"); oCell.innerHTML = stock[i][j]; oRow.appendChild(oCell); } } </code> Hi all, First post here in a long time, I'm finally getting round to sorting out a portfolio website. I have a rollover image which has a mouse over and down action and a table cell which has a mouse over and down action which swaps the assigned css class. What i need to happen is when i mouse over the table cell containing the rollover image the table cell below switches the style assigned to it. I have it working the other way around so when you mouse over the bottom cell the image in the top cell swaps, see he http://onebitrocket.co.uk/swapimageandtext.html I'm basically looking for an action similar to a swap image in a cell which has it's ID defined onmouseover="MM_swapImage('Image4','','images/thumbs/th04.jpg',1)" so onmouseover="MM_swapstyle... Any help would be great Thanks I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue). 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=iso-8859-1" />
<title>ABC Book Store</title>
<style type="text/css">
<!--
.style1 {
font-size: 10pt;
}
-->
</style>
<script>
function ld_fiction()
{
var doc=nb_fiction.XMLDocument;
doc.load("fiction.xml");
document.getElementById("head_id").innerHTML="Fiction ";
}
function Id_nfiction()
{
var doc_s=nb_nfiction.XMLDocument;
doc_s.load("nfiction.xml");
document.getElementByID("head_id_d").innerHTML="NonFiction";
}
function ID_selfhelp()
{
var doc_t=nb_selfhelp.XMLDocument;
doc_t.load("selfhelp.xml");
document.getElementByID("head_id_e").innerHTML="SelfHelp";
}
function ID_reference()
{
var doc_u=nb_ref.XMLDocument;
doc_u.load("ref.xml");
document.getElementByID("head_id_f").innerHTML="Reference";
}
function ID_mags()
{
var doc_v=nb_mags.XMLDocument;
doc_v.load("mags.xml");
document.getElementByID("head_id_g").innerHTML="Mags";
}
</script>
<XML id="nb_fiction" src="fiction.xml"></XML>
<XML id="nb_nfiction" src="nfiction.xml"></XML>
<XML id="nb_selfhelp" src="selfhelp.xml"></XML>
<XML id="nb_ref" src="ref.xml"></XML>
<XML id="nb_mags" src="mags.xml"></XML>
<object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<body>
<table width="30%" border="0" align="left" cellspacing="1" font size="10">
<tr bgcolor="#CCCCCC">
<td colspan="2">
<table id="FICTIONTABLE" table width="100%" datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
<caption>
<span>Fiction </span>
</caption>
<thead>
<tr>
<th span class="style1">Stock No.</th></span>
<th span class="style1">Title</th></span>
<th span class="style1">Author</th></span>
<th span class="style1">Status</th></span>
<th span class="style1">Price</th></span>
<th span class="style1">Publisher</th></span>
<th span class="style1">Year of Release</th></span>
</tr>
</thead>
<tbody>
<tr>
<td><span class="style1" datafld="stock"></td></span>
<td><span class="style1" datafld="title"></td></span>
<td><span class="style1" datafld="author"></td></td></span>
<td><span class="style1" datafld="status"></td></span>
<td><span class="style1" datafld="price"></td></span>
<td><span class="style1" datafld="publisher"></td></span>
<td><span class="style1" datafld="year"></td></span>
</tr>
</tbody>
</table>
</td>
</tr>
</body>
</html>
I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables. I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done. Any help would really be appreciated and thanks in advance. I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Anyone know of a good tutorial for making an object move repeatedly while a key is held down (ie move right 1px every second while right arrow key is held?)
Hi to all, I am newbie in JS, and I hope that you can help with one javascript I am trying to use my function for move of image on menu the function JS function is Code: var start0l = document.getElementById('arrow1').offsetLeft, maxPoz0, timer0;
function StartPosun(imgId, maxPoz) {
clearTimeout(timer0);
maxPoz0 = maxPoz;
document.getElementById(imgId).style.left = start0l + 'px';
timer0 = setTimeout("posun0()", 1);
}
function ReturnPosun(imgId) {
clearTimeout(timer0);
timer0 = setTimeout("ret0()", 1);
}
function ret0() {
if ((document.getElementById('arrow1').offsetLeft - start0l) > 0) {
document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) - 1) + 'px';
timer0 = setTimeout("ret0()", 3);
}
}
function posun0() {
if ((document.getElementById('arrow1').offsetLeft - start0l) <= maxPoz0) {
document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) + 1) + 'px';
timer0 = setTimeout("posun0()", 3);
}
}
and the html is Code: <ul><li class="l1">
<a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="Aktuality" href="?cz_aktuality,22">
Aktuality
<img style="position: absolute; left: 306px;" alt="Aktuality" src="templates/img/menu_arrow.png" id="arrow1">
</a><ul class="sub1"><li class="l1">
<a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="AKCE: Bike Music Fest 2011" href="?cz_akce-bike-music-fest-2011,34">
AKCE: Bike Music Fest 2011
<img style="position:absolute;" alt="AKCE: Bike Music Fest 2011" src="templates/img/menu_arrow.png" id="arrow1">
</a>
</li><li class="l2">
<a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="AdventureMenu v prodejně TOURATECH CZ" href="?cz_adventuremenu-v-prodejne-touratech-cz,33">
AdventureMenu v prodejně TOURATECH CZ
<img style="position: absolute; left: 306px;" alt="AdventureMenu v prodejně TOURATECH CZ" src="templates/img/menu_arrow.png" id="arrow2">
</a>
</li><li class="lL">
<a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="TOURATECH TravelEvent 2011" href="?cz_touratech-travelevent-2011,32">
TOURATECH TravelEvent 2011
<img style="position: absolute; left: 306px;" alt="TOURATECH TravelEvent 2011" src="templates/img/menu_arrow.png" id="arrowL">
</a>
</li></ul>
</li><li class="l2">
<a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="O produktu" href="?cz_o-produktu,31">
O produktu
<img style="position:absolute;" alt="O produktu" src="templates/img/menu_arrow.png" id="arrow2">
</a>
</li><li id="selected" class="l3">
<a onmouseout="ReturnPosun('arrow3')" onmouseover="StartPosun('arrow3',15)" title="E-shop" href="?cz_e-shop,25">
E-shop
<img style="position: absolute; left: 306px;" alt="E-shop" src="templates/img/menu_arrow.png" id="arrow3">
</a>
</li><li class="l4">
<a onmouseout="ReturnPosun('arrow4')" onmouseover="StartPosun('arrow4',15)" title="Samoohřev" href="?cz_samoohrev,23">
Samoohřev
<img style="position: absolute; left: 306px;" alt="Samoohřev" src="templates/img/menu_arrow.png" id="arrow4">
</a>
</li><li class="l5">
<a onmouseout="ReturnPosun('arrow5')" onmouseover="StartPosun('arrow5',15)" title="Partneři" href="?cz_partneri,21">
Partneři
<img style="position: absolute; left: 306px;" alt="Partneři" src="templates/img/menu_arrow.png" id="arrow5">
</a>
</li><li class="lL">
<a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="Kontakty" href="?cz_kontakty,24">
Kontakty
<img style="position:absolute;" alt="Kontakty" src="templates/img/menu_arrow.png" id="arrowL">
</a>
</li></ul>
and the problem is, that I can move with the first one, but I don't how I can move with the others like alone function I thought that I can use somethink like if (onmouseover == true) .... but I failed can someone hellp with this problem pls? Hey guys, I just started to create my first Javascript game. It is a platformer and i just cant figure out how to do the movement. ATM my "character" is just a black rectangle. Here is my code. I have not been able to find the bug. var c = document.getElementById("mainCanvas"); var ctx = c.getContext("2d"); var level1 = new Image(); level1.src = "Textures/level1.png" level1.addEventListener("load", function() {ctx.drawImage(level1, 0,0,1024,1024) ctx.fillRect(playerX, playerY, 55, 118)}) //Charecter Position var playerX = 512 var playerY = 512 //Render function playerRender() {ctx.fillRect(playerX, playerY, 55, 118)} window.addEventListener("keydown", function(evt){ if (evt.keycode == 87) {playerY-=10} }) var RenderPlayerInterval = setInterval(playerRender() ,10) Reply With Quote 01-25-2015, 12:34 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Code: ctx.fillRect(playerX, playerY, 55, 118)}) //Charecter Position var playerX = 512 var playerY = 512 When you *CALL* that fillRect, neither playerX nor playerY has yet been defined! SO you are essentially doing Code: ctx.fillRect( null, null, 55, 118) And where are the semicolons on the end of EACH LINE. Yes, I know they aren't required. But put them in. It will save you from grief someday. How could you say make a x move around a grid using the arrow keys?
|
|||||||