JavaScript - Slightly Confused By Code

I'm picking up some work on a site that has been built already in joomla!
On some of the pages IE is breaking it and pushing it down to the bottom.

example:LINK TO BREAKAGE

That Volleyball tag should be up next to the picture. And there is an entire paragraph underneath that that is not getting seen.

Someone told me at first that it was the javascript, and I thought it was the Rokbox plugin, but that's not even activated. I am so confused. And it's not the css, because I tried that.

Has anyone else experienced this problem? And how is it fixed?
I have been working on it all weekend!

Thank you for all comments!

The situation:
I have a javascript scroller that loads it's data via JQuery .load function (code not listed as it is not relevant to the problem.) The amount of data loaded is greater than what is shown (each piece of data in it's own div with id's from #scroller1 to #scroller20). So you can see the first 13 div's right away and the other 7 are scrolled in 1 by one as the first 7 are scrolled out 1 by 1 in an endless and consecutive loop.

The problem:
For some reason, after div20 (#scroller20) is scrolled in to view, my scroller removes div8 but does not add div1 creating a blank space below div9 (if this confuses you, take a look at the link at the bottom of this post.)

After div20 is removed, then div13 is added but div1 is NOT removed, now filling this blank space.

Now normally this is not visible to be a problem, except that each of these div's will end up being much higher, perhaps only 4 showing at a time, so when one of these 4 disappears, then reappears, it will become unacceptable.

Why is this happening? I am sure it has to the code/math inside of function divage... but I can't figure it out for some reason... please help.


Here is my javascript code (which uses JQuery)

Code:

	var slide = 1;
        var auto_scroll = setInterval("scrollme(slide++)", 4000);
        function scrollme(i){
	        divage(i);
        }
        function divage(i){
				 removeIt(i%21);
                 addIt((i+13)%21);
                 var j=((i-1)%21);
                 $('#scroller-main-text').prepend($("#scroller"+j));
        }
        function addIt(i){
                  $("#scroller"+i).fadeIn(1000);  
        }
        function removeIt(i){
                  $("#scroller"+i).fadeOut(500);
        }

URL where the problem can be witnessed:
http://www.inspiritandintruth.com

Hi - In am learning Javascript and trying to understand why,

the following line :

Code:

 arguments.callee.superclass 

cannot be replaced by :

Code:

this.constructor.superclass

In the following code sample :

( the explanation given is that if someone creates a subclass of PositionedRectangle, then this.constructor will refer to the new subclass constructor, not to PositionedRectangle - but why? 'this' here to my knowledge represents the object 'PositionRectangle' and if not I can't understand why not. )

Code:

 // Here is a simple Rectangle class.
// It has a width and height and can compute its own area 
function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}


Rectangle.prototype.area = function( ) { return this.width * this.height; }


 // Here is how we might subclass it 
function PositionedRectangle(x, y, w, h) {
     // First, invoke the superclass constructor on the new object
    // so that it can initialize the width and height.
    // We use the call method so that we invoke the constructor as a
    // method of the object to be initialized.
    // This is called constructor chaining. 
    PositionRectangle.superclass = Rectangle;
     arguments.callee.superclass .call(this, w, h);

     // Now store the position of the upper-left corner of the rectangle 
    this.x = x;
    this.y = y;
}


 // Create a prototype for the subclass that inherits from the prototype
// of the superclass. 

function heir(p) {
      function f(){}
      f.prototype = p;
      return new f();
}
PositionRectangle.prototype = heir(Rectangle.prototype);

PositionRectangle.prototype.constructor = PositionRectangle;

Hi there coding friends,

im stuck again this time on arrays.. Im trying to get my head around it and im sure it's one of those things you do once you know what your doing (to an extent)

now the problem is... i have 2 arrays for a experiment one = flowerheight and the other is flowernumbers.

now the height is set out as 15,16,17,18,19
and numbers 2,1,6,4,2

what the aim is in the first part is to times the height by numbers of the corresponding array ie. 15x2 16x1 17x6 18x4 19x2 to make a 3rd array with them as the totals


then the second part of the program is to calculate the average height i.e total of total of numbers array (2+1+6+4+2) + total of 3rd array(15x2+16x1+17x6+18x4+19x2) then a write to show what the total was..


now all I have of the code is...

Code:

<HTML>
<HEAD>
<TITLE>
Flower Experiment
</TITLE>

<SCRIPT LANGUAGE = "JavaScript">
 /* 
   * Program to calculate average height of flowers.. 
   */

//Experiment results 
var flowerHeights = [15,16,17,18,19];
var flowerNumbers = [2,1,6,4,2];


//Write code to work out and show flowerheightxnumbers.


//Write code to calculate the average height of the flowers (total of flowernumbers + (flowerheight X numbers) and write it out in the browser window.

</SCRIPT>

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

now I have no idea how to go about this it's making me loose my mind. Can someone start me off in the right directon and/or explain to me what to do.

Anyhelp much appreciated, I wish I could have done more to the question to make it easier for you lot to help me but my brain is frazzled

Thanks.
James

For a project in my high school web design class, I need to integrate an Excel spreadsheet as data so to speak for a web page. I want to pull the prices from the sheet, and make them appear on the page. I'd like to pull it from the sheet so that the client can still adjust and edit the prices without having to reach the actual webpage. Conceptually, I thought this would be fairly straight forward, but in researching how to do this, I got very confused. I'm not even positive that I'm putting this in the right section.

So my main question is this:
Is there a way to integrate an Excel spreadsheet in such a way that it can provide data for certain fields of a webpage? If so, can someone please explain how?

Thanks,
A Confused High School Girl

My client has a training site that is associated with 4 different domains. If a user navigates away from one of the domains to another site (for instance www.google.com) they want to display a message and ask them if they want to leave the training site. my understanding of the window.location.href is that it will capture what is typed into the address bar until the request is submitted to the server but by then they are leaving the site. below is my code on the onbeforeunload event.

conceptually:
i want to capture the URL, compare the hostname and if the host name is one of the 4 domains then allow them to proceed,
if it is not then as them if they want to leave the site.
if they click ok allow them to move forward, if the click cancel then reload the page.

I know this is considered bad design and i have expressed this but this how they want the site to behave.

thanks
________________________________________________________________
[CODE]
<script type="text/javascript">
function SiteCheck()
{
var strCurrentURL = window.location.href;
var strNewHostName = strCurrentURL.split("/");
//
for(i = 0; i < strNewHostName.length; i++)
{
alert(i + ' ' + strNewHostName[i]);
}
//strNewHostName[4] = "sddmtraining.org"; //test values
//strNewHostName[4] == 'sddmtrain.org'; //test values
//strNewHostName[4] == 'www.sddmtrain.web.org'; test values
if (strNewHostName[4] == 'sddmtraining.org' || strNewHostName[4] == 'sddmtrain.org' || strNewHostName[4] == 'www.sddmtrain.web.org')
;
else
{
var r = confirm("Are you sure you want leave the Training Site - Click Ok to Leave / Click Cancel to stay");

if (r==true)
;
else
{
window.location.reload(window.location.href );
}

}

}
</script>
[\CODE]

Hi, thanks for reading this. I have two templates that I use on my website that use font faces.....(both of these templates were free downloads).

However, if I look at the files for each of these templates, they use font face differently - can someone kindly check if they are ok? Is one wrong and one right?

Template 1: Which works 100% well in all browsers

There is NO css reference, rather, each page has this javascript:

<script type="text/javascript" src="../jsfunnels/cufon-yui.js"></script>
<script type="text/javascript" src="../jsfunnels/MgOpen_Moderna_700.font.js"></script>
<script type="text/javascript" src="../jsfunnels/Chunk_400.font.js"></script>
<!-- Start Video section -->

<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Chunk' });
Cufon.replace('h2', { fontFamily: 'Chunk' });
Cufon.replace('h3', { fontFamily: 'Chunk' });
Cufon.replace('h7', { fontFamily: 'Chunk' });
Cufon.replace('h4', { fontFamily: 'MgOpen Moderna' });
Cufon.replace('h6', { fontFamily: 'MgOpen Moderna' });

</script>

Template 2: Which works 70% well in all browsers

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps26L_500.font.js"></script>
<script type="text/javascript" src="js/TitilliumMaps26L_300.font.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

<script type="text/javascript">
Cufon.replace('.footer span','.footer span a',{ fontFamily: 'TitilliumMaps26L-250wt'});
Cufon.replace('.col-left p',{ fontFamily: 'TitilliumMaps26L-250wt'});
Cufon.replace('.reg a',{ fontFamily: 'TitilliumMaps26L-250wt'});
Cufon.replace('.content4-left p',{ fontFamily: 'TitilliumMaps26L-250wt'});
Cufon.replace('.content4-right p.title',{ fontFamily: 'TitilliumMaps26L-250wt'});
Cufon.replace('.header-right','.search span','.header-right ul li a',{ fontFamily: 'TitilliumMaps26L-500wt'});
Cufon.replace('h1',{ fontFamily: 'TitilliumMaps26L-500wt'});

</script>

And the CSS which I believe is the culprit is he

@font-face {
font-family: 'TitilliumMaps26L002';
src: local('../font/TitilliumMaps26L002-250wt') url('../font/TitilliumMaps26L002.otf') format('opentype');
}

------------------

Now, according to Paul Irish article, I should NOT make the above CSS a local path - see the red font above.

So I guess my questions are, can anyone see anything wrong with the above, and why is there a different approach, i.e. one uses css and the other doesn't?

THANKS VERY MUCH

I use console.log to print the dom element info, but some results make me very confused.The code is below, you can paste it to a file and browse it.
//**********************
<html>
<head>
</head>
<body>
<script type="text/javascript">
function showObjInPage(obj) {
document.write("=======================================<br/>");
document.write((typeof obj) + "<br/>");
document.write("length: " + obj.length + "<br/>"); ///!!! 0, may ok
document.write(obj); //!!!!!write nothing
for (var prop in obj) {
document.write(prop + " = " + obj[prop] + "<br/>");
}
document.write("=======================================<br/>");
}
function consoleLog(obj) {
console.log("=======================================<br/>");
console.log((typeof obj) + "<br/>");
console.log("length: " + obj.length + "<br/>"); //!!!!! this is the confuse, it is 0, but the code below show obj correct!
console.log(obj); //!!! write all the p elements
for (var prop in obj) {
console.log(prop + " = " + obj[prop] + "<br/>");
}
console.log("=======================================<br/>");
}
var elems = document.getElementsByTagName('p');
//console.log(elems);
//console.log(elems.length);
showObjInPage(elems);
consoleLog(elems);
</script>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</body>
</html>

I want to print the p elements info use console.log, it is ok to log the elems, but the elems's length is 0, so it is not consistent! Maybe my code need to write after the 'p' element, but the problem is very confused. Is it a chrome console.log bug or just I do something wrong?

This post will contain a few guidelines for what you can do to get better help from us. Let's start with the obvious ones:

- Use regular language. A spelling mistake or two isn't anything I'd complain about, but 1337-speak, all-lower-case-with-no-punctuation or huge amounts of run-in text in a single paragraph doesn't make it easier for us to help you.

- Be verbose. We can't look in our crystal bowl and see the problem you have, so describe it in as much detail as possible.

- Cut-and-paste the problem code. Don't retype it into the post, do a cut-and-paste of the actual production code. It's hard to debug code if we can't see it, and this way you make sure any spelling errors or such are caught and no new ones are introduced.

- Post code within code tags, like this [code]your code here[/code]. This will display like so: Code:

alert("This is some JavaScript code!")

- Please, post the relevant code. If the code is large and complex, give us a link so we can see it in action, and just post snippets of it on the boards.

- If the code is on an intranet or otherwise is not openly accessible, put it somewhere where we can access it.

- Tell us any error messages from the JavaScript console in Firefox or Opera. (If you haven't tested it in those browsers, please do!)

- If the code has both HTML/XML and JavaScript components, please show us both and not just part of it.

- If the code has frames, iframes, objects, embeds, popups, XMLHttpRequest or similar components, tell us if you are trying it locally or from a server, and if the code is on the same or different servers.

- We don't want to see the server side code in the form of PHP, PERL, ASP, JSP, ColdFusion or any other server side format. Show us the same code you send the browser. That is, show us the generated code, after the server has done it's thing. Generally, this is the code you see on a view-source in the browser, and specifically NOT the .php or .asp (or whatever) source code.

I'm trying to get my Client Side Firefox DHTML app to display a list of eBooks. For this, i have the following files

F:\Textbooks.html
F:\eBooks.txt
F:\FirstBook.txt
F:\SecondBook.txt
F:\ThirdBook.txt


textbooks.html is my DHTML app
eBooks.txt is the Library file with a listing of all of my eBooks.
Inside of eBooks.txt is the following data:
-----------------
FirstBook.txt,
SecondBook.txt,
ThirdBook.txt,
-----------------

FirstBook.txt to ThirdBook.txt are my actual ebooks.


The problem that i'm having is that When i try to click on any buttons other than the FirstBook button, i get the following error:

----------------------------------
Error: unterminated string literal
Source File: file:///F:/Textbooks.html
Line: 1, Column: 10
Source Code:
LoadEbook('
----------------------------------

So, unlike clicking on the FirstBook button, these other buttons do not load the eBook data into the DIV for displaying the eBook data.

I use the DOM insepector to checkout the DOM of the button code, and it seems like whitespace maybe is the problem. However, i have removed whitespace from the HTMLdata string, and that's not fixing the problem.

did i forget something silly? LOL

i'm using FireFox 3.5 to develop this App. So obviously this will not work with anything other than Gecko Based browsers.

here is my HTML code:


<html>
<head>
<script language="JavaScript">
var eBookLibrary = "eBooks.txt";
var SystemPath = "f:" + String.fromCharCode(92)

function Init()
{
// Initialize the eBook reader
document.getElementById("EbookCanvas").style.visibility = "hidden";
document.getElementById("EbookToolbar").style.visibility = "visible";
document.getElementById("FileManager").style.visibility = "visible";



// Load the List of eBooks in the Library
LoadBookList();
}

function UpdateEbookList()
{
// Update the Library of Ebooks
alert("Updating eBook Library");

// Go back to the File Manager, and Reload the List of Ebooks
LoadBookList();
}

function LoadBookList()
{
// This will load the list of books that are available
var EbookList = LoadFromDisk(SystemPath + eBookLibrary);
var EbookListArray = EbookList.split(",");

for(var x = 0; x < EbookListArray.length -1; x++)
{
// Strip the Filename Extension off of the eBook File Name
// The Name of the Book is always the first Index in the Array
var BookName = EbookListArray[x].split(".");
// Remove the weird whitespace - it screws things up...i think...
BookName[0] = BookName[0].replace(/(^\s*|\s*$)/g, "");

var HTMLdata = HTMLdata + "<input type='button' value='" + "FirstBook" + "'" + " onClick=LoadEbook('" + EbookListArray[x] + "');><br>";
}

// For some ****ed up reason the first string always generates an 'undefined' even though it's nonsense
// So just delete that from the HTMLdata string, because it's just ugly - LOL
HTMLdata = HTMLdata.replace("undefined", "");
HTMLdata = HTMLdata.replace("", " ");

// Write the HTML data to the DIV
document.getElementById("FileManager").innerHTML = HTMLdata;
}

function LoadEbook(EbookName)
{
// Hide the File Manager and Show the Ebook Canvas
document.getElementById("FileManager").style.visibility = "hidden";
document.getElementById("EbookCanvas").style.visibility = "visible";
document.getElementById("EbookToolbar").style.visibility = "visible";

// Load the Ebook content into the Ebook Reader Pannel

var EbookContent = LoadFromDisk(SystemPath + EbookName);

document.getElementById("EbookCanvas").innerHTML = EbookContent;
}

function LoadFromDisk(filePath)
{
if(window.Components)
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(filePath);
if (!file.exists())
return(null);
var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
inputStream.init(file, 0x01, 00004, null);
var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
sInputStream.init(inputStream);
return(sInputStream.read(sInputStream.available()));
}
catch(e)
{
//alert("Exception while attempting to load\n\n" + e);
return(false);
}
return(null);
}
</script>
</head>

<body onLoad="Init();">

<div id="FileManager" style="position: absolute; top: 0px; left: 0px; visibility: visible;">
The eBook Library's List of Books will be listed here.
Click on one to open it in the eBook Reader
</div>
<br>
<div id="EbookCanvas" style="position: absolute; top: 0px; left: 0px; visibility: hidden;">
</div>
<br>

<div id="EbookToolbar" style="position: absolute; top: 100px; left: 0px;">
<input type="button" value="Open" OnClick="Init();">
<input type="button" value="Update" OnClick="UpdateEbookList();">
<input type="button" value="Exit" OnClick="MainMenu();">
</div>


</body>
</html>

Hi all,

I have a function that sets a value of this.name. If I call a function of that function (is there a better term for that?), I can get the value of that name with this.name. However, if I save that function's function as a variable, and THEN call it, this.name is undefined.

I don't think my vocabulary is clear enough, so here's my example:

Code:

function Ninja(name){
  this._name = name;
  this.getName = function(){
    return "ninja "+this._name
  }
}

sam = new Ninja("sam");
assert( sam.getName() == "ninja sam", "Ninja's name is ninja sam" );
sam2 = new Ninja("sam2");
sam2getName = sam2.getName;
assert( sam2getName() == "ninja sam2", "Ninja 2's name is ninja sam2" );  //fails
log("Ninja 2's name is actually "+sam2getName())  // actually "ninja undefined"

(Note: Use of "ninja" and assertions are because I was playing with the code in John Resig's java runner thingie: http://ejohn.org/apps/learn/#72)

The reason I want to be able to refer to a function by a variable is because I want to pass the function to something else that requires a function to be passed in, such as an ajax callback or something.

Anyway... why is this.name undefined in the second example?

Thanks!

Hi all,

I hope someone can advise whether such a script exists for what am wanting to do. From time to time, I need to send password information or login details and password information to some users.

At the moment, am doing it via email with a subject named FYI and the body of the email basically just contain the login and the password or in some case, just the password.

What am wanting to know is whether I can put these information into a HTML file which contains an obfuscated Javascript with a button that a user will click that will prompt for his login information and then will display the password.

In its simplest form, I guess I am looking for a Javascript that will obfuscate a HTML file that contains the password. Anyway, hopefully someone understand what am looking for.

I found some website that offers such service as obfuscating a HTML file but am hoping it can be done via a Javascript so it is at least "portable" and I do not have to be online.

Any advice will be much appreciated. Thanks in advance.

I am trying to set up a looping structure that tests to see if the user enters a value. If the textbox is null then a global variable is false otherwise a checkbox is checked and the global variable is true.

below is what i have done so far, please assist me.

var isValid = false;

window.onload = startForm;

function startForm() {


document.forms[0].firstName.focus();
document.forms[0].onsubmit = checkEntries;

alert("You have been added to the list")
}

function checkEntries() {
var menus = new Array();
var formObject = document.getElementsByTagName('*');
for (var i=0; i < formObject.length; i++){
if (formObject[i] == "myform") menus.push(formObject[i]);
if (document.forms[0].firstName.value.length==0 || document.forms[0].firstName.value.length == null){
isValid= false;
alert("Please enter a first name");
} else (document.forms[0].check0.checked=true);
isValid=true;

if (document.forms[0].lastName=="" || document.forms[0].lastName== null){
alert("Please enter a last name");
isValid = false;
} else (document.forms[0].check1.checked=true);
isValid=true;

if (document.forms[0].email=="" || document.forms[0].email== null) {
alert("Please enter a valid email");
} else
return (document.forms[0].check0.checked=true);
isValid=true;

if (document.forms[0].bDate=="" || document.forms[0].bDate== null) {
isValid=false;
alert("please make sure you enter a valid birth date.");
}
else (document.forms[0].check0.checked=true);
isValid=true;
}
}


here is the form html...

<form name="myform" >
<input type="checkbox" name="check0" class="check0" id="check0" >
First: <input type="text" name="firstName" id="firstName"> <BR>
<input type="checkbox" name="check1" class="check1" id="check1" >
Last: <input type="text" name="lastName" id="lastName" ><BR>
<input type="checkbox" name="check2" class="check2" id="check2" >
E-Mail: <input type="text" name="email" id="email"> <BR>
<input type="checkbox" name="check3" class="check3" id="check3" >
Birthday (mm/dd/yyyy): <input type="text" name="bDate" id="bDate"> <BR>
<input type="submit" value="Join our mailing List" />
</form>

Hey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas?


Here is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>City and State Lookup</title>

<style type="text/css">
h1 {
font-family:Arial;
color:navy;
}
p, td {
font-family:arial;
font-size:11px;
}
</style>

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

var httpRequest = false;
function getRequestObject() {
try {
httpRequest = new XMLHttpRequest();
}
catch (requestError) {
try {
httpRequest = new ActiveXObject
("Msxm12.XMLHTTP");
}
catch (requestError) {
try {
httpRequest = new ActiveXObject
("Microsoft.XMLHTTP");
}
catch (requestError) {
window.alert("Your browser does not support AJAX!");
return false;
}
}
}
return httpRequest;
}

function updateCityState() {
if (!httpRequest)
httpRequest = getRequestObject();
httpRequest.abort();
httpRequest.open("get","zip.xml");
httpRequest.send(null);
httpRequest.onreadystatechange=getZipInfo;
}

function getZipInfo() {
if (httpRequest.readyState==4 && httpRequest.status == 200) {
var zips = httpRequest.responseXML;
var locations = zips.getElementsByTagName("Row");
var notFound = true;
for (var i=0; i<locations.length; ++i) {
if (document.forms[0].zip.value == zips.getElementsByTagName(
"ZIP_Code")[i].childNodes[o].nodeValue) {
document.forms[0].city.value = zips.getElementsByTagname(
"City") [i].childNodes[0].nodeValue;
document.forms[0].state.value = zips.getElementByTagName(
"State_Abbreviation")[i].childNodes[0].nodeValue;
notFound = flase;
break;
}
}
if (notFound) {
window.alert("Invalid ZIP code!");
document.forms[0].city.value = "";
document.forms[0].state.value = "";
}
}
}
/* ]]> */
</script>

</head>

<body>

<h1>City and State Lookup </h1>
<form action="">
<p>Zip code <input type="text" size="5" name="zip" id="zip"
onblur="updateCityState()" /></p>
<p>City <input type="text" name="city" />
State <input type="text" size="2" name="state" /></p>
</form>



</body>
</html>

Hi guys.. I really need a bit of help.. is anyone looking at this good with JS?

I have a php form validation script but i think its a bit slow and would rather a JS script instead...

here is what i have in php..

PHP Code:
    <?php
  if(isset($_POST['submit']))
      {
          $firstName = $_POST['firstName'];
          $lastName = $_POST['lastName'];
          $email = $_POST['email'];
          $mobile = $_POST['mobile'];
          $comments = $_POST['comments'];
         
          $errors = array();
          
        function display_errors($error)
          {
          echo "<p class=\"formMessage\">";
          
          
            echo $error[0];
            
            echo "</p>";
          }  
          
         function validateNames($names) 
        {
        return(strlen($names) < 3);
        } 
        
        function validateEmail($strValue) 
        {
           $strPattern = '/([A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4})/sim';
           return(preg_match($strPattern,$strValue));
        } 
        
        function validateMobile($strValue) 
        {
           $strPattern = '/^\d{10}$/';
           return(preg_match($strPattern,$strValue));
        } 
        
        function validateComments($comments) 
        {
        return(strlen($comments) < 10);
        } 
        
        if(validateNames($firstName)) 
        {    
        $errors[] = 'Please Enter Your First Name';    
        }
        
         if(validateNames($lastName)) 
        {    
        $errors[] = 'Please Enter Your Second Name';    
        }
        
          
        if(!validateEmail($email)) 
        {    
        $errors[] = 'Please Enter Your Correct Email';    
        }
        
        if(!validateMobile($mobile)) 
        {    
        $errors[] = 'Please Enter Your Correct Mobile Number';    
        }
        
        if(validateComments($comments)) 
        {    
        $errors[] = 'Please Enter A Comment More Than 10 Characters';    
        }


          if(empty($errors))
          {
            $to = "info@eventpromotion.ie";
            $subject = "Event Promotion Enquiry!";
            $body = 
             "First Name: " . $_POST['firstName'] .
             "\nLast Name: " . $_POST['lastName'] .
             "\nEmail: " . $_POST['email'] .  
               "\nMobile: " . $_POST['mobile'] . 
             "\nMessage: " . $_POST['comments'];
              $headers = "From: ". $firstName ." ". $lastName . " <" . $email . ">\r\n";


          if (mail($to, $subject, $body, $headers)) {
            echo("<p class=\"formMessage\">Thanks for submitting your enquiry.</p>");
            }
            else
            {
            echo("<p class=\"formMessage\">Message delivery failed.</p>");
            }
          }
          else
          {
          //echo "error";
         display_errors($errors);
          }    
      }                   
?>
    <form id="form" method="post" action="index.php#quickContact"> 
              <p> 
                <label>First Name</label><br /> 
                <input type="text" name="firstName" value="<?php if(isset($firstName)){echo $firstName;} ?>" />      
            </p> 
            <p> 
                <label>Last Name</label><br /> 
                <input type="text" name="lastName" value="<?php if(isset($lastName)){echo $lastName;} ?>" />      
            </p> 
              <p> 
                <label>Email:</label><br /> 
                <input type="text" name="email" value="<?php if(isset($email)){echo $email;} ?>" /> 
                
            </p>               
            <p> 
                <label>Mobile:</label><br /> 
                <input type="text" name="mobile" value="<?php if(isset($mobile)){echo $mobile;} ?>" /> 
                
            </p>                                  
            <p> 
                <label>Comments:</label> <br />
                <textarea name="comments" cols="30" rows="3" ><?php if(isset($comments)){echo $comments;} ?></textarea>    
            </p> 
            <p>    <input class="send" type="image" src="images/submit2.gif" name="submit" value="Submit"  /></p> 
  </form>

does anyone know how to transfer this to JS so that it will be easy to understand.. Im not good with JS at all