JavaScript - Add 20 To Loop And Seperate Number And Write To A Style

Hi

Having a small problem with writing out the matches from an array using a For loop.

I have two arrays, lets say arrayA and arrayB. In arrayB are numbers which are a number of miles, ie 1,2,6,4,5,6,6. And in arrayA are the days of the week. Each day of the week is associated with a mileage, ie Mon = 1, Tues = 2 etc.

My script has found the largest mileage in arrayB. Next I have to find the days of the week that match this highest mileage and write these out, along the lines of "The highest mileage was 6 run on Wed, Sat, Sun."

I have managed to get a For loop to work with this BUT..... I can only get it to write out the first instance of the day the match is found. ie "The highest mileage was 6 run on Wed,"

Pointers in the right direction to help me solve this problem would be much appreciated.

[CODE]
maximumDistanceIndex = 0;
for (var distance = 1; distance < distanceArray.length; distance = distance + 1)
{
if (distanceArray[distance] > distanceArray[maximumDistanceIndex] )
{
maximumDistanceIndex = distance
document.write ('The maximum distance was ' + maximumDistance + ' km' + ' run on ' + dayArray[maximumDistanceIndex] );
}
}
[CODE]

hi,

I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css.

my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image).

i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it.

the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me.

if you could point me in the direction or just a hint that would be really helpful.

thanks in advance

I am trying to split the (id) values between seperate forms
and the submit buttons are not located between the form tags.

Note:
->The 3 forms are located at the top of page
->the (3) Submit buttons are in a query and are outside the form tags.
->In this case it does not make sense to have the form duplicating itself in the sql_query.

need the correct code for the 3 script functions var form1, form2, form3
then i need the correct function submit code something like -> onClick='Split(this.form1,1)'

Also: To keep this simple could the 3 scripts be combined into one?

Code:

<!-- SPLIT VALUES BETWEEN SEPERATE FORMS -->

<script type="text/javascript"> 
function Add(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form1["F"+first].value = temp[0];
  sel.form1["F"+(first+1)].value = temp[1];
}
</script>

<script type="text/javascript"> 
function Edit(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form2["F"+first].value = temp[0];
  sel.form2["F"+(first+1)].value = temp[1];
}
</script>

<script type="text/javascript"> 
function Delete(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.id.split(",");
  sel.form3"F"+first].value = temp[0];
  sel.form3["F"+(first+1)].value = temp[1];
}
</script>

<form method='post' name='form1' action='record_add.php'>
<input type='hidden' id='F1' name='t101' value='' >
<input type='hidden' id='F2' name='t102' value='' >
</form>

<form method='post' name='form2' action='record_edit.php'>
<input type='hidden' id='F3' name='t103' value='' >
<input type='hidden' id='F4' name='t104' value='' >
</form>

<form method='post' name='form3' action='record_delete.php'>
<input type='hidden' id='F5' name='t103' value='' >
<input type='hidden' id='F6' name='t106' value='' >
</form>


<!-- NOTE: THE SUBMIT BUTTONS ARE IN A QUERY OUTSIDE THE FORM TAGS AND NEED TO TARGET THE PROPER FORM1,2,3 onClick -->
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form1,1)'>
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form2,3)'>
<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form3,5)'>

I have 4 text boxes that are supposed to load 4 seperate values of data from one field in one table from a database. The field is called interface_cropsettings (from the interface table) and these values have been concatenated and comma seperated in this field.

Code:

<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceXPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceYPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropHeight" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropWidth" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>

Once the form is filled out and saved, the data is inserted into the database and the values from these 4 text boxes are concatenated, comma seperated and inserted into that one field correctly.

(Example)

If the 4 text boxes have the following values:

X Position = 12.34
Y Position = 56.78
Crop Height = 250
Crop Width = 500

in the database field they become:

12.34,56.78,250,500

However, if the form is closed and then re-opened, each text box displays the entire database field rather then each value seperated in the corresponding text box.

(Example)

All 4 text boxes display this:

12.34,56.78,250,500

I already know why the data appears like this in the form, my problem is that I'm not sure how to write the javascript to seperate the values into the correct corresponding fields, assuming javascript is what I should be using! Can anyone help me out with this??

Also, this is kind of irrelevant but just in case you're wondering, this form is part of a cold fusion application!

I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function:

1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100.

Does any one know how to code this in my function below in javascript:

Code:

function insertQuestion(form) 
    {   
    
         var row = document.createElement("tr");
         var cell, input;
    
    cell = document.createElement("td");
         cell.className = "weight";
         input = document.createElement("input");
         input.name = "weight_" + qnum;
         input.onkeypress = "return isNumberKey(event)";
         cell.appendChild(input);
         row.appendChild(cell);
    }

