JavaScript - Creating Unobtrusive Html/javascript

First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site
http://www.collisionbodyworks.com/Pl...tic/index.html

Any help would be greatly appreciated. Thank you in advance

Hi,

Does anyone know how to make the cycle function in jquery unobtrusive?

I've got the following code and when I disable javascript, I get a nasty long list of images

Jquery code:

$(document).ready(function() {
$('.homepage-slideshow').cycle({
fx: 'fade',
befo onAfter,
pause: 1,
timeout: 0,
pager: '#nav'
});
});

function onAfter() {

var cycle_href = this.href;
var brokenstring = this.title.split(" :: ");

var cycle_title = brokenstring[0];
var cycle_descr = brokenstring[1];

$('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>');
$('#output-descr').html(cycle_descr);


}

Html code:

<div class="homepage-slideshow">
<a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a>

<a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a>




</div>
<div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div>
<div class="homepage-metadata">
<p id="output-descr"></p>
<h3 id="output"></h3>
</div>

So i've written abit of code myself in order to do this:

I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop...

The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing.

This is how i started coding:

1 . 2 functions for playing/pausing a video tag
2 . Check how many <video> tags are on the page (after load)
3 . Add Event "mouseout" + function to each <video> tag

And the actual code:

Javascript:
Code:

/*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/

function speelFilmpje(){
    document.getElementById("filmpke").play();
}

function stopFilmpje(){
    document.getElementById("filmpke").pause();
}

window.onload = function(){
/*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/
    var video = document.getElementsByTagName('video');
    var videotags = video.length;
    //console.log(videotags);
    for(i=0; i<videotags;i++){
        video[i].addEventListener("mouseover", speelFilmpje,false);
        video[i].addEventListener("mouseout", stopFilmpje,false);
    }//einde van de functie
}

HTML:
Code:

<div id="right_column">
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                </div>

Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_-

I basically have a property website with different types of properties, e.g. detached houses, semi detached houses. and I want to create a filter so when you click 'detached houses' only detached houses are shown.


Is there any tutorials you can point me to, would be appreciated.

This is what i have so far..
Code:

<div id="main">
	
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td><div id="filter"><p class="houses" style="font-family:helvetica;color:#0155a1;font-size:14px;background:url(cutouts/forsale/filter.jpg) no-repeat;"><b><u>Houses</u></b>
						<br />
						<span class="dh"><b><u>Detached Houses</u></b></span>
						<br />
						<span class="dh"><b><u>Semi-detached houses</u></b></span>
						<br />
						<span class="dh"><b><u>Terraced houses</u></b></span>
						<br />
						<br />
						<b><u>Flats / Apartments</u></b>
	
	</p></div></td>
	<td><div id="info1"><a href="#"><img src="cutouts/forsale/pinfo1.jpg" alt=""/></a></div></td>
	</tr>
</table>

<div id="info2"><a href="#"><img src="cutouts/forsale/pinfo2.jpg" alt=""/></a></div>
<div id="info3"><a href="#"><img src="cutouts/forsale/pinfo3.jpg" alt=""/></a></div>
<div id="info4"><a href="#"><img src="cutouts/forsale/pinfo4.jpg" alt=""/></a></div>


<script type="text/javascript">

var properties = {$properties_json};

// very simple getter method that uses a single key-value pair.
var selectProperties(k, v) {
  var rv = [];
  for (var i in properties) {
    if (properties[i][k] == v) {
      rv.push(properties[i]);
    }
  }
  return rv;
} // selectProperties()


</script>
	
	</div>

Below is a javascript function from my website that loops through nodes in an XML file retrieving certain information about those who joined in the current month/year. The part in red creates a link which when clicked runs a function called show() with the relevant i variable value e.g. show(2) for the second node if that is relevant. Anyway the red part works in Chrome but not Internet Explorer (surprise surprise). I did some research which says that .setattribute is not allowed in IE. How can I change the red code to create links for the relevant records which works in IE?

Thank you for your help

Code:

function displaymember() {
    var d = new Date();

    var curr_month = d.getMonth();
    curr_month++;
    if (curr_month < 10) curr_month = "0" + curr_month;
    var curr_year = d.getFullYear();

    for (i = 0; i < x.length; i++) {

        membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
        name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
        body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
        ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
        sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
        seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
        date = (x[i].getElementsByTagName("date_joined")[0]);
        month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
        year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
         newa = document.createElement("a");
        aIdName = "my" + i + "a";
        ahref = "#";
        aclick = "show(" + i + ")";
        newa.setAttribute("id", aIdName);
        newa.setAttribute("href", ahref);
        newa.setAttribute("onclick", aclick);
        newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " with " + membershipstatus + " membership seeks " + seeking + "<br/>"; 

        if (curr_month == month && curr_year == year) {
            document.getElementById("member").appendChild(newa);
        }


    }

}

I'm using a form data reference, something like P-1234 for example to create a text file and a link to the file. This is during the construction of a new table or table row with javascript. I have an array of one or more references submitted via form using $_POST. On my action page I am creating a txt file P-1234. If I am creating a table ot table row using createElement(), one of the cells will have a link to the file.
If the file is created as follows:
PHP Code:
$File = $_POST['ref'][$i] . "txt"; 


After creating the cell
Code:

var Cell = document.createElement('td');

I assign the file to a variable
var File = "<?= $File ?> ";
I assume the link is inserted using innerHTML? If so, do I just append the filename to the end of the file path like this?
Cell.innerHTML = "http://localhost/Project/+File";
If this is not the right way can someone point me in the right direction?

Evening all.

Here's a snippet:

Code:

			canvases[i] = document.createElement('canvas');
			canvases[i].style.width = '3px';
			canvases[i].style.height = '100%';
			canvases[i].getContext("2D");
			canvases[i].fillRect(1,0,1,table_height);

I'm trying to dynamically create a canvas element. Later in the script it gets attached to the DOM, and this works fine if the last two lines are missing. I end up with a canvas element that is 3px wide and 100% of the containing div tall. However, the last two lines make it crash, with the error report 'canvases[i].fillRect is not a function'. If I change the last two lines to

Code:

			var drawing = canvases[i].getContext("2D");
			drawing.fillRect(1,0,1,table_height);

it says 'drawing is null'. Something seems to be going wrong with the getContext bit, because setting the height and width work fine. Any ideas? It behaves the same if I append the canvas element to the DOM before trying to do the drawing as well. This is in FF4.0.1 with a xhtml1-strict.dtd doctype and valid html.

Thanks,

Chris

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
     Project 2
    </title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us" />
    <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />
    
<script type="text/javascript">
/* <![CDATA[ */
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("You must enter a numeric value!");
return false;
}
return true;
}
function calculate() 
  var shipping = 0;
  var total = 0; {
  if (document.forms[0].hand_tool.value != document.forms[0].hand_tool.value == true)
    (document.forms[0]item1.value == 20); {
  && document.forms[0].shipping.value == (shipping + 5); {
  && (document.forms[0].total.value = document.forms[0].hand_tool.value + document.forms[0].shipping.value)
      }
    }   
function confirmSubmit() {
  if (document.forms[0].first_name.value = "null") {
  window.alert("You have not entered the requested Customer Information.");
  return false;
  }
  else if (document.forms[0].last_name.value = "none" || document.forms[0].city.value = "" || document.forms[0].state.value = "none") {
  window.alert("You have not entered the requested Customer Information.");
  return false;
  }
  var pmntMethod = false
  for (var j=0; j<3; ++j) {
      if (document.forms[0].credit_card[j].checked == true) {
          pmntMethod = true;
          break;
          }
  }
  if (pmntMethod != true) {
      window.alert("You must select a method of payment.");
      return false;
  }
return true;
}
function confirmReset() {
  var resetForm = window.confirm("Are you sure you want to reset the form?");
  if (resetForm == true)
      return true;
  return false;
  }
/* ]]> */
</script>
</head>

  <body> 
  <!-- Your XHTML here -->
<h1>Purchase Order</h1>
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">    
<h3>Products</h3>
<table>
<tr>
  <td>  
<p>Hand Tools <br />$20.00<img src="handtools.gif" alt="Hand Tools" class="img" /></p>
  </td>
  <td>
  <select name="hand_tool" size="1">
      <option value="hand_tool">Hand Tool</option>
      <option value="saw">Saw</option>
      <option value="hammer">Hammer</option>
      <option value="screwdriver">Screwdriver</option>
      <option value="wrench">Wrench</option>
      <option value="pliers">Pliers</option>
      </select>
  </td>
  <td>
  <p>Power Tools <br />$30.00<img src="powertools.gif" alt="Power Tools" class="img" /></p>
  </td>
  <td>      
  <select name="power_tool" size="1">
      <option value="power_tool">Power Tool</option>
      <option value="circular_saw">Circular Saw</option>
      <option value="sabre_saw">Sabre Saw</option>
      <option value="drill">Drill</option>
      <option value="belt_sander">Belt Sander</option>
      <option value="table_saw">Table Saw</option>
    </select>
  </td> 
</tr>
</table>
  
<h3>Shipping Fees</h3>
<table>
  <tr>
  <td>Item 1: <input type="text" name="item1" value="" onchange="calculate();" /></td>
  <td>Item 2: <input type="text" name="itme2" value="" onchange="calculate()" /></td>
  </tr>
  <tr>
  <td>Shipping: <input type="text" name="shipping" value="" /></td>
  <td>Total: <input type="text" name="total" value="" /></td>
  </tr> 
</table> 
<h3>Customer Information</h3>
  <p>First Name
    <input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/>  
  Last Name
    <input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p>
  <p>Street Address 1 
    <input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p>
  <p>City 
    <input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" />
  State 
    <input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" />
  Zip 
    <input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p>
  <p>Phone
		<input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" />
	Fax
    <input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p>
  
  <p>Payment Method? 
  <input type="radio" name="credit_card" />Visa
  
  <input type="radio" name="credit_card" />MasterCard
  
  <input type="radio" name="credit_card" />American Express</p>
  <p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p>

<table>
<tr>
  <td>  
<p>Expiration Month</p>
  </td>
  <td>
  <select name="month" size="1" style="width: 200px">
      <option value="months">Month</option>
      <option value="january">January</option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>
      </select>
  </td>
  <td>
  
  <p>Expiration Year</p>
  </td>
  <td>      
  <select name="expiration" size="1">
      <option value="2009">2009</option>
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>
    </select>
  </td> 
</tr>
</table>

<p><input type="image" alt="Graphical image of a submit button" src="submit.gif" onchange="confirmSubmit()" /></p>
<p><input type="reset" value="Reset Purchase Order Form" onchange="confirmReset();" /></p>    
</form>    


<!-- your XHTML validation icon-->  
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" 
        style="border: 0px;" /></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img src="http://www.austincc.edu/jscholl/images/vcss.png" 
    alt="Valid CSS!" height="31" width="88" style="border: 0px;" /></a>       
</p>

  </body>
  </html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Overlay test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#overlay {
		background-color: #ccffcc;
		display: none;
		margin-left: -400px;
	position: absolute;
	top: -250px;
	left: 50%;
	width: 800px;
	height: 500px;
	visibility: visible

	}
	
	#container{
	
		color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	overflow: visible;
	visibility: visible;
	display: block

		
	}
	</style>
    <script type="text/javascript" src="swfobject/swfobject.js"></script>

	<script type="text/javascript">
	//<![CDATA[
			   
			  
	function hide() {
		document.getElementById("overlay").style.display = "none";
	}
	
	function show() {
		document.getElementById("overlay").style.display = "block";
		swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
	

		
	
	}
	
	

	//]]>
	</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>

 <a href="#" onclick="hide();">Click me</a> to close.</div></div>

