User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 402,048 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,529 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 840 | Replies: 4
Reply
•
•
Join Date: Feb 2008
Location: Va Beach
Posts: 179
Reputation: foundsheep is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
foundsheep's Avatar
foundsheep foundsheep is offline Offline
Junior Poster

DHTML pop up help

  #1  
Jul 8th, 2008
I have a DHTML ajax pop up that I would like to have centered in the page as it is currently left justified. Also, I would like it to only show the first time a user views the page. Here is the code:

Help with Code Tags 
<script type='text/javascript'>
  
// Browser safe opacity handling function

function setOpacity( value ) {
	document.getElementById("styled_popup").style.opacity = value / 10;
	document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
	for( var i = 0 ; i <= 100 ; i++ )
		setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
	for( var i = 0 ; i <= 100 ; i++ ) {
		setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
	}

	setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
	document.getElementById("styled_popup").style.display = "none"
}

function fireMyPopup() {
	setOpacity( 0 );
	document.getElementById("styled_popup").style.display = "block";
	fadeInMyPopup();
}

document.body.onload = window.setTimeout("fireMyPopup()", 1000);
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
<div align="center">
<form action="freeoffer_thanks.asp" method="post">
<table width="250" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td colspan="2" align="center"><span class="pageheader">Sign Up to Learn About <br />
Your FREE $50 Gift</span><br /><br />

 </td>
  </tr>
  <tr>
    <td width="6%" class="text" align="center"><strong>Name:</strong></td>
    <td width="94%" align="center"><input name="Name" type="text" size="25" /></td>
  </tr>
  <tr>
    <td class="text" align="center"><strong>Email:</strong></td>
    <td align="center"><input name="Email" type="text" size="25" /></td>
  </tr>
  <tr>
    <td class="text" align="center"><strong>Phone:</strong></td>
    <td align="center"><input name="Phone" type="text" size="25" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
<br />
<label>
      <input type="submit" name="Submit" value="Submit">
    </label></td>
   
  </tr>
</table>
</form>
</div>
</td></tr>
</table>

</div>

Any help is greatly appreciated. Thanks.
<insert witty comment here>
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 157
Reputation: Luckychap is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 16
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Junior Poster

Re: DHTML pop up help

  #2  
Jul 8th, 2008
Some code change:

Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. [b]<table style='height: 100%; width: 100%;'>
  2. <tr>
  3. <td align='center' >[/b]
  4.  
  5. <div id='styled_popup' name='styled_popup' style='border:1px solid #000000; width: 380px; height: 300px; display:none; position: relative; zoom: 1'>
  6. <table width='380' cellpadding='0' cellspacing='0' border='0'>
  7. <tr>
  8. <td><img height='23' width='356' src='images/x11_title.gif'></td>
  9. <td><a href='javascript<b> </b> :fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'> </a> </td> 
  10. </tr> 
  11. <tr> <td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'> 
  12. <div align="center"> 
  13. <form action="freeoffer_thanks.asp" method="post"> 
  14. <table width="250" border="0" cellspacing="2" cellpadding="0"> 
  15.   <tr> 
  16.     <td colspan="2" align="center"> <span class="pageheader"> Sign Up to Learn About <br /> 
  17. Your FREE $50 Gift</span> <br /> <br /> 
  18.  
  19.  </td> 
  20.   </tr> 
  21.   <tr> 
  22.     <td width="6%" class="text" align="center"> <strong> Name:</strong> </td> 
  23.     <td width="94%" align="center"> <input name="Name" type="text" size="25" /> </td> 
  24.   </tr> 
  25.   <tr> 
  26.     <td class="text" align="center"> <strong> Email:</strong> </td> 
  27.     <td align="center"> <input name="Email" type="text" size="25" /> </td> 
  28.   </tr> 
  29.   <tr> 
  30.     <td class="text" align="center"> <strong> Phone:</strong> </td> 
  31.     <td align="center"> <input name="Phone" type="text" size="25" /> </td> 
  32.   </tr> 
  33.   <tr> 
  34.     <td colspan="2" align="center"> 
  35. <br /> 
  36. <label> 
  37.       <input type="submit" name="Submit" value="Submit"> 
  38.     </label> </td> 
  39.  
  40.   </tr> 
  41. </table> 
  42. </form> 
  43. </div> 
  44.  
  45. </td> </tr> 
  46. </table> 
  47.  
  48. </div> 
  49.  
  50.  
  51. [b]</td> 
  52. </tr> 
  53. </table> [/b]
  54.  


