JavaScript - Remove White Spaces From Validation

Hi guys (and gals)

Working on my uni essay, and really struggling here with a resolution to this part of code. Maybe I shouldnt be looking for the answer, but more so on where I am going wrong.

What I am meant to do is replace the spaces in sString with the actual word 'space' i.e hello 'everyone' = 'hellospaceeveryone'

Any help would be appreciated!

Code:

function substituteSpaces(aString)
	{
		sRet = '';
		for (var iA = 0; iA < aString.length; iA++)
		{
		if (iA = 0)
			sRet = sRet + ' ';
			//sRet = sRet + 'space';
		//var nextLetter = aString.charAt(iA);		
		// sRet = sRet + nextLetter;
		}
	}	
	sSpace = substituteSpaces('a string with spaces');
	alert ("Hello");

Hi All,

I have a form in my homepage which takes some values. In that, a text box takes multiple values seperated by spaces. I have allowed only alphanumeric characters in that with the following code.

Code:

function rmsplcharchkdepo()
{
var iChars = "\\\/~!@#$%^&*()=+[]{}|;:?,.\"`'<>";
var un= document.getElementById("deposit").value;
  for (var i = 0; i < document.ipmform.deposit.value.length; i++) {
        if (iChars.indexOf(document.ipmform.deposit.value.charAt(i)) != -1) {
        alert ("Error!! Remove Special Characters.");
        document.getElementById("deposit").value = un.substring(0,0);
        return false;
        }
}
}

How can i trim the multiple spaces entered by the user between values instead of one single space allowed..

For eg:

TEXTBOX:INDIA USA UK



User should not be able to enter a space at the beginning, multiple spaces between the values and at the end. This is just to avoid unwanted complications at the backend.

In brief i need a script which trim multiple and consecutive spaces to one.

It would be a great help if some one can help me in this.

Hello,

I just created a new page topper for my website, and am new to javascript. I spent HOURS on designing all of the mouseover images that are on my website now, except there are spaces in between all of the images and I designed them to touch.

You can see what I am talking about on my website he http://www.corporateavedesign.com

I've tried everything in the code to get these images to touch. Can anyone help? Here is my code:

Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.corporateavedesign.com/images/website-logoMO1.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.corporateavedesign.com/images/website-logo1.jpg";

loadImage2 = new Image();
loadImage2.src = "http://www.corporateavedesign.com/images/website-logoMO2.jpg";
staticImage2 = new Image();
staticImage2.src = "http://www.corporateavedesign.com/images/website-logo2.jpg";

loadImage3 = new Image();
loadImage3.src = "http://www.corporateavedesign.com/images/website-logoMO3.jpg";
staticImage3 = new Image();
staticImage3.src = "http://www.corporateavedesign.com/images/website-logo3.jpg";

loadImage4 = new Image();
loadImage4.src = "http://www.corporateavedesign.com/images/website-logoMO4.jpg";
staticImage4 = new Image();
staticImage4.src = "http://www.corporateavedesign.com/images/website-logo4.jpg";

loadImage5 = new Image();
loadImage5.src = "http://www.corporateavedesign.com/images/website-logoMO5.jpg";
staticImage5 = new Image();
staticImage5.src = "http://www.corporateavedesign.com/images/website-logo5.jpg";

loadImage6 = new Image();
loadImage6.src = "http://www.corporateavedesign.com/images/website-logoMO6.jpg";
staticImage6 = new Image();
staticImage6.src = "http://www.corporateavedesign.com/images/website-logo6.jpg";

// End -->
</script>

<!-- STEP TWO: Insert this code into the BODY of your HTML document  -->

<TD 
    style="BORDER-TOP: #000000 0px solid; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM: #000000 0px solid; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: #000000" 
    vAlign=bottom bgColor=#ffffff colSpan=2 height=10>
<CENTER>
<a href="http://www.corporateavedesign.com/" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.corporateavedesign.com/images/website-logo1.jpg" border=0></a>

<a href="http://www.corporateavedesign.com/" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.corporateavedesign.com/images/website-logo2.jpg" border=0></a>

<a href="http://www.corporateavedesign.com/pages/AboutUs.htm" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://www.corporateavedesign.com/images/website-logo3.jpg" border=0></a>

<a href="http://www.corporateavedesign.com/contact.htm" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://www.corporateavedesign.com/images/website-logo4.jpg" border=0></a>

<a href="http://www.corporateavedesign.com/pages/Portfolio.htm" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="http://www.corporateavedesign.com/images/website-logo5.jpg" border=0></a>

<a href="http://www.corporateavedesign.com/category_36/Current-Price-List.htm" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
<img name="image6" src="http://www.corporateavedesign.com/images/website-logo6.jpg" border=0></a>
</CENTER>

