JavaScript - Javascript Coding For A Shift Roster

I have a basic Javascript slideshow that flicks through a series of 6 jpg images very quickly.
I also have a button that i need coded so that when a user clicks on the button, the script for the slide show slows down the speed of the flicking images slowly over the coarse of ten seconds and stops on an image.
How do i go about coding the button in javascript?
I hope this makes sense.

Thankyou

Here is my code so far.

var i, imgs, pic;

function rotate()
{
pic.src=imgs[i];
(i===(imgs.length -1))? i=0:i++;
setTimeout(rotate,500);
}




function diceroll()
{
pic=document.getElementById("yes");
imgs=["photo1.jpg", "photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg"];

var preload=new Array();
for(i=0;i<imgs.length;i++)
{
preload[i]=new Image();
preload[i].src=imgs[i];
}

i=0;
rotate();
}

Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer.
-Todd

Okay, I am relatively new to Java and am going to be taking a class on it next fall. For now though, I am trying to code for a client I am currently working with and am hopelessly lost.

The client I am working with has an ecommerce site with Network Solutions which uses aspx. It allows you to code html and link to css, java (pretty much anything except php). The problem I am having is that they currently have their product descriptions coded in div tags:

<div id='alternatebg'>
<div id='detailsgreybox'><div id='alternatename'><p>Alternate Name</p></div></div>
<div id='pd2'><p>Not Available</p></div>
</div>

<div id='usebg'>
<div id='detailsgreybox'><div id='use'><p>Use</p></div></div>
<div id='pd3'><p>Chemicals</p></div>
</div>

What they want to happen is for the sections that have 'Not Available' as the answer to not show up on the live page. I have tried to use <ns:if condition="..."> but do not know how to call for it to see if the div says 'Not Available'.

Any help is greatly appreciated as I can not move forward until I can figure this out.

Hi

I have been trying to create a form using Django for a very long time but have not been able to get it to look the way I want. Someone suggested to me that I should use Javascript (Jquery) to do this.

Here's what I want to do. For the form I want, there are certain statuses at the bottom, like "Done", "Incomplete" and etc. When the form is filled in, the person will click on one of these statuses. What I want this button to do is to save the page/form and also to generate a few new links relating to the status selected.

For example, if the person selects "Done" this should save the form and generate two new buttons. One that says "Close" which would take you to the home page, and one that says "Continue" which would take you to the next form.

My problem is that I'm new to Django and have no experience with Javascript. So if anyone could help or give me hints that would be greatly appreciated.

Hello all out there I am going to post this in 2 separate views.

I am working on an assignment from this link

http://books.google.ca/books?id=aG_T2aD ... MonthCell()&source=bl&ots=EJXyGF-tbI&sig=vbgqgua2uSaL6DWp0Rx_BYoZ0z8&hl=en&ei=9C7gTLmiAYaXnAeywLWRDw&sa=X&oi=book_result&ct=result&re snum=1&ved=0CBcQ6AEwAA#v=onepage&q=writeMonthCell()&f=false

if u scroll down to case 1
is what I am working on

included in the case are 2 other files as to the one i have to work on

i used all the proper steps and instructions and i think I have the correcting coding for my form

however my program still does not work

here is the exact code i am using
let me know if anyone sees any errors, as I am convinced i have it correct?

Here is my code:

<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 3
Case Problem 1

The Lighthouse
Author: John Res
Date: November 14 2010

Filename: clist.htm
Supporting files: lhouse.css, list.js, logo.jpg

-->
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
<script type"text/javascript" src"list.js"></script>
<script type="text/javascript">
function amountTotal() { // return sum of values to amount array
total=0;
for(var i=0; i<amount.length; i++) { // set variable to 0
total+=amount[i];
}
return total;
}
</script>
</head>

<body>

<div id="title">
<img src="logo.jpg" alt="The Lighthouse" />
The Lighthouse<br />
543 Oak Street<br />
Delphi, KY &nbsp;&nbsp;89011<br/>
(542) 555-7511
</div>

<div id="data_list">
<script type=”text/javascript”> // set up variables of rows and cellspaces
document.write(“<table border=’1′ rules=’rows’ cellspacing=’0′>”);
document.write(“<tr><th>Date</th><th>Amount</th><th>First Name</th>”);
document.write(“<th>Last Name</th><th>Address</th></tr>”);