This will bring ur popup in middle.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote  
•
•
Join Date: Feb 2008
Location: Va Beach
Posts: 179
Reputation: foundsheep is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
foundsheep's Avatar
foundsheep foundsheep is offline Offline
Junior Poster

Re: DHTML pop up help

  #3  
Jul 8th, 2008
That centered it but it also pushed the rest of the page down below the pop up. I want the pop up to be over top of the main content in the middle of the page.
<insert witty comment here>
Reply With Quote  
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 157
Reputation: Luckychap is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 16
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Junior Poster

Re: DHTML pop up help

  #4  
Jul 8th, 2008
then put that table at last and make its position absolute and make top, left also 0,0

Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <table style='position: absolute; top: 0px; left: 0px; width: 100%; height: 100%'>
  2. <tr>
  3. <td align='center' >
  4. <div>Your popup div</div>
  5. </td>
  6. </tr>
  7. </table>
  8.  
  9. </body>
  10.  
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote  
•
•
Join Date: Jun 2008
Posts: 67
Reputation: Troy III is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
Troy III's Avatar
Troy III Troy III is offline Offline
Junior Poster in Training

Re: DHTML pop up help

  #5  
Jul 18th, 2008
•
•
•
•
Originally Posted by foundsheep View Post
I have a DHTML ajax pop up that I would like to have centered in the page as it is currently left justified. Also, I would like it to only show the first time a user views the page. Here is the code:


Any help is greatly appreciated. Thanks.


Since you've found sheep,
here, - take another one!

Below is your modified code that will put your popup in the center of any window size or client screen resolution.

Help with Code Tags 
<script src="Troy III CenterElement.js" type='text/javascript'></script>
<script type='text/javascript'>
  
// Browser safe opacity handling function

function setOpacity( value ) {
	document.getElementById("styled_popup").style.opacity = value / 10;
	document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
	for( var i = 0 ; i <= 100 ; i++ )
		setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
	for( var i = 0 ; i <= 100 ; i++ ) {
		setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
	}

	setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
	document.getElementById("styled_popup").style.display = "none"
}

function fireMyPopup() {
	setOpacity( 0 );
	document.getElementById("styled_popup").style.display = "block";
	document.centerElementById("styled_popup")
	fadeInMyPopup();

}


document.body.onload = window.setTimeout("fireMyPopup()", 1000);
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
<div align="center">
<form action="freeoffer_thanks.asp" method="post">
<table width="250" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td colspan="2" align="center"><span class="pageheader">Sign Up to Learn About <br />
Your FREE $50 Gift</span><br /><br />

 </td>
  </tr>
  <tr>
    <td width="6%" class="text" align="center"><strong>Name:</strong></td>
    <td width="94%" align="center"><input name="Name" type="text" size="25" /></td>
  </tr>
  <tr>
    <td class="text" align="center"><strong>Email:</strong></td>
    <td align="center"><input name="Email" type="text" size="25" /></td>
  </tr>
  <tr>
    <td class="text" align="center"><strong>Phone:</strong></td>
    <td align="center"><input name="Phone" type="text" size="25" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
<br />
<label>
      <input type="submit" name="Submit" value="Submit">
    </label></td>
   
  </tr>
</table>
</form>
</div>
</td></tr>
</table>

</div>

This works almost as a 'browser extension'!
I've encapsulated the code into a js file, to enable other members of the forum to use it as needed.

[check the attachment file: 724 bytes]
***********************

Now about your second question:
- You should consider using cookies, and mark this thread as solved :')

Cheers.
Attached Files
File Type: js Troy III CenterElement.js (724 Bytes, 3 views)
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
collaboration tools emai security mail client malware outlook pop
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 11:37 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC