JavaScript - Image Update Blinking Help Please
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 Similar TutorialsHi Everyone, I am interested to create one neon light effect using javascript (let's call it a club logo animation), Now I know, that I can achieve image blinking effect using javascript, but when I use this effect, the image blinks continuously. I would like to blink it only for 2-3 times. also I would like to blink four images, one after anohter, and sometimes two together. I know it seems bit complicated, but not for experts like this forum have Thanks in advance for your help. I would like to create a caret for a textarea like the one he http://www.dynamicdrive.com/forums/s...4576#post74576 it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow: Code: <textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> I don't see anything on the screen other than the blinking cursor I have written a small code in Javascript which does the work of blinking all the content inside any tag with the name 'blink' here is the code <html> <body> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <script type="text/javascript"> function blinkText() { var x=document.getElementsByName('blink'); for(i=0;i<x.length;i++) { if(x[i].style.visibility=='visible') x[i].style.visibility='hidden'; else x[i].style.visibility='visible'; } } setTimeout('blinkText()',500); </script> </body> </html> I use a Ubuntu system and work on Mozilla 3.6.18 This hides the text successfully but does not display it again What can be wrong here? Can anyone please help me http://www.primedesigning.com/ellis/ I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off). BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too Thanks for any help! i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! 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 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> 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. 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 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. 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? i 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> 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 } ?> 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. 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); } ); } Hello, I am having a little issue with creating an updating price script for my website. I tried to look at examples like those at Apple, Hp, Dell, and other sites that have the kind of script I am looking to create. The way I have my page is that it grabs data from my database when someone clicks my product, after that they go to the customize the product page. The price is supposed to change as they click and remove options. I just need a little help on where to start and how to update the price. I know Javascript is the coding but I have been struggling with it. Examples of the script can be found on the link below. There is also a snippet of my code I am working with.. Thanks in advance for some help. http://configure.us.dell.com/dellsto...en&s=dhs&cs=19 Code: <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> <form id="Options"> <div style="color:#F00"><?=$msg?></div> <?php if(is_array($_SESSION['cart'])){ $max=count($_SESSION['cart']); for($i=0;$i<$max;$i++){ $pid=$_SESSION['cart'][$i]['productid']; $pname=get_product_name($pid); $price=get_price($pid); $pdes=get_desc($pid); $pdim=get_dimen($pid); $pweight=get_weight($pid); $pcode=get_code($pid); $picture=get_pic($pid); } } ?> <table width="850" border="0" cellpadding="8"> <tr> <td width="50" align="left" colspan="2"><font color="#FF9933" size="+5" style="letter-spacing:20px;" ><?=$pname?></font><br /> <img src="<?=$picture?>" border="2" height="300" width="300"/> </td> <td width="275" align="left" colspan="2"><b>Description:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdes?></font><br /><br /> <b>Product Code:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pcode?></font><br /><br /> <b>Dimensions:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdim?></font><br /><br /> <b>Weight:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pweight?></font><br /><br /> <b>Price:</b> <big style="color:green">$</big><font style="letter-spacing:4px; word-spacing:7px;"><?=$price?></font><br /><br /> </td> </tr> <tr> <td align="left" colspan="2"><img src="<?=$picture?>" border="2" height="50" width="50"/> <img src="<?=$picture?>" border="2" height="50" width="50"/> </td> </tr> <tr> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Fabric</font><hr color="#999999" size="5" width="400" align="left"/> (Please describe the type of fabric you would like and we will try and match it. If you have a picture or link of a fabric style, please send along with item request.) </td> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Handles</font><hr color="#999999" size="5" width="400" align="left"/> (These handles are great for the children and adult type products) </td> </tr> <tr> <td colspan="2" align="left"> Check this box if you have your own fabric and would like to send to us. <input name="own" type="checkbox" value="Own" id="chk0" /> <span id="txtPrice0">-5</span> <input type="text" id="txtTotal" size="8" value="<?=$price?>"/> <br /> 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 |