for (i=0; i< amount.length; i++) { // create a loop in counter of variable starting at 0 and increase of 1 increments
if (i%2==0) document.write(“<tr>”);
else document.write(“<tr class=’yellowrow’>”); // have every row with a yellow background use a loop

document.write(“<td>”+date[i]+”</td>”);
document.write(“<td class=’amt’>”+amount[i]+”</td>”); // have values of the dates
document.write(“<td>”+firstName[i]+”</td>”);
document.write(“<td>”+lastName[i]+”</td>”);
document.write(“<td>”);
document.write(street[i]+”<br />”);
document.write(city[i]+”, “+state[i]+” “+zip[i]); // zip arrays for address
document.write(“</td>”);
document.write(“</tr>”);
}
document.write(“</table>”);
</script>

</div>

<div id="totals">
<script type=”text/javascript”> // use script elements in HTML
document.write(“<table border=’1′ cellspacing=’1′>”);
document.write(“<tr><th id=’sumTitle’ colspan=’2′>Summary</th></tr>”);
document.write(“<tr><th>Contributors</th>”);
document.write(“<td>”+amount.length+”</td></tr>”);
document.write(“<tr><th>Amount</th>”);
document.write(“<td>$”+amountTotal()+”</td></tr>”);
document.write(“</table>”);
</script>

</div>

</body>
</html>

thanks everyone

Hello, I'm new to this forum. I want to improve my ability to write JavaScript and am looking for a friendly place to find some constructive criticism and suggestions on my code.

This script does not have any practical use (that I can think of); it calculates prime numbers. It is just an exercise. I am looking for suggestions on all aspects from the CSS/aesthetics to the HTML and of course the JavaScript.

I posted the script here.

One definite thing that bugs me is the cursor is not in the text field when the page loads. Also it would be better if the user had the option of hitting the return key in addition to the submit button. Suggestions appreciated.

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Prime Number Calculator</title>
	<style type="text/css">
		form{
			width: 200px;
			border: solid 3px blue;
			border-style: double;
			padding:5px;
			text-align:center;
			background-color:#eee;
		}
		#title{
		
			text-align:center;
			border: solid 1px blue;
			background-color:#fff;
			margin:5px;
			padding:0px;
		}
	</style>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		var candidates = new Array();
		function calculatePrimes(form){
  			var max = form.input.value; 
			
			//Check to make sure input is a number
			if(isNaN(max)){
				alert("Dude, you must enter a number!");
			}
			
			for(i=2; i<=max; i++){candidates[i]=i;}
			
			var i=2;
			for(i=2; i<Math.sqrt(max); i++){
				if (candidates[i]!=0){
					var j=i*i;
					while(j<max){
						candidates[j] = 0;
						j=j+i;
					}
				}
			}
			
			//Pull the primes out of the candidates
			i=2;
			var primesOut = "";
			for(i=2; i<max; i++){
				if(candidates[i]!= 0){
					primesOut = primesOut + ((i>2)?", " : "" ) + candidates[i];
				}
			}
			form.output.value = primesOut;
		}
	</script>
<head>
<body>
	<form>
		<h2 id="title">Prime-Number Calculator</h1>
		Check up to:<input type="text" name="input" size="5" value="100" \> <br />
		<textarea rows="5" cols="20" name="output"></textarea>
		<input  name="calc" value="Find!" type=button onClick="calculatePrimes(this.form)">
	</form>
</body>
</html>

Hi,