Please help if you can, I am desperate and my website looks crazy right now! THANKS!!!

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

Hi everyone,

I run a math site and I just recently built a little program to generate math problems. When the user submits the correct answer the program changes the problem and all the steps/hints. Everything works fine except that during the change over there are all these weird blocks (same color as my background) (*FireFox Only). It only lasts for a couple of seconds, but it would be nicer if it smoothly replaced the problem. Here is the test site:

http://www.rootmath.org/test/solving-limits
The program/practice problem is at the bottom, if you don't know how to solve it you can hit "hint" until it gives you the answer. When you enter the correct answer and then click for a new problem you'll see the funky blocks.


Any help/suggestions would be greatly appreciated! Here is the code:


writeProblem() is called when the user gets the right answer and asks for another problem:
Code:

var writeProblem = 	function(){

		//these are neccessary after the first call to writeProblem.
		$(".steps").hide();	
		$("#submit_answer").show();
		$("#next_problem").hide();
		showStep.reset();

		//CLEAR "steps_area"
		var problem_area = document.getElementById('steps_area');
		while(problem_area.firstChild){
			problem_area.removeChild(problem_area.firstChild);
			}
		
		//Create a limit problem
		var limit = limits();
		limit.setDenominator(rand(6,0));
		var denom = limit.getDenominator();
		var randInt = 0//rand(3,0);
		var lim = limit.getType(randInt, denom);
		var step = lim.step(denom);
		answer = lim.getAnswer(); 	 //made global so checkAnswer() can access it
		var x = document.getElementById('problem');
		x.innerHTML = addLatex(lim.problem);
		
		var problem_area = document.getElementById('steps_area');
		//loop over array of steps and print them to steps div
		var length = step.length;
		for(var i=0; i<length; i++){
			var divTag = document.createElement("div");
			divTag.id = "step" + i;
			divTag.className = "steps"; 
			divTag.innerHTML = step[i];
			problem_area.appendChild(divTag);
			MathJax.Hub.Queue(["Typeset",MathJax.Hub,'step' + i]);
		}
		
	//	MathJax Queue for processing latex that javascript filled in
		MathJax.Hub.Queue(["Typeset",MathJax.Hub,'problem']);
	
	}

Hi

I am trying to make all the cells within a table droppable spaces, using the scriptaculous library. However I am not able to do so, and I am not certain why. The table cells are creating within the javascript. I then try to apply the droppables to the table cells through iteration, through the function when the document loads. It does not seem to be working. The document accesses an external php page and has inline php within a div element. I am uncertain if by having the draggable elements instantiated within the php script, that this would be causing any problem, as I cannot see how this would be, the php draggables all appear to be corresponding to the css in the document. Any help with the droppables would be appreciated. I have set up a css class hover, so that when the draggable passes over the droppable the edges of the droppable area should be turning blue, but this is not happening. Not sure what the problem is.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>

  <META name="generator" content="Free Script Editor, see www.freescripteditor.com">

  <TITLE>Email Client</TITLE>
  <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
  <script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/scriptaculous.js" type="text/javascript"></script>
  <script src="javascript/dragdrop.js" type="text/javascript"></script>
  <script src="javascript/controls.js" type="text/javascript"></script>
  <script src="javascript/effects.js" type="text/javascript"></script>

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

  //check if we are using IE
  try {
       //If the javascript version is greater than 5.
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       alert ("You are using Microsoft Internet Explorer.");
       }
  catch(e)
        {
        //if not, then use the older active x object.
        try  {
        //if we are using Internet Explorer
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        alert("You are using Microsoft Internet Explorer");
              }
  catch (E)
         {
         xmlhttp = false;
         }
        }
        //If we are using a non-IE browser, crea a javascript instance of the object
        if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
           {
           xmlhttp = new XMLHttpRequest();
           alert ("You are not using Microsoft Internet Explorer");
           }

        function getmessage(inbox_id)
                 {
                 var object = document.getElementById('content');
                 var server = "getmessage.php?inbox_id=" +inbox_id;
                 xmlhttp.open("GET", server);
                 xmlhttp.onreadystatechange = function()
                         {
                         if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                            {
                            object.innerHTML = xmlhttp.responseText;
                            }
                         }
                 xmlhttp.send(null);
                 }
        

        function addTable()
                 {
                 var dv = document.getElementById("right");

                 var table = document.createElement("table");
                 var tbody = document.createElement("tbody");
                 var x = 0;
              
                 //create the table rows
                 for(var j =0; j <=2; j++)
                     {
                     var row = document.createElement("tr");

                     //create the table columns
                     for (var k =0; k<=4;k++)
                          {

                          x++;
                          var cell = document.createElement("td");
                          var celltext = document.createTextNode(x);
                          cell.appendChild(celltext);
                          cell.setAttribute("className", "droparea");
                          cell.setAttribute("id", "x");
                          row.appendChild(cell);

                          }
                 //add the row to the end of the table body
                 tbody.appendChild(row);
        }
        table.appendChild(tbody);
        dv.appendChild(table);
        table.setAttribute("className", "tbl");
        }

        document.observe("dom:loaded", function()
                 {
                 var dh;
                 var cells = document.getElementsByTagName('td');
                 for (var z = 0; z <= cells.length; z++)
                      {
                      dh = cells[z].getAttribute('id');
                      if(dh)
                         {
        Droppables.add('dh', {accept:'draggable', hoverclass: 'hover'});
                         }

                      }
                      });
 </script>

