Ajax Cross Sliding / Dancing Text Field Script

An easy to use ajax cross sliding / dancing text field script, using which you can give a dancing effect to the form fields. This free script can enhance the look of your web pages by adding bit of animation to the display of texts.


  • Cross Sliding Form Effect can make your text to dance from left to right.
  • You can adjust the dancing speed of the form text fields.
  • Easy to customize that works in almost all browsers.


Click on the get button for dancing preview.
Cross-Sliding Form Fields
Dancing script
Company Name


Copy and Paste the below codes to make use of this script in your web page.

Ajax Code

<!--Script by hscripts.com-->
<!-- more scripts @ //www.hscripts.com -->
<style type="text/css">
table{font-family: arial, verdana; font-size: 12px;}
.cmptab{border: 6px solid #FFFFDF; width:320; background-color: #DB9B6E;}
.pad{padding: 1px 10px 1px 10px; height:25; width:130; }
.inpfld1{border:0px; background-color: #ebecea; display:block; width:150;}
.inpfld2{border:0px; background-color: #f3f3fc;
.ftab{display: none; position: relative;}
.labpad{padding: 1px 10px 1px 10px;}
<script type="text/javascript" src="hdancing/dancing.js">


<div id=layer1 style="position:absolute; width:303px; height:25; visibility: hidden; top: 340px; left: 290px; z-index:1;background-image: url('images/ajax-loader.gif'); background-repeat: no-repeat; background-position: center;background-color: #dfdff1; border: 1px solid #aaaaff; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;">

<div id=layer4 style="position:absolute; width:200px; height:100; visibility: hidden; top: 272px; left: 220px; z-index:1; background-color:#dfdff1;color:red; border: 1px solid #aaaaff; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;">

<table class="cmptab" cellpadding=0 align=left style=margin-top:2px;margin-left:5px; cellspacing=0>
<tr bgcolor=#fffffa><td>
<div align=center>
<table cellpadding=0 cellspacing=0>
<td align=center>   
<img src="hdancing/images/get.gif" onclick="strt();" onkeyup="gett(event);" onkeydown="gett(event);" tabindex=1>
</div><table id=t_scri class=ftab>
<tr bgcolor=#ebecea>
<td class=pad>Company Name</td><td align=center
<input type="text" class=inpfld1
readonly id="scri"></td>
<table id=t_cat class=ftab>
<tr bgcolor=#f3f3fc>
<td class=pad>Category</td>
<td align=center class=labpad>
<input type="text" readonly class=inpfld2 id="cat">
<table id=t_des class=ftab>
<tr bgcolor=#ebecea>
<td class=pad>Address</td>
<td align=center class=labpad>
<input type="text" readonly class=inpfld1 id="des">
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="//www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>&copy; hscripts.com</a></div>

<!-- Script by hscripts.com -->

  • Downloads : Dancing.zip
  • Release Date - 10-02-2010
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com


  • Download and unzip the files. You will get the necessary files.
  • Copy the above code and paste into your page.
  • To use this cross-sliding effect Script, Call the given js file into your webpage
  •  <script type="text/javascript" src="hdancing/dancing.js"></script>
  • The Values for the Onclick event are fetched from ajax1.php file and get displayed using the ajax function.


Related Scripts

Ask Questions

Ask Question