I'm still in the early stages of learning Javascript so I'm not sure how (or if it's possible) to do this. I know HTML, CSS, etc... just not too familiar with Javascript. Here's the deal.... I run a website that features a chat room written in Perl for CGI. The chat room will automatically email a user their password if it's forgotten but there is one issue.....it does not have the "Forgot Password?" link. To achieve the Lost Password page, the user must enter an invalid password FIRST on the login screen, otherwise they cannot get to that option and are often requesting assistance.

What I had in mind was an easier way for the user to get their password since new novice members are not sure how to get to the lost password page. I'm not trying to edit the Perl code for the chat, but I wanted to build a "Forgot Password?" page using a Javascript code that will automatically take their username from the "username" login field and direct them to the lost password page which would be "chat2.cgi?action=send_pwd&name=..."

I'm sorry if this is confusing, I'm not sure that I am explaining this right. When the user enters an invalid password, it takes them to the lost password page which contains a link "lost password" and will automatically email them their login details when clicked on. When they click that link, the URL contains the string "chat2.cgi?action=send_pwd&name=username"

What I would like to do is put a link on the login page (like most normal chat rooms have) that says "Forgot Password?". When clicked on, I want it to take them to a page where all they have to do is enter their username in a form and click Submit, then have a Javascript code automatically extract their username from that field and insert their username automatically to the end of that URL (chat2.cgi?action=send_pwd&name=...) where ... would be the name extracted from that form field. This would result in the browser taking them to that URL which would trigger the chat to automatically email the password. Can I do this with Javascript?? If so, any help would be greatly appreciated!

I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category:

PHP Code:
<li>
    <?php if (in_category(3) ) { ?>
    <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? }elseif (in_category(4) ) { ?>
    <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? }elseif (in_category(7) ) { ?>
    <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? } else { ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? } ?>
</li>

Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line:

PHP Code:
<?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?>

I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered.

I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this?

I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number.

Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks.

<div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden">

<div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div>

<iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe>

</div>

Hi all,

I am having a problem with the following code:

js
Code:

function encrypt() {
   var char, encryptedoutput = "", rawinput, shiftamt;
   rawinput = document.getElementById("inputinfo").value;
   shiftamt = document.getElementById("shiftamt").value;
   for (i = 0; i < rawinput.length; i++) {
      char = rawinput.charCodeAt(i);
      if (char >= 65 && char <=  90) encryptedoutput += String.fromCharCode((char - 65 + shiftamt) % 26 + 65);
      else if (char >= 97 && char <= 122) encryptedoutput += String.fromCharCode((char - 97 + shiftamt) % 26 + 97);
      else encryptedoutput += rawinput.charAt(i);
   }
   document.getElementById("outputinfo").value = encryptedoutput;
}

function decrypt() {
   var encryptedchar, decryptedoutput = "", cipherinput, shiftamt;
   cipherinput = document.getElementById("inputinfo").value;
   shiftamt = document.getElementById("shiftamt").value;
   shiftamt = (26 - shiftamt) % 26;
   for (z = 0; z < cipherinput.length; z++) {
      encryptedchar = cipherinput.charCodeAt(z);
      if (encryptedchar >= 65 && encryptedchar <=  90) decryptedoutput += String.fromCharCode((encryptedchar - 65 - shiftamt) % 26 + 65);
      else if (char >= 97 && encryptedchar <= 122) decryptedoutput += String.fromCharCode((encryptedchar - 97 - shiftamt) % 26 + 97);
      else decryptedoutput += cipherinput.charAt(z);
   }
   document.getElementById("outputinfo").value = decryptedoutput;
}

function formReset() {
   document.getElementById("cryptoform").reset();
}

html
Code:

<script type="text/javascript" src="/crypto/caesar.js"></script>

   <form name="cryptoform" id="cryptoform">
      <div id="inputside">
         Input:<br /><br />
	<textarea rows="30" cols="50" name="inputinfo" id="inputinfo"></textarea><br /><br />
        Shift amount for encryption or decryption: 
        <select name="shiftamt" id="shiftamt" size="1">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option>
           <option value="8">8</option>
           <option value="9">9</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
           <option selected="selected" value="13">13</option>
           <option value="14">14</option>
           <option value="15">15</option>
           <option value="16">16</option>
           <option value="17">17</option>
           <option value="18">18</option>
           <option value="19">19</option>
           <option value="20">20</option>
           <option value="21">21</option>
           <option value="22">22</option>
           <option value="23">23</option>
           <option value="24">24</option>
           <option value="25">25</option>
        </select>
        <br /><br />
        <input type="button" value="Apply Shift" onClick="encrypt()" />
        <input type="button" value="Reverse Shift" onClick="decrypt()" /><br /><br />
     </div>
                                
     <div id="outputside">
         Output:<br /><br />
         <textarea rows="30" cols="50" name="outputinfo" id="outputinfo" readonly="readonly"></textarea><br /><br /><br /><br /><br /><br />
     </div>
                                
     <div id="buttonarea">
        <input type="button" value="Clear Fields" onClick="formReset(); return false;" />
     </div>
</form>

I intend for the code to implement a simple caesar shift by the selected value. For example, with a shift of 1, a = b, b = c, c = d, etc.

The problem I am having is that the letter A converts as it should but the other letters do not. For instance, applying a shift of 1, B is converted to L instead of C, C is converted to V instead of D.

With a shift of 13, ABC produces NJF. Again, A is correct but the others are wrong, but by a different degree this time.

Also, my reverse shift (decrypt) function does not work. If I remove the .value codes from the encrypt function then the decrypt function works. I am guessing there is a problem manipulating the same form components with different functions.

It seems that the charCodeAt() values are being produced correctly, checking them by outputing them.

If anyone has any ideas let me know. I have been working on projects like this just for fun in an attempt to improve upon my js knowledge/ability.

I am at my wits end! I've added DD belated PNG to nearly every site I've ever made with little or no problems, suddenly it's being super-extra mean to me. It will only load PNGs correctly if you clear your cache when refreshing the page (shift + refresh). Check it out at the link below (obfuscated so google doesn't index the site):