<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>


</body>
</html>

I got some of this code from these forums. Thank you.

It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions.

How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser..

Thanks

I am working with an InDesign CS3 document, with multiple books, and what I want to do is search for a string and turn that string or some how attach an InDesign Hyperlink object to that string. I can find the string using the findText() method
var myFoundItems = app.documents.item(0).findText();
And it is returned as a TextStyleRange with its parent being a Story object. What I'm having trouble with is either replacing or attaching a Hyperlink object to string or TextStyleRange. Hyperlink objects to not have a contructor so I don't know how to instantiate a new one and once I get a new one created and the fields populated I don't know how to replace or attach the Hyperlink to that TextStyleRange.

Create a game where 6 dice are 'rolled' by you and 6 dice are 'rolled' by the player (simulated by the click of a button). Add up both rolls. The goal is to come as close to a score of 100 as possible, without passing 100. Have a STOP button to signify when you are ready to stop rolling and compute the winner. The highest score under 100 wins. Display the number of times you win and the number of times the computer wins using javascript. So far I have the following code, however, my dice images are not working(they display as little broken symbols when I run the game). The game itself is running just fine but I can't figure out how to get the game to do the "Add up both rolls" step and beyond. If anyone can help it would be much appreciated. Thanks.


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head>
    <title>Dice Game</title>
    <link href="Dicegame.css" type="text/css" rel="stylesheet" /> 
  </head>
  <body>
  
    <div id='human' class='playerArea'>
      <h3>Human</h3>
      <div id='humanDice'>
      </div>
      <p id='humanTotal' class='total'></p>
    </div>
    
    <div id='computer' class='playerArea'>
      <h3>Computer</h3>
      <div id='computerDice'>
      </div>
      <p id='computerTotal' class='total'></p>
    </div>
    
    <div id='roll'>
      <a href='#' onclick='play(); return false;'>Roll</a>
    </div>
    
    <script type='text/javascript' src='lib.js'></script>
    <script type='text/javascript' src='dicegame.js'></script>
    
  </body>
