12
My code is as follows:
Expand|Select|Wrap|Line Numbers
- var time = 3000;
- var numofitems = 7;
- //menu constructor
- function menu(allitems,thisitem,startstate){
- callname= "gl"+thisitem;
- divname="subglobal"+thisitem;
- this.numberofmenuitems = allitems;
- this.caller = document.getElementById(callname);
- this.thediv = document.getElementById(divname);
- this.thediv.style.visibility = startstate;
- }
- //menu methods
- function ehandler(event,theobj){
- for (var i=1; i<= theobj.numberofmenuitems; i++){
- var shutdiv =eval( "menuitem"+i+".thediv");
- shutdiv.style.visibility="hidden";
- }
- theobj.thediv.style.visibility="visible";
- }
- function closesubnav(event){
- if ((event.clientY <48)||(event.clientY > 107)){
- for (var i=1; i<= numofitems; i++){
- var shutdiv =eval('menuitem'+i+'.thediv');
- shutdiv.style.visibility='hidden';
- }
- }
- }
- 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");
- function myPopupRelocate() {
- var scrolledX, scrolledY;
- if( self.pageYOffset ){
- scrolledX = self.pageXOffset;
- scrolledY = self.pageYOffset;
- }else if( document.documentElement && document.documentElement.scrollTop ) {
- scrolledX = document.documentElement.scrollLeft;
- scrolledY = document.documentElement.scrollTop;
- }else if( document.body ){
- scrolledX = document.body.scrollLeft;
- scrolledY = document.body.scrollTop;
- }
- var centerX, centerY;
- if( self.innerHeight ){
- centerX = self.innerWidth;
- centerY = self.innerHeight;
- }else if( document.documentElement && document.documentElement.clientHeight ) {
- centerX = document.documentElement.clientWidth;
- centerY = document.documentElement.clientHeight;
- }else if( document.body ){
- centerX = document.body.clientWidth;
- centerY = document.body.clientHeight;
- }
- var leftOffset = scrolledX + (centerX - 250) / 2;
- var topOffset = scrolledY + (centerY - 200) / 2;
- document.getElementById("mypopup").style.top = topOffset + "px";
- document.getElementById("mypopup").style.left = leftOffset + "px";
- }
- function fireMyPopup(){
- myPopupRelocate();
- document.getElementById("mypopup").style.display = "block";
- document.body.onscroll = myPopupRelocate;
- window.onscroll = myPopupRelocate;
- }
[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]