http://ow.ly/758Dp

Here's the script:

PHP Code:
<!--[if IE 6]>
<script src="/~onsite/js/DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.shadow, #header_wrapper, header, header a, .slideshow h1, .pager_wrapper, #upcoming_wrapper, li.menuTools a, li.menuRSS a, .eDetailShareE, .saveToCal a, #services_wrapper, #services li');
</script>
<![endif]--> 


What am I doing wrong here?

Thanks so much for any help!

NOTE: Just so everyone's aware, this is an IE6 only script that is supposed to fix PNG transparencies, so you'll need to look at it in IE6 to see the problems.

to see the unexpected page shift in action go to http://lawlocaust.net/gamerverse/ while hovering over the banner u can use the arrow keys to navigate the UI and the page will shift in firefox

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" xml:lang="en" lang="en"> 
<head>
<title>GamerVerse</title>
<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>gamerverse.css" />
<?php include('children.php'); ?>
<script type="text/javascript" src="gamerverse.js">
</script>
</head>
<?php include('top.php'); ?>

top.php
Code:

<body onload="javascript: initialize()">
<div id="bgimgwrap">
<img id="bgimg" src="<?php echo $domain; ?>mainbg.jpg" alt="" />
</div>
<div id="cursor">&nbsp;</div>
	<div class="header" id="header" onmouseover="activatekeys()" onmouseout="deactivatekeys()">
		<div class="menu">
			<ul>
				<li><a href="#" onclick="javascript: jumpto(0)">Home</a></li>
				<li><a href="#" onclick="javascript: jumpto(1)">Users</a></li>
				<li><a href="#" onclick="javascript: jumpto(2)">Games</a></li>
				<li><a href="#" onclick="javascript: jumpto(3)">New Stuff</a></li>
				<li><a href="#" onclick="javascript: jumpto(4)">Forum</a></li>
				<li><a href="#" onclick="javascript: jumpto(5)">Guilds</a></li>
				<li><a href="#" onclick="javascript: jumpto(6)">Store</a></li>
			</ul>
			<div style="float: right; width: 100px;">
				X: <span id="myx">&nbsp;</span>
				Y: <span id="myy">&nbsp;</span>
			</div>
		</div>
		<div class="childarea">
			<div id="child0"><a href="#" onclick="">child0</a><a href="#" onclick="">child1</a></div>
			<div id="child1"><a href="#" onclick="">child1</a><a href="#" onclick="">child1</a></div>
			<div id="child2"><a href="#" onclick="">child2</a><a href="#" onclick="">child1</a></div>
			<div id="child3"><a href="#" onclick="">child3</a><a href="#" onclick="">child1</a></div>
			<div id="child4"><a href="#" onclick="">child4</a><a href="#" onclick="">child1</a></div>
			<div id="child5"><a href="#" onclick="">child5</a><a href="#" onclick="">child1</a></div>
			<div id="child6"><a href="#" onclick="">child6</a><a href="#" onclick="">child1</a></div>
		</div>
		<img src="<?php echo $domain; ?>banner.png" alt="" />
	</div>	
	
	<div class="page" id="page">
				<table cellspacing="0px"; cellpadding="0px" id="main">
				<tr>
					<td><div><?php include('home.php'); ?></div></td><td><div><?php include('users.php'); ?></div></td><td><div><?php include('games.php'); ?></div></td><td><div><?php include('new.php'); ?></div></td><td><div><?php include('forum.php'); ?></div></td><td><div><?php include('guilds.php'); ?></div></td><td><div><?php include('store.php'); ?></div></td>
				</tr>
			</table>
	</div>
	<div id="child"><div id="kid0"><?php echo $homekid; ?></div><div id="kid1"><?php echo $userskid; ?></div><div id="kid2"><?php echo $gameskid; ?></div><div id="kid3"><?php echo $newkid; ?></div><div id="kid4"><?php echo $forumkid; ?></div><div id="kid5"><?php echo $guildskid; ?></div><div id="kid6"><?php echo $storekid; ?></div></div>

CSS
Code:

body {
	background: black;
	color: white; 
	width: 100%;
	height: 100%;
	overflow: hidden;
}

* { 
	padding: 0px;
	margin: 0px; 
}
#bgimgwrap { 
	position: absolute; 
	z-index: 1; 
	top: 0; 
	left: 0;
}

.header { 
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 2;
	text-align: center;
}

.menu { 
	width: 100%;
	text-align: center;
	margin: auto;
	padding: 0px 0px 4px 0px;
}

