JavaScript - Toggle Div Not Working Exactly As Expected

Hi there!

Okay, here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

Highly appreciate any help/answers/feedback!

Hi Chaps,

I'm still having problems with a Javascript 'Lookup' function.

Basically, I have a select menu 'Customer' which triggers a 3 JS functions, to populate 2 extra select menus.
Code:

<script type="text/javascript" language="javascript">
           $(document).ready(function(){
                $('#customer').change(function() {
                    var option=$(this).val();
					getCustContact(this);
					getCostCentreContact(this);
                    $.get('getCostCentre.php',{select:option},function(data){
                        $('#result').html(data).hide().fadeIn(1000);
                    });
                });
            });
</script>
<script type="text/javascript" language="javascript">
var ajax_CustContact=new Array();
function getCustContact(sel)
{
	var Customer=sel.options[sel.selectedIndex].value;
	document.getElementById('custcontact').options.length = 0;
	if(Customer.length>0){
		var index=ajax_CustContact.length;
		ajax_CustContact[index]=new sack();
		ajax_CustContact[index].requestFile='getCustomerContact.php?custid='+Customer;
		ajax_CustContact[index].onCompletion=function(){createCustContact(index)};
		ajax_CustContact[index].runAJAX();
	}
}
function createCustContact(index)
{
	var obj=document.getElementById('custcontact');
	eval(ajax_CustContact[index].response);
}
</script>
<script type="text/javascript" language="javascript">
var ajax_CostCentreContact=new Array();
function getCostCentreContact(sel)
{
	var Customer=sel.options[sel.selectedIndex].value;
	document.getElementById('costcentrecontact').options.length = 0;
	if(Customer.length>0){
		var index=ajax_CostCentreContact.length;
		ajax_CostCentreContact[index]=new sack();
		ajax_CostCentreContact[index].requestFile='getCostCentreContact.php?custid='+Customer;
		ajax_CostCentreContact[index].onCompletion=function(){createCostCentreContact(index)};
		ajax_CostCentreContact[index].runAJAX();
	}
}
function createCostCentreContact(index)
{
	var obj=document.getElementById('costcentrecontact');
	eval(ajax_CostCentreContact[index].response);
}
</script>


<select id="customer" name="FK_cust_id">
            <option value="">Select Customer</option>
            <option value="1">Customer A</option>
            <option value="2">Customer B</option>
</select>

<select id="custcontact" name="FK_contact_id">
            <option value="">--Select Customer First--</option>
</select>

<select id="costcentrecontact" name="FK_cost_centre_contact_id">
            <option value="">--Select Customer First--</option>
</select>

Using IE Developer Tools, during debugging, I get this error:
Quote:
Expected ';' Error
This relates to either:
Code:

eval(ajax_CustContact[index].response);

OR
Code:

eval(ajax_CostCentreContact[index].response);

(it's a bit random, as sometimes it works, sometimes it doesn't)

I have tried changing the 'custid' to 'custname' to check whether it was an integer causing the problem, but had the same problem.

If anyone can tell me where I am going wrong, I'd gladly give out a bit hi-5!

Hi all having a problem with my javascript and I am not getting any errors

Code:

<script type="text/javascript">
			//function disable()
			//{
				//document.book.day.disbaled="true";
			//}
			function enableOption()
			{
				book=document.book; //Temp hold of form
				year=book.year.value; //gets year value
				//year1=parseInt('year');
				month=book.month.value; //gets month value
				//month1=parseInt('month');
				book.day.disabled="true"; //gets day value
				if (month==="")
				{
					//day.disabled="true";
				}
				 if ((year = 2012 || 2016 || 2020) && (month= 02))//check for leap year
				{
					//day.disabled="false";
					document.book.day.options.length=0;//clears options
					//below is populating the option menu
					document.book.day.options[0]=new Option ("Day","",true,false);
					document.book.day.options[1]=new Option ("01","01",false,false);
				}
			}
	</script>

Ok whats happening is I want the thing to check the year and month for matches and then populate the day all using drop down boxes.

Hi,

I'm trying to get the below code working... But it seems to be throwing an error when the function hitcount(fn) is called... Im trying to call an ASP function within Javascript... Can any one please help with this :
Code:

-- Javascript code --
<script LANGUAGE="JavaScript1.2" >
function checkurl(fn)
{ 

    str = "http://webhost.in/PNM/Book/<%=gotorpt%>/" + fn;
  if (str.indexOf ("web//") > 0) 
     {
        alert("Please Select a Month!");
     }
 else
    { 
             str2 = "http://webhost.in/PNM/Book/counter.asp?choserpt=Y&whichyrmth=" + str;
             
             hitcount(fn);  -- Error occurs here : Object Expected
             
             self.location.href = str;         
    }
return;
}

