Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

have hidden div show containing form when link is clicked 2

Status
Not open for further replies.
bezierstek

bezierstek

Programmer
Aug 30, 2007
43
FR
Hi, I have just seen a great contact form on a site that basically just displays a hidden div when a link is clicked and has a form contained in it and want to replicate the effect (for a contact page and site searches).

Basically when the link is clicked then a div box appears over the webpage with the form in it, and everything to do with the form happens in the div.

Does anyone know how I might approach doing this. I have had a look at their code but can't get it to work.

Not sure if I am ok to post their page here so I won't at the moment.

Thanks,

Richard
 
Sort by date Sort by votes
you create a floating div with a higher z-index than anything else, you place your form in the div and apply CSS styles to hide the div.

when the link is clicked or button or however you want to activate it, you unhide the form using the JS 'style' method.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
What you need to do is use CSS to layer your page. Then once you layered your page you could use the div layer with the appropriate form in it and display:none that element. There are functions that are freely available that slide your "invisible" div from the top location to "open" position with a close button as well. I use something similar on one of the sites I take care of but instead of sliding onto the page I use a transparency function. I could give you this function if you wish. Here is a link to a site that has simple plug and use functions for effects. These are great and work well in many different browsers. Hope this helps.
 
Upvote 0 Downvote
then a div box appears [!]over[/!] the webpage
Click to expand...

It's easy enough to get a box to appear on the page, but to make it appear over the page you have to add a bit of styling.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function toggleDiv(show) {
   document.getElementById("hiddenDiv").style.display = (show) ? "block" : "none";
}

</script>

<style type="text/css">

div#hiddenDiv {
   position:absolute;
   width:100px;
   height:100px;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
   text-align:center;
   line-height:100px;
   border:2px solid red;
   display:none;
   z-index:100;
}

</style>

</head>
<body>
   <div id="hiddenDiv">
      <a href="#" onclick="toggleDiv(false)">Hide Me</a>
   </div>
   <a href="#" onclick="toggleDiv(true)">Click Me</a>
</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Nice one cory, have a star :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Thanks for all that guys.

What I want in addition to that is for the form to be called from an external page (easy enough), but I also want any processing to done there and not to mess up the original page (eg, email submission, search etc.

 
Upvote 0 Downvote
what about either using AJAX to interact with the div or use an iFrame

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
390
xwb
xwb
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
329
berkshirea
berkshirea
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
701
ggriffit
ggriffit
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
98
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top