.menu li { 
	display: inline;
	margin-left: 0px;
	float: left;
}

.menu a { 
	display: block;
	width: 100px;
	height: 20px;
	line-height: 20px;
	color: white;
	text-decoration: none;
	margin-left: 0px;
	border-bottom: 1px solid white;
	border-right: 1px solid white;
}

.menu a:hover {
	color: black;
}

.page {
position: absolute;
left: 0;
}

#cursor {
display: block;
position: absolute;
top: 0;
width: 100px;
height: 20px;
background: red;
opacity:0.4;
filter:alpha(opacity=40);
z-index: 11;
}


td {
overflow: hidden;
background: #6faae4 url(right.png) repeat-y 100% 0%;
padding: 0px 25px 0px 25px; 
}

td:before { 
display: block;
content: url(topleft.png); 
background:  url(topright.png) no-repeat 100% 0%; 
height: 25px; 
margin: 0px -25px 0px -25px; 
}

td:after { 
display: block; 
content: url(bottomleft.png); 
background: url(bottomright.png) no-repeat 100% 0%; 
height: 25px; 
margin: 0px -25px 0px -25px; 
}

td  div:first-child {
background: #3d74aa;
border: 4px outset #c6c6c6;
overflow: hidden;
}

#child {
position: absolute;
left: 0px;
width: 100%;
}

#kid0 {
display: none;
}

#kid1 {
display: none;
}

#kid2 {
display: none;
}

#kid3 {
display: none;
}

#kid4 {
display: none;
}

#kid5 {
display: none;
}

#kid6 {
display: none;
}

.childarea {
width: 100%;
height: 20px;
margin-top: 17px;
}

.childarea div {
display: none;
}

.childarea a {
	display: inline-block;
	width: 100px;
	height: 20px;
	line-height: 20px;
	color: white;
	text-decoration: none;
	margin-left: 0px;
	border-bottom: 1px solid white;
	border-right: 1px solid white;
}

.childarea a:hover {
	color: black;
}
	
#child0 {
position: absolute;
left: 0px;
}

#child1 {
position: absolute;
left: 101px;
}

#child2 {
position: absolute;
left: 202px;
}

#child3 {
position: absolute;
left: 303px;
}

#child4 {
position: absolute;
left: 404px;
}

#child5 {
position: absolute;
left: 505px;
}

#child6 {
position: absolute;
left: 606px;
}

javascript
Code:

