|
JavaScript - Javascript Multiple Age Clocks/counters
Hi,
I am looking for a multiple countup or age timer within a html page (using javascript). I want to display below each child picture the age clock/counter of the child. I do not know javascript well (I recognize some code) and know a little of html. I have searched on internet and nothing seems to get close to the below functionality. There are plenty of countup counters etc, but mostly count days, and those that do count age are single use only. Below is some code my friend found. That code works for one person/age only and includes weeks. The thing is that I want one page with all the children listed. Example of Expected Outcome: Picture John born in Thailand John is 10 years, 03 months, 16 days, 12 hours, 14 minutes, 03 seconds old. Picture Mary born in Florida, USA Mary is 08 months, 12 days, 14 hours, 02 minutes, 53 seconds old. Picture Chris born in Melbourne, Australia Chris is 04 years, 02 months, 03 days, 01 hours, 06 minutes, 12 seconds old. Picture Lindy born in The Netherlands Lindy is 03 years, 11 months, 24 days, 23 hours, 44 minutes, 23 seconds old. And the clocks keep ticking and counting up. Please note that since Mary is less than a year old, the 0 year value does not show. I also would like the possibility to consider the time differences between the places they were born and the time zone the web page viewer is in. Is that possible? Or maybe I have to recalculate their GMT (Greenwhich time zone) birth time for that to work, or maybe the time zone of the server? How can we make that accurate? The hours, minutes, and seconds, would be great, but is of course optional. The code below also shows weeks, which is up to you to use or not. Maybe the script can allow you to choose which values to show? I would like this for at least four children, but the possibility to add more later by copying some code would be great. This is not an online form, so all time/date of birth details can be set in the script. Here is the script I found: Code: <!-- Copy and Paste into HEAD of HTML-->
<SCRIPT type="text/javascript" language="JavaScript">
function ElapsedTime(inFromDate,inToDate) {
var inFromDate = (arguments.length == 0) ? new Date() : arguments[0];
var inToDate = (arguments.length == 1) ? new Date() : arguments[1];
// if (arguments.length == 0) var inFromDate = new Date(); // IE4 has a bug in constructors,
// if (arguments.length == 1) var inToDate = new Date(); // so use above method.
var fromDate = new Date(inFromDate);
var toDate = new Date(inToDate);
var tempDate = new Date();
if (fromDate.getTime() > toDate.getTime()) {
tempDate = new Date(fromDate);
fromDate = new Date(toDate);
toDate = new Date(tempDate);
}
var totMonths = 12*toDate.getFullYear() + toDate.getMonth() +
-12*fromDate.getFullYear() - fromDate.getMonth()
var years = Math.floor(totMonths / 12)
var months = totMonths - 12*years
if (dateAsNumber(toDate,"D") < dateAsNumber(fromDate,"D")) months -= 1
if (months < 0) {
months = 0
if (years > 0) years -= 1
}
var yearsOff = years + fromDate.getFullYear()
var monthsOff = months + fromDate.getMonth()
if (monthsOff >= 12) {
monthsOff -= 12
yearsOff += 1
}
var tempDate = new Date(fromDate);
tempDate.setFullYear(yearsOff);
tempDate.setMonth(monthsOff); // might push us into early next month, so...
while (tempDate.getDate() < fromDate.getDate() && tempDate.getDate() < 9 )
tempDate.setTime(tempDate.getTime() - 1000*60*60*24); // Feb 29 etc.
var milliSecs = toDate.getTime() - tempDate.getTime();
var oneSecond = 1000;
var oneMinute = 60 * 1000;
var oneHour = 60 * oneMinute;
var oneDay = 24 * oneHour;
var oneWeek = 7 * oneDay;
var weeks = Math.floor(milliSecs / oneWeek);
milliSecs -= weeks * oneWeek;
var days = Math.floor(milliSecs / oneDay);
milliSecs -= days * oneDay;
var hours = Math.floor(milliSecs / oneHour);
milliSecs -= hours * oneHour;
var minutes = Math.floor(milliSecs / oneMinute);
milliSecs -= minutes * oneMinute;
var seconds = Math.floor(milliSecs / oneSecond);
var timeValue = "";
if (years) timeValue += years + ((years==1) ? " year, " : " years, ");
if (months) timeValue += months + ((months==1) ? " month, " : " months, ");
if (weeks) timeValue += weeks + ((weeks==1) ? " week, " : " weeks, ");
if (days) timeValue += days + ((days==1) ? " day, " : " days, ");
var timeValueDays = timeValue.substring(0 , timeValue.length - 2);
timeValue += hours + ((hours==1) ? "hour, " :" hours, ");
timeValue += minutes + ((minutes==1) ? " minute, and " : " minutes, and ");
timeValue += seconds + ((seconds==1) ? " second" : " seconds");
this.years = years;
this.months = months;
this.weeks = weeks;
this.days = days;
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
this.text = timeValue;
this.textDays = timeValueDays;
}
function dateAsNumber(inDate,inWhat) {
var what = "", yearBit = 0, monthBit = 0
if (typeof(inWhat) == "undefined" || inWhat.toString() == "" || inWhat.toString() == null) inWhat = ""
what = inWhat.toString().toUpperCase()
if (what != "M" && what != "D") // we want yyyy bit
yearBit = inDate.getFullYear() * Math.pow(10,13);
if (what != "D") // we want month bit
monthBit = inDate.getMonth() * Math.pow(10,11);
return yearBit +
monthBit +
inDate.getDate() * Math.pow(10,09) +
inDate.getHours() * Math.pow(10,07) +
inDate.getMinutes() * Math.pow(10,05) +
inDate.getSeconds() * Math.pow(10,03) +
inDate.getMilliseconds()
}
// ***** SET the DATE and TIME HERE *****
// ( Remembering that in Java Dates,
// months go from 0 (Jan) to 11 (Dec) )
function ageClock() {
var leaveDate = new Date(2009,02,04,14,20) // for 2009 March 04, 7:31am
var now = new Date();
var elapsed = new ElapsedTime(leaveDate,now);
return elapsed.text;
}
function getElement(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function centerShowIt(id) {
var winMid, aD = getElement('ageDisplay');
if (!aD) return;
if (window.innerWidth) winMid = innerWidth/2;
else if (document.body) winMid = document.body.clientWidth/2;
if (!document.layers) {
aD.style.left = winMid - aD.offsetWidth/2;
aD.style.visibility = 'visible';
} else {
aD.pageX = winMid - aD.clip.width/2;
aD.visibility = 'show';
}
}
function update() {
var text = ageClock();
var aD = getElement('ageDisplay');
if (!aD) return;
if (!document.layers) {
aD.innerHTML = text + ' ';
} else {
aD.document.write('<SPAN class="bodytext">' + text + ';</SPAN>');
aD.document.close();
}
setTimeout('update()',1000);
}
/* NS4 resize bug fix from webreference.com */
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;
}
if (document.layers) window.onresize = function() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
/********************************************/
window.onload = update;
</SCRIPT>
and Code: <!-- Copy and Paste into BODY of HTML where age is to appear-->
<SCRIPT type="text/javascript" language="JavaScript">
document.write('<DIV id="ageDisplay" class="bodytext">');
document.write(ageClock());
document.write('</DIV>');
centerShowIt('ageDisplay');
</SCRIPT>
Is there a solution somewhere? Can anyone (re)write the script to fit above described functionality? Any tips or referals? Thanks Pepin Similar TutorialsDeleted
Hello all, I am currently using a javascript clock on my site to say the current time. I was wondering, what time does it display? Like I live on the east coast of the U.S. so does it display my time to someone in California? Currently it's 11:49am here so on my site it says that, but for someone else in the world would it say some other time? Thank you all Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. Hi there people I am new to Javascript and have come accross a problem where I need to check the value of a field on a form before it is submitted. It has to be either a whole number OR a particular text value... I have added the following code before the form is submitted. However even if the value of the field is a whole number or it is the correct text string, the message box still pops up and the form fails to submit! Code: if ((document.AddNewVA.HourlyRate.value!='neg') || (isNaN(document.AddNewVA.HourlyRate.value*1)))
{
// Not the correct text OR a whole number in the HourlyRate field...
alert('Please enter a whole number or \"neg\" in the Hourly rate field...');
document.AddNewVA.HourlyRate.value = "0";
document.AddNewVA.HourlyRate.focus();
return false;
}
Can anyone point me in the right direction please? Many thanks hey all, I am now at the point of being able to see the light at the end of the tunnel (woot!). After a lot of help from you guys I have tackled my RSS feed issue (sort of) to the point where i have a page that does basically what I need it to (http://www.the-rational-investor.com/test042311.php/). I now need to incorporate this java script developed into the big picture and of course, there seems to be problems. Since I know it works on its own, I must be running into problems getting all the functions working simultaneously and I once again need to call on the board's brilliance in figuring out what I am doing wrong....so here it goes I have taken out a lot of unnecessary code just to focus on the java script. Yes there is PHP code embedded but please don't beat up on me too much for that. here is the main page code: Code: <head>
<?
// function for onmouseover to do ALL THREE tasks //
?>
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
changetext(z);
var x=y;
var rssfeedvar = myArrayRssFeed[x];
showRSS(rssfeedvar);
}
</script>
<?
// First Task - function for onmouseover TEXT //
?>
<script type="text/javascript">
function changetext(z){
var s= z;
var textchangeEntries = myArrayEntries[s];
var id = document.getElementById("DBtext_large");
id.innerHTML=textchangeEntries;
var textchangeWebadr = myArrayWebadr[s];
var id = document.getElementById("DBtext_link").getElementsByTagName('a')[0];
id.nodeValue=textchangeWebadr;
id.setAttribute('href',textchangeWebadr);
id.innerHTML=textchangeWebadr;
var textchangeEmail = myArrayEmail[s];
var id = document.getElementById("DBtext_email");
id.innerHTML=textchangeEmail;
var textchangeRssUrl = myArrayRssUrl[s];
var id = document.getElementById("DBtext_rssUrl");
id.innerHTML=textchangeRssUrl;
var textchangeRssFeed = myArrayRssFeed[s];
var id = document.getElementById("DBtext_rssFeed");
id.innerHTML=textchangeRssFeed;
}
</script>
<?
// Second Task - functions for onmouseover IMAGES //
?>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
var myArrayEntries = ["<?php echo implode('","',$map_entry_array);?>"];
var myArrayWebadr = ["<?php echo implode('","',$web_adr_array);?>"];
var myArrayEmail = ["<?php echo implode('","',$email_adr_array);?>"];
var myArrayRssUrl = ["<?php echo implode('","',$rss_url_array);?>"];
var myArrayRssFeed = ["<?php echo implode('","',$rss_feed_array);?>"];
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(<?echo("$qs1");?>);
</script>
<?
// Third Task - functions for onmouseover RSS FEED //
?>
<script type="text/javascript">
function showRSS(str)
{
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getrss.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
getrss.php is unchanged Code: <?php
//get the q parameter from URL
$q=$_GET["q"];
//find out which feed was selected
if($q=="http://twitter.com/statuses/user_timeline/53777622.rss")
{
$xml=("http://twitter.com/statuses/user_timeline/53777622.rss");
}
elseif($q=="http://www.autisticsociety.org/rss/news2.php")
{
$xml=("http://www.autisticsociety.org/rss/news2.php");
}
elseif($q=="http://sableresources.com/news/")
{
$xml=("http://sableresources.com/news/");
}
elseif($q=="http://www.northgateminerals.com/rss/pressrelease.aspx")
{
$xml=("http://www.northgateminerals.com/rss/pressrelease.aspx");
}
elseif($q=="http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0")
{
$xml=("http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0");
}
elseif($q=="http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL")
{
$xml=("http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL");
}
elseif($q=="http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1")
{
$xml=("http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1");
}
elseif($q=="http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://www.breakwater.ca/rss/pressrelease.aspx")
{
$xml=("http://www.breakwater.ca/rss/pressrelease.aspx");
}
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
//output elements from "<channel>"
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");
//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
echo ("<p><a href='" . $item_link
. "'>" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>
Thanks again for all your wonderful help and all the best to you and your families on this Easter weekend, Brian I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working? --- Code: var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]
links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
--- Any help would be greatly appreciated! Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! Hello, I am new to javascript and have managed to create the below form with few fields validation that is working. I also have an email format validation function which is not working. Any help would be hightly appreciated. Below with the form with the javascript <html> <script language="JavaScript" type="text/javascript"> <!-- var radio_selection=""; function checkform ( form ) { **// ** START ** **if (form.name.value == "") { ****alert( "Please enter your name." ); ****form.name.focus(); ****return false; **} if (form.Phone.value == "") { ****alert( "Please enter your phone number." ); ****form.Phone.focus(); ****return false; **} **if (form.email.value == "") { ****alert( "Please enter your email." ); ****form.email.focus(); ****return false; } if (radio_selection=="") { alert("Please indicate your attendance."); return false; } *// ** END ** **return true; } function checkEmail(form) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } alert("Invalid E-mail Address! Please re-enter."); return false; } //--> </script> <body> <form style="font-family:lucida calligraphy;font-size:120%;color:maroon" action="invitees.php" method="post" onsubmit="return checkform(this);checkEmail(this.email.value);"> <table cellspacing="5" cellpadding="5" border="0"> <tr> <td valign="top" > <style="font-family:lucida calligraphy;font-size:100%;color:maroon">Name: </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Phone Number </td> <td valign="top"> <input type="text" name="Phone" id="Phone" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Email Address: </td> <td valign="top"> <input type="text" name="email" id="email" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Will You Attend </td> <td valign="top"> <input type="radio" name="Attendance" id="Attendance_0" value="Yes" onClick="radio_selection='yes'" /> Yes <input type="radio" name="Attendance" id="Attendance_1" value="No" onClick="radio_selection='no'"/> No <input type="radio" name="Attendance" id="Attendance_2" value="Maybe" onClick="radio_selection='maybe'"/> Maybe<br/> </td> </tr> <tr> <td valign="top"> Adults <select name ="adults" id="Adults" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> <td valign="top"> Kids <select name="kids" id="Kids" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> </tr> <tr> <td valign="top"> Post a Note </td> <td valign="top"> <textarea name="Note" id="Note" rows="6" cols="35"></textarea> </td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </table> </form> </html></body> Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative.. Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("commpopup");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<div class="togglecomment">
<div class="popup" id="commpopup">
<div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
</div>
<div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>
Store Information to multiple textboxes from database Code: $count=<mysql_num_rows($query1);
for($i=0;$i<mysql_num_rows($query1);$i++)
{
$row1=mysql_fetch_array($query1);
$getval[$i]=$row1[UserId];
Print "<input type=text name='txtbox[]' id='txtbox[]' value='.$getval[$i].'">;
}
then i call a javascript function Print "<script language=javascript>Call_Fun($count)</script>"; The above code store data into textbox and call the js function in .js file Code: function Call_Fun(count)
{
for(var i=0;i<count;i++)
{
alert(document.getElementbyId('txtbox')+i.value);
}
}
But it doesn't retreive values in .js Thankyou all Hi All, This is my first post and I need some assistance. I'm learning code and attempting to put more than 1 script on a webpage, but individual (separate pages) but together, neither one works. I'm a newbie and my professor doesn't know how to teach so it's me trying to do this myself and any assistance will be helpful. This is what I have (trying to add random pictures and a cycling banner) <script> var imgArray = new Array (4); var index = 0; function cycle () { document.banner.src = imgArray[index].src; index++; if (index > 3) { index = 0; } setTimeout("cycle()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "Im.png"; imgArray[1] = new Image; imgArray[1].src = "Tired.jpg"; imgArray[2] = new Image; imgArray[2].src = "of this.jpg"; imgArray[3] = new Image; imgArray[3].src = "Rainy.jpg"; cycle(); return; } </script> </head> <body onLoad="select();startup()"> <div align="center"> <img name="banner" src="Im.png"> </div> </body> </body> <script> var imgArray = new Array (5); var index = 0; function select () { index= Math.floor(Math.random() * 5); document.banner.src = imgArray[index].src; setTimeout("select()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "1.jpg"; imgArray[1] = new Image; imgArray[1].src = "2.jpg"; imgArray[2] = new Image; imgArray[2].src = "3.jpg"; imgArray[3] = new Image; imgArray[3].src = "4.jpg"; imgArray[4] = new Image; imgArray[4].src = "sheep.jpg"; select(); return; } </script> </head> <body onLoad="cycle(); startup()"> <div align="center"> <img name="banner" src="1.jpg"> </div> </body> I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! Hi all, I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code:
<html>
<head>
Test
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function test(tmpForm) {
window.alert(tmpFrm.elements["weight"].value);
window.alert(tmpForm.elements["error"].innerHTML);
}
</SCRIPT>
</head>
<body>
<form id="form_137" name="form_137">
<input id="weight" name="weight" value="" />
<span id="error" name="error">abc</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
<form id="form_137_down" name="form_137_down">
<input id="weight" name="weight" value="" />
<span id="error" name="error">zzz</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
</body>
</html>
All I am using my SOAP API using java script. this example explain how to send single soap request using js Code: var symbol = "MSFT";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://www.webservicex.net/stockquote.asmx?op=GetQuote",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.responseText);
// http://www.terracoder.com convert XML to JSON
var json = XMLObjectifier.xmlToJSON(xmlhttp.responseXML);
var result = json.Body[0].GetQuoteResponse[0].GetQuoteResult[0].Text;
// Result text is escaped XML string, convert string to XML object then convert to JSON object
json = XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(result));
alert(symbol + ' Stock Quote: $' + json.Stock[0].Last[0].Text);
}
}
xmlhttp.setRequestHeader("SOAPAction", "http://www.webserviceX.NET/GetQuote");
xmlhttp.setRequestHeader("Content-Type", "text/xml");
var xml = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
'<soap:Body> ' +
'<GetQuote xmlns="http://www.webserviceX.NET/"> ' +
'<symbol>' + symbol + '</symbol> ' +
'</GetQuote> ' +
'</soap:Body> ' +
'</soap:Envelope>';
xmlhttp.send(xml);
// ...Include Google and Terracoder JS code here...
Now i want to send multiple soap request at a time (mean request more than one envelop). I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting. For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages. Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great! HTML Code: <html>
<head>
<link href="red.css" rel="stylesheet"
type="text/css" title="red" media="screen" />
<link href="green.css" rel="alternate stylesheet"
type="text/css" title="green" media="screen" />
<link href="blue.css" rel="alternate stylesheet"
type="text/css" title="blue" media="screen" />
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>
</head>
<body>
<a href = "home1.html">Page 1</a>
<br>
<br>
<a href = "home2.html">Page 2</a>
<br>
<br>
<a href = "home3.html">Page 3</a>
<br>
<br>
<br>
<br>
<a href = "#" onclick="changeStyle('red')">Red Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a>
<br>
<br>
<a href = "#" onclick="changeStyle('green')">Green Stylesheet</a>
</body>
</html>
CSS Code: body
{
background-color:red;
}
is there some way to searching through multiple path or recursively searching through a path (folders and subfolders) using the code below which seems to search only one node in the tree? Many Thanks. there are basically subfolders in \documents and then subfolders therein. i would like to search it therein for all kinds of files/filenames based on "search criteria". one more thing - is it ok/advisable to use active x objects considering most modern browsers have it disabled or give warnings? Code: <script>
var Fo =new ActiveXObject("Scripting.FileSystemObject");
var StrOut = new String();
var FileName = new String();
var Extention = new String();
function FindFile(FOo)
{
var FSo = new Enumerator(FOo.Files);
for(i=0;!FSo.atEnd();FSo.moveNext())
{
if(FileName == "*" || FSo.item().name.slice(0,FSo.item().name.lastIndexOf(".")).toLowerCase().indexOf(FileName)>-1)
if(Extention == "*" || FSo.item().name.slice(FSo.item().name.lastIndexOf(".")+1).toLowerCase().indexOf(Extention)>-1){
StrOut += "<tr "+ ((i%2)? "":"bgcolor=#C4E3F2") +"><td width=50%><font class=find>" + FSo.item().name + "</font></td><td width=25%><font class=find>" + FSo.item().type + "</font></td><td width=50%><font class=find>"+ String(FSo.item().size/(1024*1024)).slice(0,3) +" MB</font></td></tr>";
i++
}
}
}
function Search()
{
FileName = (search.value.lastIndexOf(".")>-1)? search.value.slice(0,search.value.lastIndexOf(".")):(search.value.length>0)? search.value.toLowerCase():"*"; //Get Searched File Name
Extention = (search.value.lastIndexOf(".")>-1)? search.value.slice(search.value.lastIndexOf(".")+1).toLowerCase():"*"; // Get Searched File Extention Name
if(path.value.length>0 && Fo.FolderExists(path.value)){
StrOut = "<table border=0 width=100% cellspacing=0>"
FindFile(Fo.GetFolder(path.value));
outPut.innerHTML = StrOut+"</table>";
}
else alert("Insert Correct Path Address");
}
</script>
Code: <BODY topmargin="0" leftmargin="0">
<table border=0 width=100% cellspacing="0" style="border-collapse: collapse" cellpadding="2"><tr>
<td dir="ltr" bgcolor="#FFD9D9"><b><font face="Verdana" size="2">Filename :
</font></b> </td>
<td dir="ltr" bgcolor="#C4E3F2">
<input size=50 type=text id=search name=search class="Find"></td>
</tr><tr>
<td dir="ltr" bgcolor="#C4E3F2">
<p dir="ltr"></td>
<td bgcolor="#FFD9D9"><input size=50 type=hidden value="\Documents" id=path name=path class="Find" >
<input type=button value="Search" onClick=Search() class="Find"></td>
</tr><tr>
<td colspan=2 align=left bgcolor="#FFFFFF"><font face=Verdana size=2><b>Search Result</b></font><hr></td>
</tr><tr>
<td colspan=2 bgcolor="#FFFFFF"><div id=outPut></div></td>
</tr></table>
</BODY>
</HTML>
Hi, I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page. The below works fine for one call: Code: <script type="text/javascript">
function showHint(str){
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<label>Search by name: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" />
<br />
<p>Suggestions: <span id="txtHint"></span></p>
<br />
But if I want to do mulitple I have tried changing it to: Code: <script type="text/javascript">
function showHint(File,ID){
if (str.length==0){
document.getElementById(ID).innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",File,true);
xmlhttp.send();
}
</script>
</head>
<body>
<label>Search by firstname: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint('GetFirstName.php?q='+str,'txtHint')" />
<br />
<p>Suggestions: <span id="txtHint"></span></p>
<br /> <label>Search by surname: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint('getLastName.php?q='+str,'txtHintSn')" />
<br />
<p>Suggestions: <span id="txtHintSn"></span></p>
<br />
The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script. I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. I have been working on a few budget scripts that I can access from the web in using HTML. My problem is that when variable values change I need to change these values in all of the HTML files on the server. I know that there is a way to declare global variables in a single file and use those values in another file but I have not been able to find any information that tells me exactly how to do this. I have tried to put it together on my own using what little informaiton I have been able to find but have not been able to get this to work. Is there a more detailed referance that I can find somewhere or does anyone know what steps I need to take to make this happen?
I made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>";
$datestime=time();
echo "<input type=hidden name=dateid value='$id'>";
echo "<input type=hidden name=datestime value='$datestime'>";?>
<script type="text/javascript">
DateInput('orderdate', true, 'yyyy-mm-dd')</script>....
|
|||||||