</html>

*the external links are as follows*
*Dicegame.css*
body
{
background-color: #004400;
}

div.playerArea
{
position: absolute;
top: 100px;
bottom: 200px;
width: 300px;

background-color: #0996FF;
border: 3px solid #0027C6;
padding: 0 1em;
}

div#human
{
left: 100px;
}

div#computer
{
right: 100px;
}

div#roll
{
position: absolute;
bottom: 50px;
left: 100px;
right: 100px;
height: 100px;
background-color: #FFFF00;
border: 3px solid #FFBE00;

}

div#roll:hover
{
background-color: #FFFF99;
}

div#roll a
{
display: block;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
color: #004400;
text-align: center;
font-size: 90px;
text-decoration: none;
}

div#roll a:hover
{
color: #FF0000;
}

p.total
{
margin: 10px;
font-weight: bold;
font-size: 8em;
text-align: center;
}

p.winner
{
color: #00CC00;
}

p.loser
{
color: #CC0000;
}[/CODE]

*dicegame.js*
Code:

window.onload=function(){
Nifty("div.playerArea", "big");
}

function roll()
{
  var result = 0;
  result = Math.floor((Math.random() * 6) + 1);
  return result;
}


function play()
{
  // create dice array
  var humanDice = new Array();
  var computerDice = new Array();
  
  // totals
  var humanTotal = 0;
  var computerTotal = 0;
  
  // output
  var out = "";
  
  // roll the dice
  for (var i = 0; i < 6; i++)
  {
    humanDice[i] = roll();
    humanTotal += humanDice[i];
    
    computerDice[i] = roll();
    computerTotal += computerDice[i];
  }
  
  // display human dice
  out = displayDice(humanDice);
  document.getElementById('humanDice').innerHTML = out;
  
  // display computer dice
  out = displayDice(computerDice);
  document.getElementById('computerDice').innerHTML = out;
  
  document.getElementById('humanTotal').innerHTML = humanTotal;
  document.getElementById('computerTotal').innerHTML =  computerTotal;  
  
  if (humanTotal > computerTotal)
  {
    document.getElementById('humanTotal').className = 'total winner';
    document.getElementById('computerTotal').className = 'total loser';
  }
  else if (computerTotal > humanTotal)
  {
    document.getElementById('humanTotal').className = 'total loser';
    document.getElementById('computerTotal').className = 'total winner';
  }
  else
  {
    document.getElementById('humanTotal').className = 'total';
    document.getElementById('computerTotal').className = 'total';
  }

}

