2008
Quick Contact Forms
I’ve added a new function to my site will enable to view a contact form easily at my home page. It is a sliding content that uses a hidden div’s and only appear by clicking on a javascript link.
This script lets you display content in tight areas on your page, by dropping it down into view when the mouse rolls over the anchor element. The content temporarily overlaps anything beneath it. Think of it as adding another dimension to your webpage to create more space. It’s extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside an arbitrary DIV on the page for easy customizing. A quick overview:
- Drop Down Content can be revealed either via onclick of the anchor link, or onmouseover instead. Independent setting for each anchor link.
- Set whether Drop Down Content itself should automatically hide after the user rolls his mouse out of it. Global setting inside .js file.
- For the content within Drop Down Content, it can either be inline, or fetched from an external file on your server via Ajax instead.
- Drop Down Content supports four different position orientations- “left-bottom”, right-bottom”, “left-top”, and “right-top”. The speed of the drop down reveal can also be customized.
See code here:
Step 1: Insert the following script into the <head> section of your page:
<script type=”text/javascript” src=”dropdowncontent.js”>
</script>
Javascript file: dropdowncontent.js
Step 2: Insert the below sample HTML code into the <body> section of your page, which demonstrates how to set up two drop down contents, activated by two arbitrary links:
<DIV id=”subcontent” style=”position:absolute; visibility: hidden; border: 3px solid #3c8ca3; background:#fff; width: 400px; padding: 8px; text-align:left;”>
<div style=”padding:5px; border:1px solid #c0c0c0; background:#f2f2f2; margin-bottom:15px;”>
Hi there!, Please fill up the form below. After sending your message. you will receive a feedback as soon as posible. Thanks!
</div>
<form method=”post” action=”http://www.emailmeform.com/fid.php?formid=112038″ enctype=”multipart/form-data” accept-charset=”UTF-8″><label for=”user” class=”contactlabel”>Name:</label>
<input type=”text” name=”FieldData0″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br /><label for=”email” class=”contactlabel”>Email Address:</label>
<input type=”text” name=”FieldData1″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br /><label for=”Subject” class=”contactlabel”>Subject:</label>
<input type=”text” name=”FieldData2″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”/><br /><label for=”comments” class=”contactlabel”>Message:</label>
<textarea name=”FieldData3″ rows=”30″ id=”limiter”></textarea>
<span style=”text-align:right;”>
<br />
<center>
<input type=”submit” name=”Submit” id=”submitbutton” class=”contactbutton” value=”Submit” onClick=”return checkmail(this.form.FieldData1)”/>
<input type=”reset” value=” Clear ” name=”Clear” id=”searchbutton”>
</center>
</form>
<br/>
<a href=”javascript:dropdowncontent.hidediv(’subcontent’)”>Close [X]</a>
</DIV><script type=”text/javascript”>
//Call dropdowncontent.init(”anchorID”, “positionString”, glideduration, “revealBehavior”) at the end of the page:dropdowncontent.init(”searchlink”, “right-top”, 500, “click”)
</script>
Source: http://dynamicdrive.com/dynamicindex5/overlapcontent.htm
![[BlogMarks]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/blogmarks.png)
![[del.icio.us]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/facebook.png)
![[Furl]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/furl.png)
![[Google]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/google.png)
![[Ma.gnolia]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/magnolia.png)
![[MySpace]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/myspace.png)
![[Netvouz]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/netvouz.png)
![[Newsvine]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/newsvine.png)
![[Propeller]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/propeller.png)
![[Reddit]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/reddit.png)
![[Sphere]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/sphere.png)
![[Spurl]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/spurl.png)
![[Squidoo]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/squidoo.png)
![[StumbleUpon]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/technorati.png)
![[Windows Live]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/windowslive.png)
![[Yahoo!]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/yahoo.png)
![[Email]](http://linoclaudio.net78.net/wp-content/plugins/bookmarkify/email.png)
