JavaScript - Spaces

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!!!

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.

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>