//sets the global variables
function initialize()
{
//alert(navigator.appName+' '+navigator.appCodeName+' '+navigator.appVersion);
window.bgimg = document.getElementById('bgimg');
window.bgimgwrap = document.getElementById('bgimgwrap');
window.header = document.getElementById('header');
window.page = document.getElementById('page');
window.main = document.getElementById('main');
window.child = document.getElementById('child');
window.cursor = document.getElementById('cursor');
window.childqty = new Array();
window.childqty[0] = 2 - 1;
window.childqty[1] = 2 - 1;
window.childqty[2] = 2 - 1;
window.childqty[3] = 2 - 1;
window.childqty[4] = 2 - 1;
window.childqty[5] = 2 - 1;
window.childqty[6] = 2 - 1;
	get_dims();
}
//adjusts various elements to make the site fluid
function get_dims()
{

	winH = getH();
	winW = getW();
	bgimg.width = header.offsetWidth;
	bgimg.height = header.offsetHeight;
	bgimgwrap.width = header.offsetWidth;
	bgimgwrap.height = header.offsetHeight;
	var h = header.offsetHeight;
	page.style.top = h+"px";
	main.style.width = (winW*7)+"px";
	child.style.top = winH+"px";
	child.height = (winH-h)+"px";
	var td = document.getElementsByTagName('td');
	for(i = 0; i < td.length; i++)
	{
		td[i].width = winW+"px";
		td[i].style.height = (winH-h)+"px";
		td[i].firstChild.style.height = ((winH-h)-58)+"px";
		td[i].firstChild.style.width = ((winW - (td[i].firstChild.offsetLeft*2))-8)+"px";
	}
}
//gets the height of the window
function getH()
{
var winH = 0;
if (navigator.appName.indexOf("Microsoft")!=-1) 
		{
			winH = document.documentElement.clientHeight;
		}
		else
		{
			winH = window.innerHeight;
		}
	return winH;
}
//gets the width of the window
function getW()
{
var winW = 0;
if (navigator.appName.indexOf("Microsoft")!=-1) 
		{
			winW = document.documentElement.clientWidth;
		}
		else
		{
			winW = window.innerWidth;
		}
	return winW;
}
//the keydown action script
function move(c)
{
	c = c || window.Event;
	var k = c.which;
	if(!k)
	{
		var k = c.charCode;
	}
	if(!k)
	{
		var k = c.keyCode;
	}
	var winW = getW();
	var winH = getH();
	var h = header.offsetHeight;
	winH = winH - h;
	switch(k)
	{
	case 37:
		var thing = pos_check();
		if(thing == "parent")
		{
			if(page.offsetLeft != 0)
			{
				slide('right', 0);
				cursormove('right', 0);
			}
		}
		else
		{
			slidekid('right', 0);
		}
	break;
	case 38:
		var thing = pos_check();
		if(thing == "child"){ ditchkids(); }
	break;
	case 39:
		var thing = pos_check();
		if(thing == "parent")
		{
			if(page.offsetLeft != -(winW*6))
			{
				slide('left', 0);
				cursormove('left', 0);
			}
		}
		else
		{
			slidekid('left', 0);
		}
	break;
	case 40:
		var thing = pos_check();
		if(thing == "parent"){ getkids(); }
	break;
	case 116:
		window.location.reload();
	break;
	default:
	break;
	}
}
//move the page left or right
function slide(dir, i)
{
	var w = getW();
	if(i < w)
	{
		switch(dir)
		{
			case 'left':
				page.style.left = (page.offsetLeft - 8)+"px";
			break;
			case 'right':
				page.style.left = (page.offsetLeft + 8)+"px";
			break;
		}
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		var t = setTimeout("slide('"+dir+"', '"+i+"')", 0);
	}	
	if(page.offsetLeft > 0){ page.style.left = 0+"px"; }
	if(page.offsetLeft < -(w*6)){ page.style.left = -(w*6)+"px"; }
}
//moves the cursor left or right
function cursormove(dir, i)
{
	switch(dir)
	{
		case 'left':
			cursor.style.left = (cursor.offsetLeft + 1)+"px";
		break;
		case 'right':
			cursor.style.left = (cursor.offsetLeft - 1)+"px";
		break;
	}
	if(i < 100)
	{
		i++;
		setTimeout("cursormove('"+dir+"', '"+i+"')", 20);
	}
	if(cursor.offsetLeft < 0){ cursor.style.left = 0+"px"; }
	if(cursor.offsetLeft > 606){ cursor.style.left = 606+"px"; }
}
//checks to see which set of elements ur looking at
function pos_check()
{
	var h = header.offsetHeight;
	if(page.offsetTop == h)
	{
		return "parent";
	}
	else
	{
		return "child";
	}
}
//displays the child elements
function getkids()
{
	var c = cursor.offsetLeft;
	c = c/101;
	winW = getW();
	p = childqty[c];
	document.getElementById(c+'child').style.width = (winW*(p+1))+"px";
	document.getElementById('child'+c).style.display = "block";
	document.getElementById('kid'+c).style.display = "block";
	child.style.left = 0+"px";
	raisekid('up', 0);
}

function raisekid(d, i)
{
	switch(d)
		{
		case "up":
			page.style.top = (page.offsetTop - 2)+"px";
			child.style.top = (child.offsetTop - 2)+"px";
		break;
		case "down":
			page.style.top = (page.offsetTop + 2)+"px";
			child.style.top = (child.offsetTop + 2)+"px";
				if(i >= page.offsetHeight)
				{
					hidekids();
				}
		break;
		}
	if(i < page.offsetHeight)
	{
	i++;
	i++;
	setTimeout("raisekid('"+d+"', '"+i+"')", 0);
	}
	if(page.offsetTop > header.offsetHeight){ page.style.top = header.offsetHeight+"px"; }
}

function ditchkids()
{
	raisekid('down', 0);
}

function hidekids()
{
	var c = cursor.offsetLeft;
	c = c/101;
	document.getElementById('child'+c).style.display = "none";
	document.getElementById('kid'+c).style.display = "none";	
}
//moves the shild pages left or right
function slidekid(dir, i)
{
	var w = getW();
	if(i < w)
	{
		switch(dir)
		{
			case 'left':
				child.style.left = (child.offsetLeft - 8)+"px";
			break;
			case 'right':
				child.style.left = (child.offsetLeft + 8)+"px";
			break;
		}
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		i++;
		var t = setTimeout("slidekid('"+dir+"', '"+i+"')", 0);
	}	
	var c = cursor.offsetLeft;
	c = c/101;
	p = childqty[c];
	if(child.offsetLeft > 0){ child.style.left = 0+"px"; }
	if(child.offsetLeft < -(w*p)){ child.style.left = -(w*p)+"px"; }
}
//turns on the UI when hovering over the banner
function activatekeys()
{
document.addEventListener('keydown', move, true);
}
//turns off the UI when u stop hovering
function deactivatekeys()
{
document.removeEventListener('keydown', move, true);
}

