|
JavaScript - Table Update
Hi all,
I need some help to update my table.It consists about selecting one team from each two drop-down list and enter the score to the two textbox. Textbox 1 relate to the team selected from the first drop-down list and textbox2 relate to the team selected from the second drop-down list.If the score entered in textbox1 is greater than textox2 means that team selected from the first drop-down win and need to update the point of the related team in the table. win = 3 point draw = 1 point lost = 0 point Here what I have down so far...any idea or referencing how I can tackle this task? Code: <form id="foot">
<label for="first">Please select the first team:</label>
<select id="first">
<option value="team 1">team 1</option>
<option value="team 2">team 2</option>
<option value="team 3">team 3</option>
</select>
<label for="second">Please select the second team:</label>
<select id="second">
<option value="team 1">team 1</option>
<option value="team 2">team 2</option>
<option value="team 3">team 3</option>
</select>
<input type="submit" value="Update"/><br/>
<label for="username">Enter score for the match (First team and Second team)</label>
<input type="text" id="txtbox1" size="2"/>
<input type="text" id="txtbox2" size="2"/>
</form><br/>
<table border="1" width="50%" id="score">
<thead>
<tr>
<th>Team</th>
<th>Point</th>
</tr>
<tbody>
<tr>
<td>Team 1</td>
<td>30</td>
</tr>
<tr>
<td>Team 2</td>
<td>20</td>
</tr>
<tr>
<td>Team 3</td>
<td>10</td>
</tr>
</tbody>
</thead>
</table>
function updateTable(){ var form = document.getElementById("foot"); var firstdrop = document.getElementById("first"); var seconddrop = document.getElementById("second"); var box1 = ParseInt(document.getElementById("txtbox1").value); var box2 = ParseInt(document.getElementById("txtbox2").value); var table = document.getElementById("score"); arrwin = ["3"]; arrdraw = ["1"]; arrlost = ["0"]; } </script> Similar Tutorialsi want to update the table -play -win -draw -lost -goals in the following code when i enter the score. (e.g if i select manchester united from drop down1 and chelsea from dropdown 2- i get to update their score. let's say i update their score 1-0. in this case manchester won. i want the record to updated to manchester united as :win 1 - draw 0 - lost 0 goals 1 and chelsea as :win 0 - draw 0 lost 1 goals -1. what shall i do? how do i continue? <!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> <link rel="stylesheet" href="../css/foot.css" type="text/css" media="screen"/> </head> <body> <div class="container"> <header> <h1>Online Automated Football League Result</h1> </header> </div> <div class="ball"> <label for="first">Please select the first team:</label> <select id="first"> <option value="team_1">Manchester United</option> <option value="team_2">Liverpool</option> <option value="team_3">Chelsea</option> <option value="team_4">Arsenal</option> <option value="team_5">Manchester City</option> <option value="team_6">Real Madrid</option> <option value="team_7">Bayern Munich</option> <option value="team_8">Barcelona</option> </select> <label for="second">Please select the second team:</label> <select id="second"> <option value="team_1">Manchester United</option> <option value="team_2">Liverpool</option> <option value="team_3">Chelsea</option> <option value="team_4">Arsenal</option> <option value="team_5">Manchester City</option> <option value="team_6">Real Madrid</option> <option value="team_7">Bayern Munich</option> <option value="team_8">Barcelona</option> </select> <label for="username">Enter score for the match (First team and Second team)</label> <input type="text" id="txtbox1" size="2"/> <input type="text" id="txtbox2" size="2"/> <input type="button" value="Update" onclick="updateTable();"/><br/> <div id="err" style="color:Red;"></div> <br/> <table border="1" width="50%" id="score"> <thead> <tr> <th>Team</th> <th>Point</th> <th>Play</th> <th>Win</th> <th>Draw</th> <th>Lost</th> <th>Goal.S</th> <th>Goal.C</th> <th>Goal.D</th> </tr> </thead> <tbody> <tr> <td>Manchester United</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> <td id="team_1">0</td> </tr> <tr> <td>Liverpool</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> <td id="team_2">0</td> </tr> <tr> <td>Chelsea</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> <td id="team_3">0</td> </tr> <tr> <td>Arsenal</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> <td id="team_4">0</td> </tr> <tr> <td>Manchester City</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> <td id="team_5">0</td> </tr> <tr> <td>Real Madrid</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> <td id="team_6">0</td> </tr> <tr> <td>Bayern Munich</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> <td id="team_7">0</td> </tr> <tr> <td>Barcelona</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> <td id="team_8">0</td> </tr> </tbody> </table> </div> <script type="text/javascript"> function updateTable(){ document.getElementById('err').innerHTML = ''; var firstdrop = document.getElementById("first").value; //get team from 1st drop down var seconddrop = document.getElementById("second").value; //get team from 2nd drop down var temp1 = document.getElementById("txtbox1").value; //get score for 1st team var box1 = Number(temp1);//store score of 1st team var temp2 = document.getElementById("txtbox2").value; //get score for 2nd team var box2 = Number(temp2);//store score of 2nd team var tablebox1 = Number(document.getElementById(firstdrop).innerHTML);//store name of 1st team var tablebox2 = Number(document.getElementById(seconddrop).innerHTML);//store name of 2nd team if(temp1 == '' || temp2 == ''){ document.getElementById('err').innerHTML = 'Please enter both scores.'; alert("Please enter both scores."); return; } if(firstdrop != seconddrop){ if(box1 > box2){ document.getElementById(firstdrop).innerHTML = tablebox1 + 3; }else if(box1 < box2){ document.getElementById(seconddrop).innerHTML = tablebox2 + 3; }else{ document.getElementById(firstdrop).innerHTML = tablebox1 + 1; document.getElementById(seconddrop).innerHTML = tablebox2 + 1; } }else{ document.getElementById('err').innerHTML = 'Please select two different teams.'; alert("Please select two different teams."); } } </script> </body> </html> Hello All, I'm working on a project which requires a small portion from a large table of information to be displayed on a webpage (sort of like a magnifying glass). The display will be a table of fixed size (m by n cells). Some of the cells will be merged. When the table updates, different sets of cells may be merged. It needs to be coded in HTML5, which I assume includes the use of JavaScript and CSS (The specs of this is rather unclear at the moment, so I'm going to cover all bases). Anyhow, looking through the HTML5 and JavaScript tutorials, I found two ways to solve this problem. One way would be to have a script to parse out the relevant information, and have it output into a table (dynamically generating the HTML required). The second way would be to have the script draw the table on its own in a canvas. User events (such as arrow keys on the keyboard) will change the position of the focus (move the magnifying glass in a cardinal direction). I hit a small snag with the first solution - Is it possible to update the table on the page (including changing the structure of it) without having to refresh? If you could point me to a relevant tutorial or example on the web, I'd greatly appreciate it. My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. Hi All, I have a web camera stream which exports JPG which are over written (ie; 5 jpg's) looping. I'm streaming this feed however, setInterval - refreshImage, 1000 is not lining up with the streaming feed. Is there a way to update the latest jpg image without using setInterval times. I find that depending on the server the timing can be off, and it overlaps or goes too fast. This is my code. Code: <html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="Refresh" CONTENT="120;URL=http://www.website.com.au">
<?php
$time = date('G'); //24 hour without leading zeroes
if($time >= 1 && $time <= 6) $loc = 'index.php';
else if($time >= 10 && $time <= 17) $loc = 'index2.php';
else if($time >= 21 && $time <= 24) $loc = 'index3.php';
if(isset($loc)) {
header("Location: http://www.website.com.au/{$loc}");
exit;
}
?>
<script type="text/javascript">
var mypics = [];
mypics[0] = 'images/1.jpg';
mypics[1] = 'images/2.jpg';
mypics[2] = 'images/3.jpg';
mypics[3] = 'images/4.jpg';
mypics[4] = 'images/5.jpg';
var image;
var imageNum = 0;
window.onload = function() {
image = document.getElementById('idofyourimage');
setInterval("refreshImage()", 1000);
}
function refreshImage() {
image.src = mypics[imageNum++] + '?' + (new Date()).getTime();
if (imageNum == mypics.length) imageNum = 0;
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
<!--
document.oncontextmenu = function () {return false;};
function do_err()
{
return true
}
onerror=do_err;
function no_cp()
{
clipboardData.clearData();setTimeout("no_cp()",100)
}
no_cp();
//-->
</script>
<img src="images/1.jpg"; id="idofyourimage" width="640" height="360"/>
</body>
Thanks !!! hi guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code:
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script>
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script type="text/javascript"/>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<form id="form1" name="form1" method="post" action="">
<label for="Position">Position</label>
<select name="Position" id="Position">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>RG</option>
<option>RT</option>
<option>C</option>
<option>LG</option>
<option>LT</option>
<option>CB</option>
<option>LB</option>
<option>SS</option>
<option>FS</option>
<option>DE</option>
<option>DT</option>
<option>P</option>
<option>K</option>
</select>
<input type="submit" name="Summit" id="Summit" value="Submit" />
</form>
<p> </p>
<p> </p>
<table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
<thead>
<tr>
<th bgcolor="#FF0000">id</th>
<th bgcolor="#FF0000">Team</th>
<th bgcolor="#FF0000">FirstName</th>
<th bgcolor="#FF0000">LastName</th>
<th bgcolor="#FF0000">Position</th>
<th bgcolor="#FF0000">Year</th>
<th bgcolor="#FF0000">Overall</th>
<th bgcolor="#FF0000">Speed</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
</tr>
</tbody>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on Here is my calander script PHP Code: <script src="http://www.runningprofiles.com/jquery.js" type="text/javascript"></script> <link href="http://www.runningprofiles.com/members/diary/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"> <script src="http://www.runningprofiles.com/members/diary/facebox/facebox.js" type="text/javascript"></script> <script> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) </script> <?php // there is NO NEED to edit ANY of this code $ev_dat = array(); for ($i=0;$i<32;$i++) { $ev_dat[$i]=0; } $now = date("Y-m-d", time()); list($ty, $tm, $td) = explode('-',$now); // ty=thisyear, etc. used for highlighting 'today' include("cal_parms.php"); // assorted configuration variables include($dat_names); // retrieved from cal_parms.php as a 'language' file if (!isset($_GET['m'])) { $m = date("m",mktime()); } else { $m = $_GET['m']; } if (!isset($_GET['y'])) { $y = date("Y",mktime()); } else { $y = $_GET['y']; } /*== get what weekday the first is on ==*/ $tmpd = getdate(mktime(0,0,0,$m,1,$y)); $month = $tmpd["month"]; $firstwday= $tmpd["wday"]; if ($firstDayIsMonday == 1) { if ($firstwday == 0) { $firstwday = 6; } else { $firstwday--; } } $lastday = mk_getLastDayofMonth($m,$y); /*== get the last day of the month ==*/ function mk_getLastDayofMonth($mon,$year) { for ($tday=28; $tday <= 31; $tday++) { $tdate = getdate(mktime(0,0,0,$mon,$tday,$year)); if ($tdate["mon"] != $mon) { break; } } $tday--; return $tday; } // compute range of dates for this month to match dates in database in the format yyyy-mm-dd if (strlen($m)<2) { $q="0"; $q.=$m; } else { $q = $m; } $dats_beg = $y. "-". $q. "-01"; $dats_en = $y. "-". $q. "-". $lastday; // open db conn and select all records where date is between $dats_beg and $dats_en include("cal_db_conn.php"); mysql_connect($db_host, $db_login, $db_pass) or die ("Can't connect!"); mysql_select_db($db_name) or die ("Can't open database!"); $query = "SELECT * FROM $db_table WHERE (ev_dat>='$dats_beg') AND (ev_dat<='$dats_en') "; $result = mysql_db_query($db_name, $query); // any matches? if ($result) { // handle the matches and pass relevant info to arrays while ($myrow = mysql_fetch_array($result)) { $found = $myrow['ev_dat']; $pieces = explode("-", $found); $dd = intval($pieces[2]); $ev_dat[$dd] = $myrow['id']; } } ?> <table cellpadding="1" cellspacing="1" border="0" bgcolor="#<? echo $bg_edge; ?>"> <tr><td colspan="7" bgcolor="#<? echo $bg_top; ?>"> <table cellpadding="1" cellspacing="1" border="0" width="100%"> <tr bgcolor="#<? echo $bg_top; ?>"><th width="20" style="<?php echo $hcell; ?>"><a href="<? echo $username; ?>&m=<?=(($m-1)<1) ? 12 : $m-1 ?>&y=<?=(($m-1)<1) ? $y-1 : $y ?>"><img src='http://www.runningprofiles.com/calendar/images/prev.gif' height='18' width='18' alt='' border='0' /></a></th> <th style="<?php echo $hcell; ?>"> <?php echo "<a href='../members/diary/show-month.php?mon=". $m. "&yr=". $y. "'rel=\"facebox\">"; echo "<span style='text-decoration:none'>". $mo[intval($m)]. " ". $y. "</span></a>"; ?> </th> <th width="20" style="<? echo $hcell; ?>"><a href="<? echo $username; ?>&m=<?=(($m+1)>12) ? 1 : $m+1 ?>&y=<?=(($m+1)>12) ? $y+1 : $y ?>"><img src='http://www.runningprofiles.com/calendar/images/next.gif' height='18' width='18' border='0' alt='' /></a></th> </tr> </table> </td></tr> <tr bgcolor="#<? echo $bg_top; ?>"> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[1]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[2]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[3]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[4]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[5]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[6]; ?></th> <th width="20" style="<?php echo $hcell; ?>"><? echo $da[7]; ?></th> </tr> <? $d = 1; $wday = $firstwday; $firstweek = true; /*== loop through all the days of the month ==*/ while ( $d <= $lastday) { /*== set up blank days for first week ==*/ if ($firstweek) { if ($wday!=0) { echo "<tr bgcolor='#". $bg_tabl. "'>\n"; for ($i=1; $i<=$firstwday; $i++) { echo "<td style='". $tcell. "' bgcolor='#". $bg_fill. "'> </td>\n"; } } /*== Sunday start week with <tr> ==*/ else { echo "<tr bgcolor='#". $bg_tabl. "'>\n"; } $firstweek = false; } /*== check for event ==*/ echo "<td style='". $tcell. "' "; // is this day 'today' AND there's no event today if (($ty==$y) && ($tm==$m) && ($td == $d) && (!$ev_dat[$d])) { echo "bgcolor='#". $bg_now. "'>". $d; } elseif ($ev_dat[$d]) { // get what's happening that day and use as 'mouseOver' for the link $query = "SELECT * FROM $db_table WHERE id=$ev_dat[$d] "; $result = mysql_query($query); $ev = mysql_fetch_array($result); $titl = $ev['ev_title']; echo "bgcolor='#". $bg_act. "'>"; $url = "../members/diary/show.php?event=". $ev_dat[$d]. "&sho=". $win_sho; echo "<a href=' $url' rel=\"facebox\" title=\"". $titl. "\">". $d. "</a>"; } else { echo "bgcolor='#". $bg_days. "'>". $d; } echo "</td>\n"; /*== Saturday end week with </tr> ==*/ if ($wday==6) { echo "</tr>\n"; } $wday++; $wday = $wday % 7; if (($wday==0) AND ($d!=$lastday)){ echo "<tr bgcolor='#". $bg_tabl. "'>\n"; } $d++; } // and close off the table if (($wday!=7) AND ($wday!=0)) { for ($i=$wday; $i<=6; $i++) { echo "<td style='". $tcell. "' bgcolor='#". $bg_fill. "'> </td>\n"; } echo "</tr>"; } echo "\n</table>"; include("win_open.php"); ?> what would be the best way to make it so that if you wish to chnage the month it changed the month on page rather than refresh the whole page its on? Hello, I'm somewhat new to JavaScript and for my website, I decided to make a clock for the website in this format: Saturday, October 17, 2009 5:56:14 p.m. The only issue is that it won't update every second. Below is the coding: External JavaScript: Code: function dateClock()
{
// Coding
}
setTimeout("dateClock()", 1000);
HTML: Code: ...
<script src="date.js" type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
document.write("<p style='margin:-15px 0px;background-color:black;position:fixed;padding:5px;'>"+Day+", "+Month+" "+date+", "+Year+"<br />"+Hour+":"+Minute+":"+Sec+" "+Suffix+"</p>");
</script>
What can I do to make it update? Thanks. Hi everyone - would anyone be able to assist with a code for updating information on a daily basis? For example, I wish to update a section of our site every day that has the following timing information: Everything is tabulated in excel and/or csv, and it also has on line pages in monthly format, but on the main index page, I just need to have a small area that provides it on a daily basis without having to go to an individual monthly page. Dawn Sunrise Mid Day Sunset Hope this make sense! In the same regard, a code that has QUOTES can also be included with daily (automatic) changes. Any help would be greatly appreciated! Thank you! I know im not supposed to use this for someone to write my codes for me but i need help with something the page AtreusComputers is what im working on at the bottom of the page is a price box which i might move to the side or the top later but right now just trying to get it to work here is my html page code Code: <html>
<head>
<title>ACS - Custom Computers</title>
<link rel="stylesheet" href="script.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19288524-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="scripttest.js">
</script>
</head>
<body bgcolor="#000000" text="#ffffff">
<center>
<P align=center ><a href="http://www.atreuscomputerservices.com"><img src="webACSlogofinal.bmp" border="0"></a></P>
<P align=center ><FONT color="#ffffff" size=6 face="Palatino Linotype" ><STRONG><EM>Computer Customization</EM></STRONG></FONT></P>
</center>
<table width="100%" border="0">
<tr>
<td width="10%"></td>
<td width="457px"><center><img src="ACSbanner.bmp" width="457px" height="100%" /></center></td>
<td width="40%"></td>
<td width="20%">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#000000;color:#FFFFFF">
<div class="cse-branding-form">
<form action="http://atreuscomputers.99k.org/google.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-3415227737255042:y4oouh-9ccq" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
</div>
<div class="cse-branding-logo">
<img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" />
</div>
<div class="cse-branding-text">
Custom Search
</div>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<script type="text/javascript"><!--
google_ad_client = "pub-3415227737255042";
/* 160x600, created 10/24/10 */
google_ad_slot = "6248958700";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td width="457px" valign="top" bgcolor="#FFFFFF"><div id="header"><center>
<img id="caseimg" src="start.jpg" /></div>
</td>
<td>
<center>
<form action="#">
<h1>COMPONENTS</h1>
<select id="caseselect" style="width:625px" name="Items" class="select" onchange="swapImage()"; "priceUpdate()";>
<option id="49.99" value="start.jpg">Case</option>
<option id="49.99" value="COOLER MASTER Elite 310red.jpg">COOLER MASTER Elite 310 Red ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($49.99)</option>
</select> <br /><br />
<select id="powersupply" style="width:625px">
<option id="0" value="">Power Supply</option>
</select><br /><br />
<select id="motherboard" style="width:625px">
<option id="0" value="">Motherboard</option>
</select><br /><br />
<select id="cpu" style="width:625px">
<option id="0" value="">CPU</option>
</select><br /><br />
<select id="cooling" style="width:625px">
<option id="0" value="">Cooling</option>
</select><br /><br />
<select id="memory" style="width:625px">
<option id="0" value="">Memory</option>
</select><br /><br />
<h1>AUDIO & VIDEO</h1>
<select id="gpu" style="width:625px">
<option id="0" value="">Video</option>
</select><br /><br />
<select id="monitor" style="width:625px">
<option id="0" value="">Monitor</option>
</select><br /><br />
<select id="audio" style="width:625px">
<option id="0" value="">Audio</option>
</select><br /><br />
<select id="cooling" style="width:625px">
<option id="0" value="">Speakers</option>
</select><br /><br />
<h1>STORAGE & MEDIA</h1>
<select id="hd1" style="width:625px">
<option id="0" value="">Hard Drive 1</option>
</select><br /><br />
<select id="hd2" style="width:625px">
<option id="0" value="">Hard Drive 2</option>
</select><br /><br />
<select id="od1" style="width:625px">
<option id="0" value="">Optical Drive 1</option>
</select><br /><br />
<select id="od2" style="width:625px">
<option id="0" value="">Optical Drive 2</option>
</select><br /><br />
<select id="mediaread" style="width:625px">
<option id="0" value="">Media Reader</option>
</select><br /><br />
<h1>COMMUNICATION & NETWORKING</h1>
<select id="netadapt" style="width:625px">
<option id="0" value="">Network Adapter</option>
</select><br /><br />
<select id="wifi" style="width:625px">
<option id="0" value="">WiFi Adapter</option>
</select><br /><br />
<select id="router" style="width:625px">
<option id="0" value="">Router</option>
</select><br /><br />
<select id="modem" style="width:625px">
<option id="0" value="">Modem</option>
</select><br /><br />
<select id="usb" style="width:625px">
<option id="0" value="">USB Ports</option>
</select><br /><br />
<select id="bt" style="width:625px">
<option id="0" value="">Bluetooth</option>
</select><br /><br />
<h1>SOFTWARE</h1>
<select id="os" style="width:625px">
<option id="0" value="">Operating System</option>
</select><br /><br />
<select id="productsoftware" style="width:625px">
<option id="0" value="">Productivity Software</option>
</select><br /><br />
<select id="Secure" style="width:625px">
<option id="0" value="">Security Software</option>
</select><br /><br />
<h1>ACCESORIES</h1>
<select id="keyboard" style="width:625px">
<option id="0" value="">Keyboard</option>
</select><br /><br />
<select id="mouse" style="width:625px">
<option id="0" value="">Mouse</option>
</select><br /><br />
<select id="netcable" style="width:625px">
<option id="0" value="">Network Cable</option>
</select><br /><br />
<select id="cam" style="width:625px">
<option id="0" value="">Web Cam</option>
</select><br /><br />
<select id="surge" style="width:625px">
<option id="0" value="">Surge Protector</option>
</select><br /><br />
</form><br /><br />
<input type="text" id="total" value="?" width="625px"></input>
</center>
</td>
<td valign="top" align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-3415227737255042";
/* 300x250, created 10/24/10 */
google_ad_slot = "4027168799";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</body>
</html>
and here is my js code Code: window.onload = initForm;
function swapImage(){
var image = document.getElementById("caseimg");
var dropd = document.getElementById("caseselect");
image.src = dropd.value;
}
function priceUpdate() {
var itemprice = document.getElementById("caseselect");
var box = document.getElementById("total")
box.value = itemprice.id;
}
*PARTS IN RED ARE WHAT IM WORKING ON function amort(balance, interestRate, terms) { var monthlyRate = interestRate/12; var payment = balance * (monthlyRate/(1-Math.pow( 1+monthlyRate, -terms))); var result = "Loan amount: $" + balance.toFixed(2) + "<br />" + "Interest rate: " + (interestRate*100).toFixed(2) + "%<br />" + "Number of months: " + terms + "<br />" + "Monthly payment: $" + payment.toFixed(2) + "<br />" + "Total paid: $" + (payment * terms).toFixed(2) + "<br /><br />"; result += "<table border='1'><tr><th>Month</th><th>Balance</th>" + "<th>Interest</th><th>Principal</th>"; for (var a = 1; a <= terms; ++a){ result += "<tr><td>"+a +"</td>"; //for (var b = balance; b > 0; (balance-payment)){ var updatedBalance = balance;//updated monthly payment var monthRate = monthlyRate*balance;//amount of int per month var monthlyPrincipal = payment-monthRate;//updated monthly principal result += "<td>" + (updatedBalance.toFixed(2))+ "</td>"+ "<td>" + monthRate.toFixed(2) + "</td>" + "<td>" + (monthlyPrincipal.toFixed(2)) + "</td>"; if (balance > 0) { var updateBalance = balance-monthlyPayment; } //} result += "</tr>"; } result += "</table>"; return result; } This is my JS file and I am trying to create a loan table. The table is working and it puts the data in, but the updatedBalance is not decreasing when it goes thru the loop. I thought that if I put an IF statement in to update the amount after each time thru that would fix it. But instead it broke it. Any thoughts. I am using the following code to show visitors when my page was updated last. It seems really cumbersome for what it does, too. Right now, it reads: Last updated on Monday, December 19, 2011 I wanted to add code to it so that it reads the hours and is in this format: Last updated on Monday, December 19, 2011 at 8:44am How can I add the "at hh:mm am/pm" part? Or is there easier code that will do this? Thank you in advance. Code: function getLongDateString()
{month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
dayOfWeek = this.getDay();
day = dayNames[dayOfWeek];
dateOfMonth = this.getDate();
monthNo = this.getMonth();
month = month[monthNo];
year = this.getYear();
if (year < 2000)
year = year + 1900;
dateStr = day+", "+month+" "+dateOfMonth+", "+year;
return dateStr;
}
//register the method in the class Date
Date.prototype.getLongDateString=getLongDateString;
function DocDate()
{ //return the document modification date (excl.time)
//as a string
DateTimeStr = document.lastModified;
secOffset = Date.parse(DateTimeStr);
if (secOffset == 0 || secOffset == null) //Opera3.2
dateStr = "Unknown";
else
{
aDate = new Date();
aDate.setTime(secOffset);
//use method defined above
datestr = aDate.getLongDateString();
}
return dateStr;
}
document.write("<left> Last updated on ");
document.writeln(DocDate(),"</left>");
Is it possible to dynamically update an object's source? I have several Quicktime movies which I want to embed into my website using the <object> and <embed> tags. Switching between these movies is to be done through a list of links down the left-hand-side of the current movie. I would like to be able to keep the Quicktime movie player 'open' throughout this presentation, and clicking on the various links updates the current movie without the need to reload the whole webpage. Can these movies be updated dynamically somehow using perhaps javascript to change the object's "src" value and then the movie automatically loads and plays? Thanks, Awbrys. I have a form that is working just fine the only thing is that I need to add a quantity field that will update the price. Can anyone help me with this please. I am not that good at javascript as you can see. I have gotten snippet from here and there to be able to create this form. Here is the code that I have at he moment: Code: <script type="text/javascript">
florida_tax_rate = .07;
function update_price(radio) {
price = parseFloat(radio.getAttribute("price"));
shipping = parseFloat(document.getElementById("shipping").innerHTML);
subtotal = document.getElementById("subtotal");
grand_total = document.getElementById("grand_total");
subtotal.innerHTML = price;
grand_total.innerHTML = (shipping + price).toFixed(2);
update_tax();
}
function update_tax() {
menu = document.getElementsByName("ShippingState")[0];
state = menu.value;
is_florida = state.match(/^(florida|fl)$/i);
price = parseFloat(document.getElementById("subtotal").innerHTML);
shipping = parseFloat(document.getElementById("shipping").innerHTML);
real_subtotal = price + shipping;
taxes = 0.00;
if (is_florida) {
taxes = real_subtotal * florida_tax_rate;
}
grand_total = document.getElementById("grand_total");
document.getElementById("taxes").innerHTML = taxes.toFixed(2);
grand_total.innerHTML = (real_subtotal + taxes).toFixed(2);
}
</script>
<form>
<input onchange="update_price(this);" type="radio" name="package" value="non-chamber" price="450.00" />
Non-Chamber Member (Qty: 0-5)<br />
<input name="non-chamber qty" type="text" id="non-chamber qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<input onchange="update_price(this);" type="radio" name="package" value="chamber" price="425.00" />
Chamber Member (Qty: 0-5)<br />
<input name="chamber qty" type="text" id="chamber qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<input onchange="update_price(this);" type="radio" name="package" value="standard" price="400.00" />
Bulk Orders (Qty: Over 5)<br />
<input name="bulk qty" type="text" id="bulk qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<br /><br />
<div style="display:none;"><select onchange="update_tax();" name="ShippingState">
<option value="Florida" selected="selected">Florida</option>
</select></div>
<br />
Subtotal: $<span id="subtotal">0.00</span><br />
<div style="display:none;">Shipping: $<span id="shipping">0.00</span><br /></div>
Taxes: $<span id="taxes">0.00</span><br />
Grand Total: $<span id="grand_total">0.00</span><br />
<br />
<img src="http://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" onClick="document.paypalPayment.submit();" />
<input type="hidden" name="process" id="process" value="1" />
</form>
Thanks Hi, I have a BMI calculator that records my height / weight and BMI and I can change it then it updates, I'd like to be able to add one for each day and show all in a loop here is my current JavaScript: Code: /***
**** INSERT INTO TABLE **
***/
function prePopulate(){
BMIDB.transaction(
function (transaction) {
//Starter data when page is initialized
var data = ['1','','14','0','0',''];
transaction.executeSql("INSERT INTO page_settings(id, fname, age, height, weight, gender, date) VALUES (?, ?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5], data[6]]);
}
);
}
/***
**** UPDATE TABLE **
***/
function updateSetting(){
BMIDB.transaction(
function (transaction) {
if($('#fname').val() != '') {
var fname = $('#fname').val();
} else {
var fname = '';
}
var age = $('#age').val();
var height = $('#height').val();
var weight = $('#weight').val();
var gender = $('#gender').val();
var date = $('#date').val();
transaction.executeSql("UPDATE page_settings SET fname=?, age=?, height=?, weight=?, gender=?, date=? WHERE id = 1", [fname, age, height, weight, gender, date]);
}
);
selectAll();
}
function selectAll(){
BMIDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
}
);
}
function dataSelectHandler(transaction, results){
// Handle the results
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
var newFeature = new Object();
newFeature.fname = row['fname'];
newFeature.age = row['age'];
newFeature.height = row['height'];
newFeature.weight = row['weight'];
newFeature.gender = row['gender'];
newFeature.date = row['date'];
newFeature.height2 = newFeature.height / 100
newFeature.BMI = newFeature.weight / (newFeature.height2 * newFeature.height2)
BMI = newFeature.BMI;
bmiresult = BMI.toFixed(3);
$('body').css('font-family',newFeature.height);
$('#content').html('<h4 id="your_weight">'+ newFeature.fname +' your BMI is: </h4><span>'+ bmiresult +'</span>');
if(newFeature.fname != '') {
$('#greeting').html('Hi '+newFeature.fname+'!');
$('#fname').val(newFeature.fname);
}
$('#height').val(newFeature.height);
$('select#age').find('option[value='+newFeature.age+']').attr('selected','selected');
$('#weight').val(newFeature.weight);
$('select#gender').find('option[value='+newFeature.gender+']').attr('selected','selected');
}
}
/***
**** Save 'default' data into DB table **
***/
function saveAll(){
prePopulate(1);
}
function errorHandler(transaction, error){
if (error.code==1){
// DB Table already exists
} else {
// Error is a human-readable string.
console.log('Oops. Error was '+error.message+' (Code '+error.code+')');
}
return false;
}
function nullDataHandler(){
console.log("SQL Query Succeeded");
}
/***
**** SELECT DATA **
***/
function selectAll(){
BMIDB.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
}
);
}
Hi, I have this PHP code that shows the amount of minutes and seconds to a certain date. Somehow I want to update this code every second so that it looks like it's counting down. Anyone who has any good pointers how to do this? Thank you in advance. Does anyone know of a photo gallery where the CLIENT is able to update both the images and the captions? Please and thank you. Or...... does anyone know of a gallery which pulls the photos and captions from a database? I can build a client interface to the database myself? Thanks again. Hi Community, I am running simple web cam streaming to html. Let me explain how it works: First C code grabs frame from web cam and PHP code send the image to the client where exists receiver php code. It saves the submitted image to disk and javascript updates image every 0.1 sec or less. it is working fine but there is blinking. So I changed Javascript to avoid blinking (changed to other script). In this case streaming is fine but after 2-5 sec it stops updating. here is script: <head> <title> Streaming</title> </head> <body> <!-- <img name="frame" src="" border="0" /> --> <img src="" id="webcam1" width="640" height="480" border="5" alt="Camera1"/> <script language="javascript"> document.images.webcam1.src = "http://my_IP_address/img.jpg"; document.images.webcam1.onload = Start; function LoadImage() { uniq1 = Math.random(); document.images.webcam1.src = "http://my_IP_address/img.jpg?"+uniq1; document.images.webcam1.alt = uniq1; } function Start() { setTimeout("LoadImage();", 70); } </script> </body> </html> Where is mistake? Why it stops updating after 2-5 seconds every time. Please help! Thank you I've got a simple script that generates a button that sends to the printer when clicked. But a totally new thing to me is finding a way to update a "printed_unprinted" field in the database for that item. Anyone have experience with this? Right now, I just have: Code: <style type="text/css" media="print">
@page { size:8.5in 11in; margin: 1cm }
.printbutton {
visibility: hidden;
display: none;
}
</style>
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print This Page'/>");
</script>
I assume I could reference a php file? Just something quick like: PHP Code: <?php include("include/conn.php"); $id = mysql_escape_string($_POST['printed']); $query_update = "UPDATE tbl_registration SET reg_hardcopied = '1' WHERE reg_id = '$id'"; $dberror = ""; $ret = mysql_query($query_update); if(!$ret){} else{ //back to referrer } ?> |
|||||||