471,618 Members | 1,312 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

DHTML Pop-Up

12
I am having problems creating a DIV pop-up that allows me to display info and place forms in.

My code is as follows:

Expand|Select|Wrap|Line Numbers
  1. var time = 3000;
  2. var numofitems = 7;
  3.  
  4. //menu constructor
  5. function menu(allitems,thisitem,startstate){ 
  6.   callname= "gl"+thisitem;
  7.   divname="subglobal"+thisitem;  
  8.   this.numberofmenuitems = allitems;
  9.   this.caller = document.getElementById(callname);
  10.   this.thediv = document.getElementById(divname);
  11.   this.thediv.style.visibility = startstate;
  12. }
  13.  
  14. //menu methods
  15. function ehandler(event,theobj){
  16.   for (var i=1; i<= theobj.numberofmenuitems; i++){
  17.     var shutdiv =eval( "menuitem"+i+".thediv");
  18.     shutdiv.style.visibility="hidden";
  19.   }
  20.   theobj.thediv.style.visibility="visible";
  21. }
  22.  
  23. function closesubnav(event){
  24.   if ((event.clientY <48)||(event.clientY > 107)){
  25.     for (var i=1; i<= numofitems; i++){
  26.       var shutdiv =eval('menuitem'+i+'.thediv');
  27.       shutdiv.style.visibility='hidden';
  28.     }
  29.   }
  30. }
  31.  
  32. var menuitem1 = new menu(7,1,"hidden");
  33. var menuitem2 = new menu(7,2,"hidden");
  34. var menuitem3 = new menu(7,3,"hidden");
  35. var menuitem4 = new menu(7,4,"hidden");
  36. var menuitem5 = new menu(7,5,"hidden");
  37. var menuitem6 = new menu(7,6,"hidden");
  38. var menuitem7 = new menu(7,7,"hidden");
  39.  
  40. function myPopupRelocate() {
  41.  
  42.     var scrolledX, scrolledY;
  43.     if( self.pageYOffset ){
  44.         scrolledX = self.pageXOffset;
  45.         scrolledY = self.pageYOffset;
  46.     }else if( document.documentElement && document.documentElement.scrollTop ) {
  47.         scrolledX = document.documentElement.scrollLeft;
  48.         scrolledY = document.documentElement.scrollTop;
  49.     }else if( document.body ){
  50.         scrolledX = document.body.scrollLeft;
  51.         scrolledY = document.body.scrollTop;
  52.     }
  53.  
  54.     var centerX, centerY;
  55.     if( self.innerHeight ){
  56.         centerX = self.innerWidth;
  57.         centerY = self.innerHeight;
  58.     }else if( document.documentElement && document.documentElement.clientHeight ) {
  59.         centerX = document.documentElement.clientWidth;
  60.         centerY = document.documentElement.clientHeight;
  61.     }else if( document.body ){
  62.         centerX = document.body.clientWidth;
  63.         centerY = document.body.clientHeight;
  64.     }
  65.  
  66.     var leftOffset = scrolledX + (centerX - 250) / 2;
  67.     var topOffset = scrolledY + (centerY - 200) / 2;
  68.  
  69.     document.getElementById("mypopup").style.top = topOffset + "px";
  70.     document.getElementById("mypopup").style.left = leftOffset + "px";
  71. }
  72.  
  73. function fireMyPopup(){
  74.     myPopupRelocate();
  75.     document.getElementById("mypopup").style.display = "block";
  76.     document.body.onscroll = myPopupRelocate;
  77.     window.onscroll = myPopupRelocate;
  78. }
  79.  
and my HTML page is as such

[HTML]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="backend/main.css" type="text/css" />
<script type="text/javascript" src="backend/div.js" language="javascript"></script>
</head>
<body onmousemove="closesubnav(event);">
<div id='mypopup' class="popUp">
<p>My content that will be displayed in the popup.</p>
<p>If you scroll the page, I'll keep my position in the center of the window.</p>
<input type='button' value=' Close me! ' onclick='document.getElementById("mypopup").style. display="none"' />
</div>

<div id="utility"><input type='button' value=' Fire ! ' onclick='javascript:fireMyPopup()' /></div>

<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global link</a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global link</a>
<a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global link</a>
<a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global link</a>
<a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global link</a>
<a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global link</a>
<a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global link</a>
</div>
</div>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>

[/HTML]
Sep 12 '07 #1
1 1636
drhowarddrfine
7,435 Expert 4TB
1) And the problem is?
2) You are missing a proper doctype.
3) Is this a javascript problem?
Sep 12 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Frances Del Rio | last post: by
reply views Thread by Philipp Lenssen | last post: by
2 posts views Thread by | last post: by
1 post views Thread by Bob T | last post: by
reply views Thread by Tim | last post: by
17 posts views Thread by Jacques Jamain | last post: by
1 post views Thread by XIAOLAOHU | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.