</script>

--ASP function --
<%  
function hitcount(fn)
      set conn=Server.CreateObject("ADODB.Connection")
      conn.Provider="Microsoft.Jet.OLEDB.4.0"
      conn.Open  "..\Hits\hitcounter.mdb"      -- Database
      conn.Mode = 3
      
      set rs = Server.CreateObject("ADODB.Recordset")
   
      
      set SQL = "UPDATE Application_counter SET Application_counter.[Counter] = Application_counter.Counter+1 where pdf='"+fn.substring(0,8)+"';"

      rs.Open SQL,conn,1,3
      document.write(rs(0))
      rs.Close()
      cn.Close()
end function
%>

Hi all. New here as you can probably tell, and I have a problem...

I want to know how to find out the viewport height in IE. I have been trying to use document.body.clientHeight, which is supposedly exactly what I am after, but the results were always way too small to be the correct one.

As a test, I whacked a div in my page and made it 4000px tall, and ran document.body.clientHeight from IE's debugger and it returned a number over 4000px. It seems as thought clientHeight is actually returning the total height of the document, not the viewport size.

Thanks for any help.

i keep getting this error in explorer, while on chrome and on Firefox, it is just not working.
this is the html table, (the relevant part is bold)
Code:

  

<table align="center">
                    <tr>
                        <td>
                            שם:
                        </td>
                     <td>
                            <input type="text" id="uname" name="txtname" value="שדה חובה" onmouseout="chkfld('uname')"
                                onclick="this.value='';" />
                        </td>]
                    </tr>
                    <tr>
                        <td>
                            טלפון:
                        </td>
                        <td>
                            <input id="phone" type="text" name="txtphone" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            אימייל:
                        </td>
                        <td>
                            <input type="text" id="usermail" name="txtemail" value="שדה חובה" onmouseout="chkfld('usermail')"
                                onclick="this.value='';" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            סיבת הפניה:
                        </td>
                        <td>
                            <select id="reason">
                                <option>סדנאות</option>
                                <option>טיפול</option>
                                <option>הורדת משקל</option>
                                <option>ניקוי רעלים</option>
                                <option>כללי</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            פרטים:
                        </td>
                        <td>
                            <textarea id="TextArea1" cols="20" rows="10"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="submit" value="שלח" />
                        </td>
                    </tr>
                </table>

and this is the JS:
Code:

    <script type="text/javascript">

        function chkfld(id) {


            if (document.getElementById(id).value == "" || "שדה חובה") {
                document.getElementById(id).style.backgroundcolor = "yellow";
                document.getElementById(id).value == "שדה חובה";
            }
            else {
                return true;
            }
        }
         
         
    </script>

Hi guys
i am trying to make my form out put inputs to the table below. however
when i debug in ie9 it tells me error object expected for

Code:

<button onclick="document.getElementById('tablename').value=
			document.getElementById('name').value">Submit</button>

how do i properly declare the object?

the full code is below (i will obviously have more input fields just working it all out first)

thanks
david
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>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		
		<title>
			HiQuote
		</title>	
		
		<!-- Local JavaScripts -->
		
		<script type="text/javascript">
			
			// --------------------------------------------
			// the 'program' - the CONTROL LAYER
			
			function getElementById(" " )	
			
			{
				button onclick="document.getElementById(" ")
				
			}
			
			
			// ---------------------------------------------
			// The global variables - the PERSISTENCE LAYER (sort of!)
	
			var Name;
			var Number;	
			var button onclick="document.getElementById(" ")
			
			// ---------------------------------------------
			// The processing functions - the LOGIC LAYER			
			
			
	
			
			// ---------------------------------------------
			// The input/ output functions - the PRESENTATION LAYER
			//      THIS enhanced presentation layer uses a web page form for input
			//      and output.			
			
					
			
		</script>		
	</head>  
	<body>			
		<form name="form" action=" " >
			INPUT DATA:<br/><br/>
			Customer name (text): <input name="dataInputName"  type = "text" size="30" /><br/><br/>
			Phone number (text): <input name="dataInputNumber" type ="text" size="10" /><br /><br />
			<button onclick="document.getElementById('tablename').value=
			document.getElementById('name').value">Submit</button>
		</form>	
			<table>
				<tr>
					<td id="tablename">
					
					</td>
				</tr>
				<tr>
					<td id="tablenumber">
					
					</td>
				</tr>
			</table>
	</body>