function displayDice(dice)
{
  var out = "";
  for (var i = 0; i < dice.length; i++)
  {
    out += "<img src='die" + dice[i] + ".png'/>";
  }
  
  return out;
}

*lib.js*

Code:

function output(text, tag)
{
  document.write("<" + tag + ">" + text + "</" + tag + ">");
}

I want to create this box.

http://i31.tinypic.com/oqb12q.jpg

I know i can do it with a iFrame, but i've heard they are quite vunerable to hacking.

I already have my .php sorted to show the admin posted news on my site (Im alright at .php; rubbish and javascript).

Was just wondering if there was a way to do it without using iFrames ?

I run a website for a skittle league and am looking to create a form to allow teams to sumbit results on line.

I'm not an expert on Javascript, the code I've created so far allows the user to enter the player name and score for one team and calcutate the total. However, I'm having problems duplicating this for a second team, and would like to remove the Get Total button (i.e. Auto Calculate total).

Can anyone advise how I can do this.

The Code I have so far is

<html>
<head>
<script type="text/javascript" language="javascript">
function getTotalH1(oForm)
{
var field, i = 0, total = 0, els = oForm.elements;
var fieldnames = ['PSH1' , 'PSH2' , 'PSH3' , 'PSH4' , 'PSH5'];
for (i; i < fieldnames.length; ++i)
{
field = els[fieldnames[i]];
if (field.value != '' && isNaN(field.value))
{
alert('Please enter a valid number here.')
field.focus();
field.select();
return '';
}
else total += Number(field.value);
}
return ' ' + total;
}
</script>
</head>
<body>
<form>
<div align="center"><table border="0" cellpadding="2" cellspacing="0" width="305">
<col width="250" align="left">
<col width="42" align="center">
<tr>
<td><input type="text" name="PNH1" size="35"> </td>
<td><input id="PSH1" type="text" name="PSH1" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH2" size="35"></td>
<td><input id="PSH2" type="text" name="PSH2" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH3" size="35"></td>
<td><input id="PSH3" type="text" name="PSH3" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH4" size="35"></td>
<td><input id="PSH4" type="text" name="PSH4" value="" size="4"></td>
</tr>
<tr>
<td><input type="text" name="PNH5" size="35"></td>
<td><input id="PSH5" type="text" name="PSH5" value="" size="4"></td>
</tr>
<tr>
<td><input type="button" value="Get Total" onclick="total.value=getTotalH1(this.form)" />
<input type="reset" /></td>
<td><input id="total" type="text" name="totalh1" value="" readonly="readonly" size="4"></td>
</tr>
</table></div>
<br><br>
</form>
</body>
</html>