</HEAD>

<BODY onload="addTable()">
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<script type="text/javascript" src="buttons/header_nav.js"></script>

</div>
<!-- end of header div-->

<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
  {//start while trainer query
  $inbox_id = $row['0'];
  $to = $row['1'];
  $subject= $row['2'];
  $sent = $row['3'];
  $message = $row['4'];
  $i++;

  echo "<div class='draggable' id='$str$i'>

 $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
 $message</a>
  <script type='text/javascript'>
  new Draggable('$str$i', {scroll: window});

  </script>
  </div>";


  }//end while inbox query
  ?>

</div> <!--end left div-->

<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">

</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
</div>


<!--end content div-->
</div>
</BODY>
</HTML>

Hello,
I am trying to create some javascript that will create a popup and the popup itself is just an image. But since I want the image to take up the entire window i create the html in a variable to hold the image. For some reason I always get white space on the right. I already have css built into the html variable to take out padding and margins and I even specify the size(sized exactly to the image) when doing window.open. I have not been able to solve this in a couple of days and have been trying alot of different solutions with no work. Any help is appreciated, here is the code:
Code:

function get_radio_value()
{
var wrong = "<html><head><style type='text/css'>body {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'>body {margin: 0}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
for (var i=0; i < document.question.mquestion.length; i++)
{
if (document.question.mquestion[i].checked)
{
var rad_val = document.question.mquestion[i].value;
if (rad_val != "b")
{ var popup = window.open('','',"resizeable=no,scrollbars=no,location=no,menubar=no,toolbar=no,width=221,height=112");
popup.document.write(wrong);
pops.document.close();
}
else
{ 	var popup = window.open("","window","resizeable,scrollbars=no,width=221,height=112");
popup.document.write(right);
pops.document.close();
}
}
}
}
</script>

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

Right now when someone clicks on my listbox I immediately do an update on the form to populate the selected item.

Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list.

Thanks

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.

I'm using jQuerys' $.ajax to load a div with some details in it and i want to use the esc key to close the div.

Heres the code so far

Code:

$('.username span').click(function(){
		$('.MiniPro').remove();
		ID = $(this).parent().attr('ID');
		This = $(this).parent();
		miniPro();
	});
	

function miniPro()
{
	$(This).append('<div class="MiniPro">Loading...</div>');
	$.ajax({
		type: 'POST',
		data: 'userID='+ID,
		url: 'processing/miniPro.php',
		success: function(msg)
		{
			$('.MiniPro').remove();
			$(This).append('<div class="MiniPro"'+msg+'<div class="MiniProClose">X</div></div>');
		}
	});
}

Is it even possible to do that?

Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" .
Code:

<html>
<head>
<title>Introduction to the DOM</title>
<script>
window.onload = function(){
var li = document.getElementsByTagName("li");
for ( var j = 0; j < li.length; j++ ) {
     if(li[j].getAttribute('class')=='test'){
li[j].parentNode.removeChild( li[j] );
     }
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the 
DOM is awesome, here are some:</p>
<ul>
<li class="ppp">ppp.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>

Hello,

I'm currently using this code:

I want it so that there isnt a box around the countdown, and the countdown is the same text as "you will be redirected in"

here is it in action: http://www.playelite.org/redirect.html

Code:

<form name="redirect">
<center>
<font face="Arial"><b>You will be redirected in: 
<form>
<input type="text" size="3" border="0" name="redirect2">
</form>
seconds</b></font>
</center>

<script>
<!--
var targetURL="http://google.com"
var countdownfrom=10
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}

countredirect()
//-->
</script>

Thanks

Hi Guys,

I'm new at JS.
I need to remove TR elements from parent table but the problem is there are no table ID/Name

Is it possible to perform it?
Please see attach - i need remove red marked block... what scrip i have to use if i will put it to the green block?
Thank you.

i am doing an edit operation in my web page by changing a image,
but when i am revisiting the page it is showing older image rather than new one.
So can any one say how to refresh the page without using any button like window.location.reload().
Is there any way to use math.random in url??