</html>

The website is CnJ-Tree.atwebpages.com

The site works in everything, except, IE. Of course, never fails right.

Anyway, the error is with the navigation. I keep getting object expected errors, on pretty much all of my onMouseOver, onMouseOut, and onClick events.

Here is the html.

Code:

<tr>
		<td background="images/CnJ-Layout_04.png" width="720" height="28" valign="middle" align="center">
		<div id="container" class="navigation">
		
			<a href="#" onClick="openPage('home.php');"><div id="home" class="home" align="center" onMouseOver="navOpen('home');" onMouseOut="navClose('home');">Home</div></a>
			
			<a href="#" onClick="openPage('contact.php')"><div id="contact" class="contact" align="center" onMouseOver="navOpen('contact')" onMouseOut="navClose('contact')">Contact Us</div></a>
			
			<div id="service" class="service" align="center" onMouseOver="mopen('serviceDropDown'); navOpen('service');" 
        onMouseOut="mclosetime(); navClose('service');" style="cursor:pointer">Services</div>
			
			<div id="serviceDropDown" class="serviceDropDown" align="center" onMouseOver="mcancelclosetime(); navOpen('service');" 
            onMouseOut="mclosetime(); navClose('service');" style="visibility: hidden">	
				<div id="tree" style="cursor:pointer" onClick="openPage('tree-removal.php')" onMouseOver="navOpen('tree')" onMouseOut="navClose('tree')">Tree Removal</div>
				<div id="trimming" style="cursor:pointer" onClick="openPage('tree-removal.php')" onMouseOver="navOpen('trimming')" onMouseOut="navClose('trimming')">Tree Trimming</div>
				<div id="hauling" style="cursor:pointer" onClick="openPage('tree-removal.php')" onMouseOver="navOpen('hauling')" onMouseOut="navClose('hauling')">Any Hauling</div>
			</div>
			
			<div id="about" class="about" align="center" onMouseOver="navOpen('about')" onMouseOut="navClose('about')">About Us</div>
			
			<div id="gallery" class="gallery" align="center" onMouseOver="navOpen('gallery')" onMouseOut="navClose('gallery')">Gallery</div>
			</div>
			</td>
	</tr>

And here is the JS for the related areas.

Code:

<script type="text/javascript">
var xmlhttp

      window.onload=function(){ 
         var dotspan = document.getElementById('dots'); 
         window.setInterval(function(){ 
            if(dotspan.innerHTML == '...'){ 
               dotspan.innerHTML = '.'; 
            } 
            else{ 
               dotspan.innerHTML += '.'; 
            } 
         }, 200); 
		 
		 // Initiate AJAX usage
		try { xmlhttp = new XMLHttpRequest(); } // Firefox, Opera 8.0+, Safari
		catch(e){
			try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } // Internet Explorer
			catch(e){
				try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // Internet Explorer
				catch(e){
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}	 
      }

function navOpen(page)
{
	document.getElementById(page).style.backgroundImage = "url(images/navi-rollover.png)";
	document.getElementById(page).style.color = "#787864";
		
}

function navClose(page)
{
	document.getElementById(page).style.backgroundImage = "";
	document.getElementById(page).style.color = "#9b9b80";
}

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onClick = mclose; 


  window.onload=function(){ 
		 // Initiate AJAX usage
		try { xmlhttp = new XMLHttpRequest(); } // Firefox, Opera 8.0+, Safari
		catch(e){
			try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } // Internet Explorer
			catch(e){
				try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // Internet Explorer
				catch(e){
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}	 
      }

function openPage(id)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
var url=id;
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState !=4){
	document.getElementById("main").innerHTML=("<center><img src='http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif'></center>");
	}
else{

  document.getElementById("main").innerHTML=xmlhttp.responseText;
  }
  }
  ;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);


function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

}
</script>

I just noticed that my pseudo-streaming movie code causes an error with IE7.

I works fine with IE8, FireFox, Chrome... I have been looking on my own and found that it's likely a misplaced comma in my code, the other browser are debugging it, but IE7 will not. The error suggests it's where I have indicated below. I've tried removing the comma just after "about_us.jpg" and that causes the script to fail completely. Can anyone help me here, please?


Code:

<script type="text/javascript">
//<![CDATA[

