JavaScript - White Space On Right Side Of Popup

How can I to delete white spaces around parameter that I to pass with HTML forms.
For example, if I have 'firstname lastname ' or ' firstname lastname', exist it a builtin function in javascript to obtian 'firstname lastname'?

savio

I have a string variable:

var mystring = ' hello world ';

How can I truncate white spaces placed before or after my string value?

Thank you in advance to help.

Hi,

I have beginner skills using JS and, with alot help, have developed a script for an animation of a white noise pattern (TV screen noise). I need to use the animation in an eLearning educational lesson.

The animation works OK but the sharpness of the animated pixels is poor (for example, looks blurry in FF).

I wonder if someone can suggest a way to sharpen the animation? This would be a big help.

The CSS simply creates a 640 x 640 canvas:
canvas{
border:1px solid black;
height:640px;
width:640px;
} The JS for the animation follows:
(function(){
var viewbmd,
px = [],
timer,
itsNoisy,
stage, random = Math.random
;

init();

function init(){
stage = document.querySelector("canvas");
viewbmd = stage.getContext("2d");
itsNoisy = true;
stage.onclick = manageNoise;
initNoise();
timer = setInterval(onTick, 50)
}

function initNoise(){
var array = [], d, val;
for (var i = 0; i < 255; i++) {
array[i] = 0xffffff * (i % 2);
}
for(i = 0; i < 6400; i++){
d = random()*256|0;
val = array[d];
viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")";
viewbmd.fillRect(i%80, ((i)/80)|0, 8, 8);
}
px = viewbmd.getImageData(0, 0, 80, 80);
}

function onTick(){
flipSomePixels(160);
viewbmd.putImageData(px, 0, 0);
}

function flipSomePixels(howMany/*:int*/){
for (var i = 0; i < howMany; i++){
var pxidx = (Math.random()*(px.data.length/4))|0;
for(var j = 0; j < 3; j++){
px.data[pxidx*4+j] = !px.data[pxidx*4+j] ? 255 : 0;
}
}
}

function manageNoise(){
itsNoisy ? clearInterval(timer) : timer = setInterval(onTick, 50);
itsNoisy = !itsNoisy;
}
})();
Any help appreciated.

Kind Regards,

saratogacoach

hi all

i m using the following validation code to validate email id
Code:

if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.getElementById("customer_name").value))
	 {
	msg=msg+"Must Enter a valid Login-id/Email\n";
	document.getElementById("customer_name").focus();
	}

now i need that if the email id contains white blank space in front of email id or end of email id then this validation should pass otherwise not.

at present if there is blank space in front and end of email id then the validation doesnt passes and gives alert.

what should i add in it to validate it or how can it automatically remove white spaces before validating.

vineet

Currently I'm trying to modify OOTB code for a search box.

I'm not sure if this is best addressed within the JavaScript or CSS.

After a search term has been typed in, the users picks a match which opens in a new window, then they close the new window, and try to back space over the typed term, there is a white bar that remains below the text entry box.

For example, if the word bathroom is typed in the text box, a list of possible matching topics is displayed. You pick the option to Where is the bathroom?. This opens a new window/tab - just close the tab. The original search box still displays the term bathroom, but if you backspace to remove the term, then a white bar remains below the text entry box.

How do I get rid of the white bar when the text entry box is empty?

The code being used is shown below - attachment shows the problem as it appears in IE and FF:

A temporary page with the search box.

Code:

<style type="text/css">
                            
        
        /* autosuggest css */
