472,973 Members | 2,161 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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


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;
  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. }
  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. }
  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. }
  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");
  40. function myPopupRelocate() {
  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.     }
  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.     }
  66.     var leftOffset = scrolledX + (centerX - 250) / 2;
  67.     var topOffset = scrolledY + (centerY - 200) / 2;
  69.     document.getElementById("mypopup").style.top = topOffset + "px";
  70.     document.getElementById("mypopup").style.left = leftOffset + "px";
  71. }
  73. function fireMyPopup(){
  74.     myPopupRelocate();
  75.     document.getElementById("mypopup").style.display = "block";
  76.     document.body.onscroll = myPopupRelocate;
  77.     window.onscroll = myPopupRelocate;
  78. }
and my HTML page is as such

<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<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 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>
<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");
// -->

Sep 12 '07 #1
1 1663
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

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

Similar topics

by: egg | last post by:
Dear Sir/Madam, I'm about to start a project, the idea is to have a web interface to let user specify the URL of a target HTML document, based on that URL, retrieved and parsed the HTML document...
by: Frances Del Rio | last post by:
please, can you go to http://www.francesdelrio.com/dhtml/ when you click the name of the character the font color for all the lines of that character should change.. this is a simple DHTML...
by: mr_burns | last post by:
hi there, i would like a book that will explain concepts of javascript and dhtml instead of, for example, ten tutorials on how to do specific things in js or dhtml. ideally a book thats can...
by: Steve | last post by:
Hi; I have heard about a few very good books on DHTML, but the most modern ones seem to have been published in 2002. Have any _significant_ changes in DHTML or the standard DOM happened since...
by: Philipp Lenssen | last post by:
My colleague wants to start a HTML from CD (no internet connection). This ought to open Internet Explorer, but with Service Pack 2 all pop-ups are disabled. The question: is there a way for...
by: | last post by:
Hello All, Could some one send me information on DHTML tutorials where I can leand the differences between html and dhtml. Thanks, ...
by: Bob T | last post by:
Hi All, I am a bit of a newbie but have a reasonable grasp of using ASP.net code. One thing I have wanted to find our for sometime is if there is a way to invoke DHTML methods from or after...
by: Tim | last post by:
Web 2.0 recipes with PHP + DHTML Source: http://ttcom.blogspot.com Full simple code examples for dynamic elements for your web apps, including: Ad boxes, Pop-ups, Spinners, and Tabs. (ways to...
by: Jacques Jamain | last post by:
hello, in a dhtml page generated from php I want to include a file which is in fact the body of the dhtml page. My hosting ISP does not allow SSI but supports php includes. In the dhtml page, the...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

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.