Code:

function move_user_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageUser').offsetTop;
					x = x + step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageUser').offsetTop;
					x = x - step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y - step;
					document.getElementById('imageUser').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y + step;
					document.getElementById('imageUser').style.left = y + "px";
					break;
				}
			}
			function move_report_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageReport').offsetTop;
					x = x + step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageReport').offsetTop;
					x = x - step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y - step;
					document.getElementById('imageReport').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y + step;
					document.getElementById('imageReport').style.left = y + "px";
					break;
				}
			}

Code:

<div id ="display" style="width:640px; height:480px; overflow:hidden;">

			<div>
				<img src ="
				<?php
				echo UPLOADPATH . $userImage;
				?>
				" style = "position:absolute;" id="imageUser"/>
			</div>
			<div id ="imageReport">
				<img src = "
				<?php
				echo $reportImage;
				?>
				" style = "opacity:0.25;height:700px; width:450px;" />
			</div>
		</div>
		<div style="position:absolute; top:550px; left:100px;">
			<p>Control User Image</p>
			<input type=button onClick=move_user_img('up') value='Up'>
			<input type=button onClick=move_user_img('left') value='Left'>
			<input type=button onClick=move_user_img('right') value='right'>
			<input type=button onClick=move_user_img('down') value='down'>
		</div>
		<div style="position:absolute; top:650px; left:100px;">
			<p>Control Report Image</p>
			<input type=button onClick=move_report_img('up') value='Up'>
			<input type=button onClick=move_report_img('left') value='Left'>
			<input type=button onClick=move_report_img('right') value='right'>
			<input type=button onClick=move_report_img('down') value='down'>
		</div>

I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?

When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string!
15.23689 .toFixed ( 2 ) ==> "15.24"
So does it convert the number into string?

if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them?
eg
Code:

<html>
<head>
	<title>expandable text area</title>
	<style type="text/css">
		#expandable{
			height: 100px;
		}
	</style>
	
</head>
<body>
<form>
	<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
	document.getElementById('expandable').addEventListener('click',function(){
		
		if(!this.style.height){
			this.style.height = this.scrollHeight+'px';
		}
		alert(this.style.height);
	}, true);
</script>
</html>

In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element

I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed.

So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write.

Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script.

Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script.

Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too.

Thanks in advance!

Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together.

What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array.

What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created.

Here is the test object:
Code:

test = [
	{ 
	  "name" : "Menu 1", 
		"url" :  "menu1.html",
		"submenu" : [
		  {
				"name" : "menu 1 subitem 1",
				"url" :  "menu1subitem1.html"
			},
			{
				"name" : "menu 1 subitem 2",
				"url" :  "menu1subitem2.html"
			} ]
	},
	{ 
	  "name" : "Menu 2",
	  "url" :  "menu2.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 2subitem 1", 
			  "url" :  "menu2subitem1.html"
			},
		  { 
			  "name" : "menu 2subitem 1",
			  "url" :  "menu2subitem1.html"
		  } ]
	},
	{ 
	  "name" : "Menu 3",
	  "url" :  "menu3.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 3 subitem 1", 
			  "url" :  "menu3subitem1.html"
			},
		  { 
			  "name" : "menu 3 subitem 1",
			  "url" :  "menu3subitem1.html"
		  } ]
	}
];

Here is the recursive function:
Code:

function buildMenuHTML(menuData,level) {
	var ul;
	if (level == 1) {
		ul = "<ul id='menu'>";
	} else {
		ul = "<ul class='level" + level + "'>";
	}

	for (i = 0; i < menuData.length; i++) {
		menuItemData = menuData[i];
		
		ul += "<li>";
		ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
		
		if (typeof menuItemData.submenu != 'undefined') {
			ul += buildMenuHTML(menuItemData.submenu,level + 1);
		}
		
		ul += "</li>";
	}
	
	ul += "</ul>";
	return ul;
}

Here is how the function is called initially:
Code:

buildMenuHTML(test,1);

This is it's return value (with indentation added for readability):
Code:

<ul id='menu'>
  <li><a href='menu1.html'>Menu 1</a>
    <ul class='level2'>
      <li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
      <li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
    </ul>
  </li>
</ul>

'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated.

Hi all

I'm well aware that I can't post assignments here and expect an answer, however, I have been staring at this code for so long. I feel I am close to the solution (to get the correct output to the browser) but I just cannot get it to count how many moves it takes. I don't want an answer, but a nudge in the right direction would be very grateful.
As you can see from the code and the output, it will attempt to write to the browser how many moves, but only '0'.