thanks

Greetings all,


I need someone to help me out with this code for a project, i need to calculate monthly payments and total payments based off starting and ending interest rates and including the number of years to borrow. I'm stuck with the calculations below, can someone please put me in the right direction when it comes down to the calculations.

<html>
<head>
<title></title>

<script type="text/javascript">

function calcPayment() {

var loanamount = parseInt (document.getElementById ("loanAmt").value);
var startinterest = parseInt (document.getElementById ("startRate").value);
var endinterest = parseInt (document.getElementById ("endRate").value);
var years = parseInt (document.getElementById ("loanYears").value);

var

//construct table
var msg = "<table border='3' width='90%'>";
msg += "<tr>";
msg += "<td>Interest Rate</td>";
msg += "<td>Monthly Payment</td>";
msg += "<td>Total Payament</td>";
msg += "</tr>";

for (var i = startinterest; i <= endinterest; i+= 0.25) {

msg += "<td>" + i + "</td>";
msg += "<td>" + Math.pow( i, 2) + "</td>";
msg += "<td>" + Math.sqrt( i) + "</td>";
msg += "</tr>";

}

msg += "</table>";

document.getElementById("results").innerHTML = msg

}

</script>

<style type="text/css">

body {
background: black;
color: blue;
text-align: center;
}