flowplayer("player", {src: "http://www.mysite.org/flowplayer/flowplayer.commercial-3.2.5.swf", wmode: 'opaque'}, {
	// product key from your account
	key: '#$xxxxxxxxx',
		   // configure clip to use "lighthttpd" plugin for providing video data
    playlist: [
	{
        url: 'http://www.mysite.org/media/video/about_us.jpg',

    },   //<----error suggest here??? 
	{
        url: 'http://www.mysite.org/flowplayer/streamer.php?file=about_us.flv',
        provider: 'lighttpd',
		bufferLength: "2",
		autoBuffering: false
    }],

    // streaming plugins are configured normally under the plugins node
    plugins: {
        lighttpd: {
            url: 'http://www.mysite.org/flowplayer/flowplayer.pseudostreaming-3.2.5.swf',

			// use ${start} as a placeholder for the target keyframe
        queryString:escape('&start=${start}')
        }
    }
});
//]]>
</script>

I think the `getJSON` should be taking the JSON URL and returning it as a response - The data file has `Author x3 Body x3 and Title x3`. Once it has this it should map it into the `nodes` and give me three nodes for each section of data. However currently its giving me the `console.log` output that I have below and nothing in my `nodes var`

**Console Log:**

Code:

 script.js:7 [Object, Object, Object]0: Object1: Object2: Objectlength: 3__proto__: Array[0]

**Code:**

Code:

    $(document).ready(function(){
    
    	var url 		= "assets/js/data.json";
    
    	$.getJSON(url).done(function(response) {
    
    	var nodes = response.map(function(i) {
        	return $('<div>').append(
            	$('<div>', {class: 'title'}).text(i.title),
            	$('<div>', {class: 'author'}).text(i.author),
            	$('<div>', {class: 'body'}).text(i.body)
        	);
    
        	console.log(response);
    	});
    });
    	
    });//Ready function closed

Reply With Quote




01-08-2015, 10:56 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts


The data file has `Author x3 Body x3 and Title x3`.


Literally??? That is, it has something like Code:

{
    Author: "Adam",
    Author: "Bob",
    Author: "Carol",
    Body: "Somethhing...",
    Body: "something else ...",
    Body: "more stuff...",
    Title: "Book one",
    Title: "Book two",
    Title: "Book three"
}

???

I'm sure that's not what you meant, but what *DID* you mean? Why not simply copy/paste the contents of "data.json" to here?

An error 'Object expected' error occurs when loading the page online in IE.There is no error in any browser when it is in local.I need to show a popup when mouse is moved upwards...it works nice in all browsers offline but when it is made online it is not working properly in IE,when the mouse is moved upward popup shows with an error 'Object expected' and it fails to load that instant.In mozilla and other browsers it works properly.Please help to fix it, its very important for me.

Thanx

public classTestGeometricObject{
/** Main Method */
public static void main(String[] args) {
//Declare and initialize two geometric objects
GeometricObject geoObject1 = new Circle(5);
GeometricObject geoObject2 = new Rectangles(5,3);

System.out.println("The two objects have the same area? " +
equalArea(geoObject1, geoObject2));

//Display circle
displayGeometricObject(geoObject1);

//Display rectangle
displayGeometricObject(geoObject2);
}

/**A method for comparing */
public static boolean equalArea(GeometricObject object1,
GeometricObject object2) {
return object1.getArea()==object2.getArea();
}

/**A method for displaying a geometric object*/
public static void displayGeometricObject(GeometricObject object){
System.out.println();
System.out.println("The area is " + object.getArea());
System.out.println("The perimeter is " + object.getPerimeter());
}
}

Please help, I'm getting this error, Object expected, Code: 0 in Internet Explorer (not in Firefox, though). Here is the link to the page:

http://www.uatparts.com/miva/merchan...Category_Code=

I'm worried that my customers might shy away and not buy from me when they see this error. What do I need to do in order to stop this error from appearing? Note: I tried including the code in this thread but it was too long, the forum wouldn't let me.

Hi there,

I'm trying really hard to find the solution to this error I am getting in java. Im using blue j. I have a feeling its something other than just braces missing somewhere, I have looked carefully and I'm just having bad luck!! I cant proceed to the next stage of my code unless I get this bit perfected with no syntax errors. I really really appreciate someone helping me out.


Code:

import java.util.Scanner;
import java.awt.Color;
/**
* Write a description of class stage2 here.
*
* @author (Gayethiri Guruthevan)
* @version (Version 1.0)
*/
public class stage2
{
public static void main(String[]args)
{
final int WIDTH = 500; // width of the sheet in pixels
final int HEIGHT = 500; // height of the sheet in pixels


int x; // the x-coordinate
int y; // the y-coordinate
String direction; // the direction chosen


// Create a Scanner object for keyboard input.
Scanner keyboard = new Scanner(System.in);

// 1. Ask the user for the ant's x-coordinate
System.out.print("Enter your ant's x-coordinate: ");
x = keyboard.nextInt();


// 2. If the x-coordinate is outside the allowed range,
// print an error message and exit
if(x < 0 || x > WIDTH-1)
{
System.out.println("The x-coordinate must be between 0 and " + (WIDTH-1));
System.exit(-1);
}

// 3. Ask the user for the ant's y-coordinate
System.out.print("Enter your ant's y-coordinate: ");
y = keyboard.nextInt();

// 4. If the integer is outside the allowed range,
// print an error message and exit
if(y < 0 || y > HEIGHT-1)
{
System.out.println("The Y-coordinate must be between 0 and " + (HEIGHT-1));
System.exit(-1);
}


// 5. Ask the user for the direction
System.out.print("Enter the direction the ant is facing: ");
direction = keyboard.next();

System.out.print("How many steps should the ant take?: ");
int numStepsToTake = keyboard.nextInt();

for(int i=0; i<numStepsToTake;i++)
{
if (direction.equalsIgnoreCase("DL"))
{
y+=1;
x-=1;
}
else if (direction.equalsIgnoreCase("DR"))
{
y-=1;
x+=1;
}
else if (direction.equalsIgnoreCase("D"))
{
y-=1;
}
if (direction.equalsIgnoreCase("U"))
{
x+=1;
}
else if (direction.equalsIgnoreCase("UR"))
{
y+=1;
x+=1;
}
else if (direction.equalsIgnoreCase("UL"))
{
y+=1;
x-=1;
}
else if (direction.equalsIgnoreCase("L"))
{
x-=1;
}
else if(direction.equalsIgnoreCase("R"))
{
x+=1;
}
else
{
System.out.println("That is incorrect please enter the right direction");

}

// "Wrap" the x and y-coordinates if the ant has walked over the edge of the paper
if(x < 0)
{
x += WIDTH;
}
else if(x > WIDTH-1)
{
x-=WIDTH;
}
if(y < 0)
{
y += HEIGHT;
}
else if(y > HEIGHT-1)
{
y-=HEIGHT;
}

//Here is the new method for antart.


AntArt.init(WIDTH,HEIGHT,x,y);

for(int i=0; i<numStepsToTake;i++)
{
int oldX = x;
int oldY = y;

Color paperColor = AntArt.getColor(x,y);
antColor = nextColor(antColor,paperColor);
AntArt.setColor(antColor);

// Take a step
direction = nextDirection(direction,antColor,paperColor);

x = stepX(x,direction,WIDTH,HEIGHT);
y = stepY(y,direction,WIDTH,HEIGHT);

AntArt.paint(oldX,oldY);

}

AntArt.paint(x,y);
System.out.println("The new x is " + x + " and y coordinate is " + y);

}
}

}

private static int stepx(int x, String direction, int WIDTH, int HEIGHT)
{
//this will be the answer
int newx = x;

// take a step in the right direction
if(direction.equals("UR"))
{
newx += 1;
}
else if (direction.equals("R"))
{
newx += 1;
}
else if(direction.equals("DR"))
{
newx += 1;
}
else if(direction.equals("DL"))
{
newx -= 1;
}
else if(direction.equals("L"))
{
newx -= 1;
}
else if(direction.equals("UL"))
{
newx -= 1;
}


// "Wrap" the x and y-coordinates if the ant has walked over the edge of the paper
if(newx < 0)
{
newx += WIDTH;
}
else if(newx > WIDTH-1)
{
newx -= WIDTH;
}

return newx;
}
}
}





private static int stepY(int y, String direction, int WIDTH, int HEIGHT)
{
// this will be the answer
int newy = y;

// take a step in the right direction
if(direction.equals("UR"))
{
newy += 1;
}
else if (direction.equals("R"))
{
newy += 1;
}
else if(direction.equals("DR"))
{
newy += 1;
}
else if(direction.equals("DL"))
{
newy -= 1;
}
else if(direction.equals("L"))
{
newy -= 1;
}
else if(direction.equals("UL"))
{
newy -= 1;
}

// "Wrap" the x and y-coordinates if the ant has walked over the edge of the paper
if(newy < 0)
{
newy += HEIGHT;
}
else if(newy > HEIGHT-1)
{
newy -= HEIGHT;
}

return newy;
}

}