Code:

function rollDie()
{
	return Math.floor(Math.random() * 6) + 1;
}

/*
*searches for a number in a number array.
*
*function takes two arguments
*	the number to search for
*	the  number array to search
*function returns the array index at which the number was found, or -1 if not found.
*/
function findIndexOf(number, numberArray)
{
    var indexWhereFound = -1;
    for (var position = 0; position < numberArray.length; position = position + 1)
    {
        if (numberArray[position] == number)
        {
            indexWhereFound = position;
        }
    }
    return indexWhereFound;
}

//ARRAYS that represent the board -- you do not need to change these
//array of special squares
var specialSquaresArray = [1,7,25,32,39,46,65,68,71,77];
//array of corresponding squares the player ascends or descends to
var connectedSquaresArray = [20,9,29,13,51,41,79,73,35,58];

//VARIABLES used -- you do not need to change these
//the square the player is currently on
var playersPosition;
//play is initially at START
playersPosition = 0;

//what they score when they roll the die
var playersScore;

//the index of the player's position in the special squares array or -1
var indexOfNumber;

//MAIN PROGRAM

//TODO add code here for parts (iii), (iv)(b), (v), and (vi)
// start of question(iii)
playersScore = rollDie();
	document.write(' Sco  ' + playersScore);
playersPosition = playersScore + playersPosition;
	document.write(', Squa  ' + playersPosition);

indexOfNumber = findIndexOf(playersPosition, specialSquaresArray);

if (indexOfNumber != -1)
{
	document.write(', Ladder to Squa  ' + connectedSquaresArray[indexOfNumber]);
	playersPosition = connectedSquaresArray[indexOfNumber];
	indexOfNumber = -1;
}
document.write('<BR>')
// end of question(iii) 

// start of question(iv)(b) 
while(playersPosition<=80)


{
playersScore = rollDie()
	document.write(' Sco  ' + playersScore)
playersPosition = playersPosition + playersScore
	document.write(', Squa  ' + playersPosition)
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray)


if(indexOfNumber != -1)
{
	document.write(', Ladder to Squa  ' + connectedSquaresArray[indexOfNumber]);
	playersPosition = connectedSquaresArray[indexOfNumber];
}	
	document.write('<BR>');
}
var countMoves = 0;
while(countMoves <= 0)
{
	document.write('You took ' + countMoves + ' moves to get out');
	countMoves = countMoves + 1
}	

/*for (var countMoves = 0; countMoves < playersPosition; countMoves = countMoves + 1)
{
	countMoves = countMoves + playersPosition;
	document.write('You took ' + countMoves + ' moves to get out');

}*/




// end of question(iv)(b) 

// start of question (v) 
/*if (playersPosition >=80)
{
	document.write('The player is out');
}*/
// end of question (v)





 
</SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Many thanks.

Hi i have a function (i wont write it out coz it is too long!) but after i have done the main calculations within this function i wont to display some of the variables in a table.

i have writen:

document.write(
<table border="1">
<tr><td>
Value 1
</td><td>
document.write(a); //here *
</td></tr>
</table>
);

were it says "here *" i wont to write within the table variable a (which i have defined properly in the function).
However, as i have already written document.write it actually displays the text "document.write(a);" instead of the value for var a.

Help asap please as it in for school soon!

Thanks in advanced
:D

Hello... Thanks for reading...

I am getting an undefined error when i try to get a value from this array in the interior loop...

Code:

// This is the array I am trying to access
AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"]
AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"]
AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"]
AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"]

I have hard coded values and had success such as:
Code:

data = AuditTable[1][0]

But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined:
Code:

// produces error
data = AuditTable[i][j]
//Works but retrieves wrong data
data = AuditTable[j][i]
//Works but retrieves wrong data
data = AuditTable[1][i]
//Works but retrieves wrong data
data = AuditTable[j][2]

I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much...

Code:

var reportArray=new Array();
var reportData, title, subTitle, data;
		

for(i in parmarray)// loop thru AuditTable array and get values
		{
			title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">';
			title += namearray[i][0];
			title += '</div>';
			reportArray.push(title);//Take compiled variable value and put it into array
			
			for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values
			{
				
				subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are
				data = AuditTable[1][0];//points to the current row where actual data is
				
				html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">';
				html += subTitle;
				html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">';
				html += data;
				html += "</div>";

				reportArray.push(html);// put results into array
			}		
		}

this had to do wiht HTML and javascirp thow would you make a function that wirtes somthing in a input box(sorry about messy ness i wasint looking)