/* the look of the overlay div with results */
        #la_results { 
           border: 1px solid #bbb;
            border-color: #bbb #6f6f6f #6f6f6f #bbb;
            border-top: 0;
            -moz-box-shadow: 3px 3px 8px #444;
            -webkit-box-shadow: 3px 3px 8px #444;
            -moz-border-radius-bottomright: 5px;
            -moz-border-radius-bottomleft: 5px;
            -webkit-border-bottom-right-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            background: #fff;

        }

        /*the two divs below control the look and feel of individual results, which show up as LI elements in the overlay div */
        #la_results ul {  list-style-type: none; margin:0; padding:0; font:normal 11px Geneva, Arial, Helvetica, sans-serif;}
        #la_results ul li a {    display: block; text-decoration:none; padding:3px    }

        .itemwhite { background-color:#fff;} /* the color of the "white" stripe in the results div */
        .itemcol { background-color:#efefef;} /* the color of the "color" stripe in the results div */

        #la_results li a:hover {    background-color: #f8bb49;} /*the color of the hover effect when the user goes thru the results */

        /* the class below controls the font and the look of the "more search/full text search stripe */
        .itemsrch {color:#cc3333;font:bold 11px Geneva, Arial, Helvetica, sans-serif; background-color:#FFFFCC;} 

        .nwylf { color:#900;} /* "not what you are looking for?" text color */
        &lt;/style&gt;

<!-- start of LA widget -->
<div id="la_wrapper" style="width:500px;background-color:#F3f3f3;margin:0;padding:6px;border: solid 1px #a9cee7;">
    <p>Type a question:</p>
    <input type="text" id="la_suggest" style="display:block; margin-top: 6px; width: 100%; height: 24px; font-size: 14px" onFocus="document.getElementById('la_results')[removed]=''" onKeyUp="if (this.value) {laFQM(this.value)} else {document.getElementById('la_results')[removed]=''}" value="" >

    <div id="la_results" style="padding-top: 2px; font-family: Helvetica, Arial, sans-serif; font-size:11px; position:absolute; margin-top:0px; width:500px; border: solid 1px #ccc;display:none"></div>
</div>

<script language="javascript">var lahilite="efefef"; var lanw=1;</script>
<script language="javascript" src="http://api.libanswers.com/api/ladata-32.js"></script>

Thanks much.

Hello guys! :-)
So, this is my first post so bare with me

I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made.
It has to be javascript, and as simple as possible :-)

I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result.
So:

Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed?

Ty in advance! :-)

Hello,
I have two problems. Firstly I am trying to make a form with client side validation but I have come across a problem. I need to validate the whole form under just one button but for validating email and phone number I have two different buttons and I am not sure how to make all the code run under just one button when it is submitted.

The second problem is with validating the phone number. I am sure the code and javascript is fine, but for some reason it will not work.
Here is my code:
HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="client_validation.js" /> 
	</script>
<link rel="stylesheet" type="text/css" href="Client validation.css" />
	<title> Client Validation </title>
	
	</head>
 
 <body>
 <form name="contact_form" method="post" action="submit" onsubmit="return validate_form ( );">
 <h3><strong>Client Validation</strong></h3>
 
 
<p>Your Name: <input type="text" name="text1"></p>
<p>Your Last Name: <input type="text" name="text2"></p>
<p>Email:  <input type="text" id="email" name="text3"></p>
<p>Phone: <input type="text" name="text4"></p>
<p>Address: <textarea cols="20" rows="5" name="text5"></textarea></p>
<p>Do you agree to the Terms and Conditions?
<input type="checkbox" name="text6" value="Yes"> Yes

<p><input type="submit" name="send" value="Send Details"></p>
</form>

Your Email: <form id="form_id" method="post" action="action.php" onsubmit="javascript:return validate('form_id','email');">
   <input type="text" id="email" name="email" />
   <input type="submit" value="Submit" />
   

<form method="post" action="data.php" name="form1">
 <p>Enter Number
 <input type="text" name="phoneNo"></p>
 <input type="button" name="btn1" value="submit" onClick="CheckNumber()">



 </body>
 </html>

JAVASCRIPT
Code:

function validate_form ( )
{
	valid = true;

        if ( document.contact_form.text1.value == "" )
        {
                alert ( "Please fill in the 'Your First Name' box." );
                valid = false;
        }

		if ( document.contact_form.text2.value == "" )
        {
                alert ( "Please fill in the 'Your Last Name' box." );
                valid = false;
        }
				
		if ( document.contact_form.text5.value == "" )
		{
		       alert ( "Please fill in your address." );
			   valid = false;
		}
		
		if ( document.contact_form.text6.checked == false )
        {
                alert ( "Please check the Terms & Conditions box." );
                valid = false;
        }
		
		return valid;
}

function validate(form_id,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[form_id].elements[email].value;
   if(reg.test(address) == false) {
      alert('Invalid Email Address');
      return false;
   }
}

function CheckNumber() {
var PhoneNumber=document.form1.phoneNo.value;
for (var i=0; i<PhoneNumber.length; i++) {
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9)){ 
                    alert("This is not a valid Phone Number");
                     break;
 }   } }