I developed this under Safari on my mac. I have only been scripting for about 1.5 days so I am not the best with debugging. What would cause this?

Code:

<html>
<head>
<script ="Javascript>

// Setting vars
var winW = screen.width
var winH = screen.height;
var winLW = (winW / 2) - 240

// Resizing and moving window
self.resizeTo(480,640);
self.moveTo(winLW,0);

// Form reset function
function reset() {
	document.shiftReport.reset();	
}

// Create report function
function calculate() {
	// Name Vars
	var name = document.shiftReport.nameBox.value;
	var mname = document.shiftReport.ModNameBox.value;
	// Server Bar Vars
	var j = document.shiftReport.JurSel.value;
	var t = document.shiftReport.TriSel.value;
	var c = document.shiftReport.CreSel.value;
	var p = document.shiftReport.PreSel.value;
	// Form Text Vars
	var gnotes = document.shiftReport.GeneralNotes.value;
	var PWMS = document.shiftReport.PWMS.value;
	var SGB = document.shiftReport.SGB.value;
	var WPMW = document.shiftReport.WPMW.value;
	var CTaO = document.shiftReport.CTaO.value;
	// Time Vars
	var shifTime = document.shiftReport.TimSel.value;
	var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
	var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
	var this_date_timestamp=new Date()
	var this_weekday = this_date_timestamp.getDay()
	var this_date = this_date_timestamp.getDate()
	var this_month = this_date_timestamp.getMonth()
	var this_year = this_date_timestamp.getYear()
	if (this_year < 1000)
		this_year+= 1900;
	if (this_year==101)
		this_year=2001;
	var this_date_string = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date + ", " + this_year	//concat long date string
	if (shifTime=="Other")
	{
		var shifTime=prompt("Please enter shift time:","11:00AM - 1:00PM");	
	}
	// Creating Report
	var theReport = "<b>Name:</b> " + name + "<br><b>Mod Name:</b> " + mname + "<br><b>Date:</b> " + this_date_string + "<br><b>Time:</b> " + shifTime + "<br><br><b>General Comments:</b><br>** Jurassic " + j + " bars<br>** Triassic " + t + " bars<br>** Cretaceous " + c + " bars<br>** Prehistoric " + p + " bars<br><br>" + gnotes + "<br><br><b>Players Warnings/Mutes/Suspensions:</b><br>" + PWMS + "<br><br><b>Site Glitches/Bugs:</b><br>" + SGB + "<br><br><b>What Players/Mods Want:</b><br>" + WPMW + "<br><br><b>Current Trends and Observations:</b><br>" + CTaO
	var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=480, height=640, left=400, top=0"; 
    var docprint=window.open("","",disp_setting); 
	docprint.document.open(); 
	docprint.document.write('<html><head><title>Simple Shift Report</title>'); 
	docprint.document.write('</head><body>');          
	docprint.document.write(theReport);          
	docprint.document.write('</body></html>'); 
	docprint.document.close(); 
	docprint.focus(); 
}
</script>
<title>Simple Shift Report Generator</title>
<style type="text/css"></style>
</head>
<body style="background-color:#e5e5e5; color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<table bgcolor="003366"style="text-align: center; width: 100%;" border="0"
cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td><td bgcolor="#1a4f85"><font color="#FFFFFF">Simple Shift Report Generator</font></td>
<td width="30%"></td>
<td width="20%" style="text-align: right;"><font color="#8099b3" size="1">aaron smithers</font></td>
</tr>
</tbody>
<br>
<form name="shiftReport">
<table bgcolor="#DCDCDC" bordercolor="#FFFFFF" style="text-align: right; width: 100%;" border="15"
cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#e5e5e5"width="25%">Name:</td>
<td bgcolor="d9e7f8" width="75%"><input name="nameBox" size="58" value="" type="text"></td>
</tr>
<td bgcolor="#efefef"width="25%">Mod Name:</td>
<td bgcolor="#ffffcc"width="75%"><input name="ModNameBox" size="58" value="" type="text"></td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Shift:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TimSel"style="width:100%">
<option>Select Time - PST</option>
<option>4:30AM - 5:30AM</option>
<option>5:30AM - 7:00AM</option>
<option>7:00AM - 8:30AM</option>
<option>8:30AM - 10:00AM</option>
<option>10:00AM - 11:30AM</option>
<option>11:30AM - 1:00PM</option>
<option>1:00PM - 2:30PM</option>
<option>2:30PM - 4:00PM</option>
<option>4:00PM - 5:30PM</option>
<option>5:30PM - 7:00PM</option>
<option>7:00PM - 8:00PM</option>
<option>7:00PM - 8:30PM</option>
<option>8:30PM - 9:30PM</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Jurassic:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="JurSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Triassic:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="TriSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Cretaceous:</td>
<td bgcolor="#ffffcc"width="75%">
<select name="CreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Prehistoric:</td>
<td bgcolor="d9e7f8" width="75%">
<select name="PreSel"style="width:100%">
<option></option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">General:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="GeneralNotes" cols="42" rows="7" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Warning:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="PWMS" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Glitch:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="SGB" cols="42" rows="5" value=""></textarea></td
</tr>
<tr>
<td bgcolor="#e5e5e5"width="25%">Want:</td>
<td bgcolor="#d9e7f8"width="100%"><textarea name="WPMW" cols="42" rows="5" value=""></textarea></td>
</tr>
<tr>
<td bgcolor="#efefef"width="25%">Trends:</td>
<td bgcolor="#ffffcc"width="75%"><textarea name="CTaO" cols="42" rows="5" value=""></textarea></td
</tr>
</tbody>
</table>
<table style="text-align: left; width:100%;" border="15"bordercolor="#e5e5e5"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td width="75%"bgcolor="#FFFFFF">|</td>
<td width="25%"><Input Type = Button NAME = b1 width="48%" VALUE = "Create Report" onClick = calculate()><br>
<input type="button" value="        Clear        " onClick= reset()></td>
</tr>
</tbody>
</table>

