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.
Features
- 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.
Preview
Click on the get button for dancing preview.
|
Downloads
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;
width:150;}
.ftab{display: none; position: relative;}
.labpad{padding: 1px 10px 1px 10px;}
</style>
<script type="text/javascript" src="hdancing/dancing.js">
</script>
HTML Code
<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>
<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;">
</div>
<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>
<tr>
<td align=center>
<b>Dancing</b>
<br>
<img src="hdancing/images/get.gif" onclick="strt();" onkeyup="gett(event);" onkeydown="gett(event);" tabindex=1>
</td>
</tr>
</table>
</div><table id=t_scri class=ftab>
<tr bgcolor=#ebecea>
<td class=pad>Company Name</td><td align=center
class=labpad>
<input type="text" class=inpfld1
readonly id="scri"></td>
</tr></table>
<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">
</td>
</tr>
</table>
<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">
</td>
</tr>
</table>
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="//www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>© hscripts.com</a></div>
</td>
</tr>
</table>
<!-- Script by hscripts.com -->
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;
width:150;}
.ftab{display: none; position: relative;}
.labpad{padding: 1px 10px 1px 10px;}
</style>
<script type="text/javascript" src="hdancing/dancing.js">
</script>
HTML Code
<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>
<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;">
</div>
<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>
<tr>
<td align=center>
<b>Dancing</b>
<br>
<img src="hdancing/images/get.gif" onclick="strt();" onkeyup="gett(event);" onkeydown="gett(event);" tabindex=1>
</td>
</tr>
</table>
</div><table id=t_scri class=ftab>
<tr bgcolor=#ebecea>
<td class=pad>Company Name</td><td align=center
class=labpad>
<input type="text" class=inpfld1
readonly id="scri"></td>
</tr></table>
<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">
</td>
</tr>
</table>
<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">
</td>
</tr>
</table>
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="//www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>© hscripts.com</a></div>
</td>
</tr>
</table>
<!-- 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
Usage
- 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>
License
- Click Here for detailed license information.