I hope you guys can help.
Thank you

I have been interested in APIs in the last time and i want to know exactly how it works from the server side.

so i tried to figure out how the client side API working ,
first step i took the Google Plus One JS client side code and i tried to figure out how it works , mostly i tried to find how it gets connect to the server side.
i couldn't find what this whole code doing , mainly because i focused to find Ajax requests , but there is none of them.

this is the api I checked :

https://apis.google.com/js/plusone.js

now , my questions is simple ,
i want to know how API connect to the server side , do they use AJAX?
what exactly they use to send request to server side ?


i need you're help to know more on how api working on Client side , mainly on the connect to the server.
so , how it get's done?

i am making a registration page for my website and for validation using javascript...is there any way to know on my client side javascript enable or not....

Hello, and thank you for taking the time to read over my thread.

I'm pretty new with Javascript coding and have been working with an example script for a new membership registration form. The original form seemed to have worked for most intents and purposes but it only contained one entry for a password field. Naturally I felt it needed a conformation field and have tried to stick one in, which is where I ran into problems.
I successfully made the script throw an alert box if the two forms are the same, but it then throws another alert box of undefined function as well as throwing the same undefined function alert box even if the fields are a match.

Hopefully a knowledgeable person could take a quick look at this and kindly inform me of where I'm going wrong? The code contains two of my numerous attempts to make it work (one commented out, it was easier to remember different things I have tried before to leave then in but commented out, I'm sure you all are quite familiar with that idea). Anyhow, here's the code, thank you in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<style> .signup {border:1px solid #999999}</style>
<script> 
function validate(form) {
	fail = validateFirstname(form.firstname.value)
	fail += validateSurname(form.surname.value)
	fail += validateUsername(form.username.value)
	fail += validatePassword(form.password.value)
	fail += validateConfirmpass(form.confirmpass.value)
	fail += validateAge(form.age.value)
	fail += validateEmail(form.email.value)
	if (fail == "") return true
	else { alert(fail); return false }
}
</script>
<script>
function validateFirstname(field) {
	if (field == "") return "No First name entered. \n"
	return ""
}

function validateSurname(field) {
	if (field == "") return "No Surname entered. \n"
	return ""
}

function validateUsername(field) {
	if (field == "") return "No Username was entered. \n"
	else if (field.length < 5) return "Usernames must be at least 5 characters. \n"
	else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ are valid in Usernames. \n"
}

function validatePassword(field) {
	if (field == "") return "No Password was entered. \n"
	else if (field.length < 6) return "Passwords must be at least 6 characters. \n"
	else if (!/[a-z]/.test(field) || ! /[A-Z]/.test(field) || !/[0-9]/.test(field)) return "For your account security Passwords require atleast one uppercase, one lowercase, and one number to be valid. \n"
}

function validateConfirmpass() {
	var p1 = document.getElementById('password').value;
	var p2 = document.getElementById('confirmpass').value;
	if (p1 !== p2) alert("The password fields do not match.");
}

//function validateConfirmpass(field) {
//	var password = document.getElementById('password').value;
//	var confirmpass = document.getElementById('confirmpass').value;
//	if (password !== confirmpass) {
//		return "The password and confirmation do not match. \n"
//	}
//}

function validateAge(field) {
	if (isNaN(field)) return "No Age was entered.\n"
	else if (field < 18 || field >110) return "Age is required to be between 18 and 110 years. \n"
	return ""
}