</body>
</html>

My problem is the following. I have an editable <div>:
<div class='edit' id='divContent' name='divContent' ContentEditable>some text</div>

If I press 'enter' two lines are skipped. I know that if I press 'shift+enter' only one line will be skipped. If I check the unformatted code of the contenteditable div, 'enter' gives me <p> and 'shift+enter' gives me <br>, which makes sense because <p> is formatted differently than <br>.

So I want to change 'enter' into 'shift+enter'

I have already found something to capture and kill 'return'
function killReturn()
{
key = event.keyCode;
if (key == 13) return false;
}

But now for some means to replace the killed 'enter' with 'shift+enter'?

Thanks a lot in advance for any advise!

The code below is part of a working program which inserts "tentpay" and date paid. I'm trying to add the code which is below the comment line(//*). It does nothing? can someone look at it?

Code:

function calculate_paid(v)
{
 var rentdue = document.getElementById("rentdue");
 var prevbal = document.getElementById("prevbal");
 var misc = document.getElementById("misc");
 var late = document.getElementById("late");
 var amtpaid = document.getElementById("amtpaid");
 var tentpay = document.getElementById("tentpay");
 var hudpay = document.getElementById("hudpay");
 var datepaid = document.getElementById("datepaid");
 var late = document.getElementById("late");
 var dateNow = new Date();
 var dayNow = dateNow.getDate();
 var datePaid = (dateNow.getMonth()+1)+"/"+dateNow.getDate()+"/"+dateNow.getFullYear();
 switch(v)
 {
  case amtpaid:
   var tpay = amtpaid.value - hudpay.value;
   if(tpay >= 0){tentpay.value = tpay;}
   if(amtpaid.value > 0){datepaid.value = datePaid;}
   break;
  case tentpay:
   if(!hudpay.value || hudpay.value == " "){hudpay.value = 0;}
   if(!tentpay.value || tentpay.value == " "){tentpay.value = 0;tentpay.select();}
   amtpaid.value = parseInt(tentpay.value) + parseInt(hudpay.value);
   if(tentpay.value > 0){datepaid.value = datePaid;}
   break;
  case hudpay:
   if(!tentpay.value || tentpay.value == " "){tentpay.value = 0;}
   if(!hudpay.value || hudpay.value == " "){hudpay.value = 0;hudpay.select();}
   amtpaid.value = parseInt(tentpay.value) + parseInt(hudpay.value);
   if(hudpay.value > 0){datepaid.value = datePaid;}
   break;
//*
  case prevbal:
  var balance = parseInt(rentdue.value) + parseInt(prevbal.value) + parseInt(misc.value) - parseInt(hudpay.value);
  if(amtpaid.value < balance.value){
  prevbal.value = parseInt(balance.value) - parseInt(amtpaid.value);}
  if(dayNow.value > 5){late.value = "L";
   prevbal.value = prevbal.value + 10;}
  break;
  } 
     }