#maintitle {
color: red;
font-size: 2em;
font-weight: bold;
}

.infostyle {
border-bottom: 5px red double;
padding-bottom: 5px;
}

#infowrap {
background-color: #FFFF99;
border: 5px red solid;
padding: 20px;
margin: 20px 100px 50px 100px;
height: 350px;
}

#contentwrap2 {
background-color: #FFFF99;
border: 5px white solid;
margin-top: 65px;
margin-left: -25px;
margin-right: -25px;
padding: 150px;

}

.formtext {
font-size: 1.25em;
font-weight: bold;
margin-top: 20px;
}


#results {
color: #339900;
font-weight: bold;
font-size: 2em;
margin-top: -50px;
margin-bottom: -50px;
margin-left: -50px;

}

#spacer {
margin-bottom: 5px;
}


</style>

</head>
<body>

<div id="contentwrap1">

<div id="infowrap">
<div id="maintitle" class="infostyle"> Javascript Loan Calculator
</div>

<form>

<div class="formtext" > Enter initial loan amount: </div>
<input type="text" id="loanAmt" />

<div class="formtext"> Enter starting interest rate:</div>
<input type="text" id="startRate" />

<div class="formtext"> Enter ending interest rate:</div>
<input type="text" id="endRate" />

<div class="formtext"> Enter how many years to borrow:</div>
<input type="text" id="loanYears" />

<div style="margin-top:5px;">
<input type="button" value="Compute monthly payments" onClick="calcPayment()"/>
</div>

</form>

<div id="contentwrap2">

<div id="results">


</div>
</div>

</div>

</body>
</html>

I am creating a cookie that increases a "value" or "integer" by 1 (ie Y+1) every time any page inside my webpage. Any webpage that i put the code into. right now I need it so that when you visit a page with the code it increases the variable or "cookie" (Y) by 1. when Y reaches a certain number, I.E 10, it resets Y to "0" and redirects you to a URL. Please explain where each value would go in any replies. Please make code as simple and as low in file size as possible. I don't need any sort of flexibility, just a simple redirect to a webpage which WILL NOT have the cookie code in it.
EX: when opening the menu of an iPod game it asks you to rate the game, saying remind me later resets the value to "0" and saying rate now, resets to "0" but does not keep counting on the next page.
Thanks to all in advance and i hope you completely understood my problem and question!
[spoiler] Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function checkValue()
String Y
Y=Y+1
if(Y > 9){
alert(Y)}
else{
alert(Y)}
</script>
</head>




<body>

<form action="Javascript:checkValue()" >
  <div align="center">
    <input name="Logon" type="submit" value="Click Me"/>

  </div>

<script type="text/javascript">
function checkValue()
String Y;
Y=Y+1;
alert(Y);
//if(Y > 9){
//alert(Y)}
//else{
//alert(Y)}
</script>
</form>


</body>
</html>

[/spoiler]
I did not expect any of the above code to work, completely providing a new code will not surprise me or be a problem. Thanks again in advance!