function validateEmail(field) {
	if (field == "") return "No Email was entered. \n"
	else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address entered is invalid. \n"
	return ""
}
</script>

</head>

<body>
<table class="signup" border="0" cellpadding="2" cellspacing="5">
<th colspan="2" align="center">Registration Form</th>
<form method="post" action="tnssignup.php" onsubmit="return validate(this)">
<tr><td>First name</td><td><input type="text" maxlength="32" name="firstname" /></td>
</tr><tr><td>Surname</td><td><input type="text" maxlength="32" name="surname" /></td>
</tr><tr><td>Username</td><td><input type="text" maxlength="16" name="username" /></td>
</tr><tr><td>Password</td><td><input type="text" maxlength="12" id="password" name="password" /></td>
</tr><tr><td>Confirm Password</td><td><input type="text" maxlength="12" id="confirmpass" name="confirmpass" /></td>
</tr><tr><td>Age</td><td><input type="text" maxlength="3" name="age" /></td>
</tr><tr><td>Email</td><td><input type="text" maxlength="64" name="email" /></td>
</tr><tr><td colspan="2" align="center"> <input type="submit"  value="Register" /></td>
</tr></form></table>
</body>
</html>

Hello again...
I have written a custom slideshow script which gets the images from an array...
The script will change the src of a img, which is a fullscreen background.

Now here's the problem, I've been trying to write a function where can define a folder "gallery\test\", and then get all image files in that folder and repopulate the slideshow array.

So, is there a way to scan folders?

I've searched around and found some solutions where PHP is used, but i really want to keep this pure js, if possible (?)

Thanks,

Hi guys,

I need your expertise regarding my dilema.

I was able to create a simple google map html page at our web server, this web server has access to the internet.

the problem is, when this page is accessed from a different PC that has no internet access, the google map won't work.

I know that javascripts are run at the client side, so i'm asking is it possible to run everything at the server, including the javascripts and still output the google map?

i used this tutorial to make my google map page : http://googlemaps.mayzes.org/

I've been avoiding php and asp trying to do as much client-side as possible, as lightweight as possible, but don't know enough to know if I should go that route.

I want to have several js/jquery games, really simple stuff like flash cards, memory games, matching, etc

Currently when you do something correctly it adds 5 points like: points+=5; and if you get it wrong lose 3 points: points-=3;

At the end of the game it flashes a play again button which resets points and all the cards, and that's it.

So I was trying to think of ways to add a global variable that adds the latest score to it, and maybe gives you a random "prize" which would be another variable randomly selected from an array of "prizes", or better yet, "achievements"....between games....on the same domain. I'd like to eventually make something similar to a "crafting" system, where if you have 3 particular achievements you can convert them into some new achievement...I imagine just a function that checks if you have the 3 objects, then if so it adds some 4th object and removes the first 3.

I was avoiding server side databases because I was avoiding authentication/user accounts for the time being...I would probably eventually like to let people play games, and if they want to save their scores long term, register an account....but if they don't want to register an account, I'd like them to have the same functionality for that session, where they can play a few games from around the site while accumulating a global score and list of achievement variables.

I was messing around with jstorage, but am not sure if it will work for what I'm thinking....it only accepts strings, and I couldn't figure out how to write the variableName.toString() into the jstorage "value" of the key:value pair...it gives me the impression it's more for storing form data as a convenience to the user.

So is there a client side variable storage that's simple, lightweight, and works with mobile? Or a way to write .toString() value of objects into jstorage?

Or should I just break down and start investigating my server side options? Is there some middle ground where stuff can be done client side, then give the option to register to save that information long term?

edit::I'm thinking of my 3 year old nieces ipad games, they're simple drag drop, highlight shapes, pattern association, etc but I want it so each time you play it remembers where you left off...basically a cookie would have been cool if it were bigger and not sent every packet....so kinda a "save-state" and "load-state" functionality..

edit2::sqlite seems like a legitimate option but then reading through it, it gets convoluted how to implement on my bluehost account...