Drop Down Menu

jibber4568 · February 27, 2008

I am trying to incorporate an ajax drop down menu on one page of a site i am making. I managed to get an example to work on its own fine.

This is the example

<html> 
  <head> 

<title>Ajax-driven menus</title> 

<style>
#menuDiv1 {
  color: #222222;
  background-color: #77CCFF;
  font-weight: bold;
  font-family: arial;
  position: absolute;
  visibility: hidden;
  cursor: hand;
}

#menuDiv2 {
  color: #222222;
  background-color: #77CCFF;
  font-weight: bold;
  font-family: arial;
  position: absolute;
  visibility: hidden;
  cursor: hand;
}

#targetDiv {
  color: #990000;
  font-size: 36pt;
  font-weight: bold;
  font-family: arial;
  font-style: italic;
}

</style>

<script language = "javascript">
  var arrayItems;

  function getData(menu) 
  { 
	var XMLHttpRequestObject = false; 

	if (window.XMLHttpRequest) {
	  XMLHttpRequestObject = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	  XMLHttpRequestObject = new 
		ActiveXObject("Microsoft.XMLHTTP");
	}

	var dataSource = (menu == 1) ? "items1.txt" : "items2.txt";

	if(XMLHttpRequestObject) {
	  XMLHttpRequestObject.open("GET", dataSource); 

	  XMLHttpRequestObject.onreadystatechange = function() 
	  { 
		if (XMLHttpRequestObject.readyState == 4 && 
		  XMLHttpRequestObject.status == 200) { 
			show(menu, XMLHttpRequestObject.responseText);
		} 
	  } 

	  XMLHttpRequestObject.send(null); 
	}
  }

  function show(menu, items) 
  {
	var data = "<table width = '100%'>";
	var loopIndex;
	arrayItems = items.split(", ");
	var target;

	if (arrayItems.length != 0) {
	  for (var loopIndex = 0; loopIndex < arrayItems.length; 
		loopIndex++) {
		var text = "display(" + loopIndex + ")";
		data += "<tr><td " 
		  + "onclick='" + text + "'>" +
		  arrayItems[loopIndex] + 
		  "</td></tr>";
	  }
	}

	data += "</table>";

	if(menu == "1"){
	  target = document.getElementById("menuDiv1");
	}

	if(menu == "2"){
	  target = document.getElementById("menuDiv2");
	}

	if(target.style.visibility == "hidden"){
	  target.innerHTML = data;
	  target.style.visibility = "visible";
	}
  }

  function hide() 
  {
	var menuDiv1 = document.getElementById("menuDiv1");

	if(menuDiv1.style.visibility == "visible"){
	  menuDiv1.innerHTML = "<div></div>";
	  menuDiv1.style.visibility = "hidden";
	}

	var menuDiv2 = document.getElementById("menuDiv2");
	if(menuDiv2.style.visibility == "visible"){
	  menuDiv2.innerHTML = "<div></div>";
	  menuDiv2.style.visibility = "hidden";
	}
  }

  function display(index) 
  {
	var targetDiv = document.getElementById("targetDiv");

	targetDiv.innerHTML = "You selected " 
	  + arrayItems[index] + ".";
  }

  function check(evt) 
  {
	var e = new MouseEvent(evt);
	var target = null;
	var img;

	img = document.getElementById("image1");

	if((e.x > parseInt(img.style.left)) && (e.y > 
	  parseInt(img.style.top)) && 
	  (e.x < (parseInt(img.style.left) + 
	  parseInt(img.style.width))) 
	  && (e.y < (parseInt(img.style.top) + 
	  parseInt (img.style.height)))){
		getData(1);
	}

	img = document.getElementById("image2");
	if(e.x > parseInt(img.style.left) && e.y > 
	  parseInt(img.style.top) && 
	  e.x < (parseInt(img.style.left) + 
	  parseInt(img.style.width)) 
	  && e.y < (parseInt(img.style.top) + 
	  parseInt(img.style.height))){
		getData(2);
	}

	target = document.getElementById("menuDiv1");
	img = document.getElementById("image1");

	if (target.style.visibility == "visible"){
	  if(e.x < parseInt(target.style.left) || e.y < 
		parseInt(img.style.top) || 
		e.x > (parseInt(img.style.left) + 
		parseInt(img.style.width)) 
		|| e.y > (parseInt(target.style.top) + 
		parseInt(target.style.height))){
		hide();
	  }
	}

	target = document.getElementById("menuDiv2");
	img = document.getElementById("image2");

	if (target.style.visibility == "visible"){
	  if(e.x < parseInt(target.style.left) || e.y < 
	  parseInt(img.style.top) || 
	  e.x > (parseInt(img.style.left) + 
	  parseInt(img.style.width)) 
	  || e.y > (parseInt(target.style.top) + 
	  parseInt(target.style.height))){
		hide();
	  }
	}
  }

  function MouseEvent(e) 
  {
	if(e) {
	  this.e = e; 
	} else {
	  this.e = window.event; 
	}

	if(e.pageX) {
	  this.x = e.pageX; 
	} else {
	  this.x = e.clientX; 
	}

	if(e.pageY) {
	  this.y = e.pageY; 
	} else {
	  this.y = e.clientY; 
	}

	if(e.target) {
	  this.target = e.target; 
	} else {
	  this.target = e.srcElement;
	}
  }
</script>

  </head> 

  <body onclick = "hide()" onmousemove = "check(event)">

<H1>Ajax-driven menus</H1>

  <img id = "image1" src="sw.jpg" 
	style="left:30; top:50; width:200; height:40;">
  <div id = "menuDiv1" style="left:30; top:100; width:100; 
	height: 70; visibility:hidden;"><div></div></div>
  <img id = "image2" style="left:270; top:50; width:200; 
	height:40;" src="pz.jpg">
  <div id = "menuDiv2" style="left:270; top:100; width:100; 
	height: 70; visibility:hidden;"><div></div></div>
  <div id = "targetDiv"></div>
  </body> 

</html>

So to incorporate it on to the page i have i added the styles to my css page.

I then created a .js page named playersload which contains the following

// JScript File
var arrayItems;

  function getData(menu) 
  { 
	var XMLHttpRequestObject = false; 

	if (window.XMLHttpRequest) {
	  XMLHttpRequestObject = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	  XMLHttpRequestObject = new 
		ActiveXObject("Microsoft.XMLHTTP");
	}

	var dataSource = (menu == 1) ? "items1.txt" : "items2.txt";

	if(XMLHttpRequestObject) {
	  XMLHttpRequestObject.open("GET", dataSource); 

	  XMLHttpRequestObject.onreadystatechange = function() 
	  { 
		if (XMLHttpRequestObject.readyState == 4 && 
		  XMLHttpRequestObject.status == 200) { 
			show(menu, XMLHttpRequestObject.responseText);
		} 
	  } 

	  XMLHttpRequestObject.send(null); 
	}
  }

  function show(menu, items) 
  {
	var data = "<table width = '100%'>";
	var loopIndex;
	arrayItems = items.split(", ");
	var target;

	if (arrayItems.length != 0) {
	  for (var loopIndex = 0; loopIndex < arrayItems.length; 
		loopIndex++) {
		var text = "display(" + loopIndex + ")";
		data += "<tr><td " 
		  + "onclick='" + text + "'>" +
		  arrayItems[loopIndex] + 
		  "</td></tr>";
	  }
	}

	data += "</table>";

	if(menu == "1"){
	  target = document.getElementById("menuDiv1");
	}

	if(menu == "2"){
	  target = document.getElementById("menuDiv2");
	}

	if(target.style.visibility == "hidden"){
	  target.innerHTML = data;
	  target.style.visibility = "visible";
	}
  }

  function hide() 
  {
	var menuDiv1 = document.getElementById("menuDiv1");

	if(menuDiv1.style.visibility == "visible"){
	  menuDiv1.innerHTML = "<div></div>";
	  menuDiv1.style.visibility = "hidden";
	}

	var menuDiv2 = document.getElementById("menuDiv2");
	if(menuDiv2.style.visibility == "visible"){
	  menuDiv2.innerHTML = "<div></div>";
	  menuDiv2.style.visibility = "hidden";
	}
  }

  function display(index) 
  {
	var targetDiv = document.getElementById("targetDiv");

	targetDiv.innerHTML = "You selected " 
	  + arrayItems[index] + ".";
  }

  function check(evt) 
  {
	var e = new MouseEvent(evt);
	var target = null;
	var img;

	img = document.getElementById("image1");

	if((e.x > parseInt(img.style.left)) && (e.y > 
	  parseInt(img.style.top)) && 
	  (e.x < (parseInt(img.style.left) + 
	  parseInt(img.style.width))) 
	  && (e.y < (parseInt(img.style.top) + 
	  parseInt (img.style.height)))){
		getData(1);
	}

	img = document.getElementById("image2");
	if(e.x > parseInt(img.style.left) && e.y > 
	  parseInt(img.style.top) && 
	  e.x < (parseInt(img.style.left) + 
	  parseInt(img.style.width)) 
	  && e.y < (parseInt(img.style.top) + 
	  parseInt(img.style.height))){
		getData(2);
	}

	target = document.getElementById("menuDiv1");
	img = document.getElementById("image1");

	if (target.style.visibility == "visible"){
	  if(e.x < parseInt(target.style.left) || e.y < 
		parseInt(img.style.top) || 
		e.x > (parseInt(img.style.left) + 
		parseInt(img.style.width)) 
		|| e.y > (parseInt(target.style.top) + 
		parseInt(target.style.height))){
		hide();
	  }
	}

	target = document.getElementById("menuDiv2");
	img = document.getElementById("image2");

	if (target.style.visibility == "visible"){
	  if(e.x < parseInt(target.style.left) || e.y < 
	  parseInt(img.style.top) || 
	  e.x > (parseInt(img.style.left) + 
	  parseInt(img.style.width)) 
	  || e.y > (parseInt(target.style.top) + 
	  parseInt(target.style.height))){
		hide();
	  }
	}
  }

  function MouseEvent(e) 
  {
	if(e) {
	  this.e = e; 
	} else {
	  this.e = window.event; 
	}

	if(e.pageX) {
	  this.x = e.pageX; 
	} else {
	  this.x = e.clientX; 
	}

	if(e.pageY) {
	  this.y = e.pageY; 
	} else {
	  this.y = e.clientY; 
	}

	if(e.target) {
	  this.target = e.target; 
	} else {
	  this.target = e.srcElement;
	}
  }
</script>

Finally i edited the page i want to view the content in to the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>COYS</title>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="Javascript/JScript.js"></script>
<script language="JavaScript" type="text/javascript" src="Javascript/playersload.js"></script>
<script type="text/javascript" language="javascript">
	var timerId = null;
var iFrame = null;

function heartbeat()
{
	clearTimeout(timerId);
	timerId = setTimeout(resetconnection, 10000);
}

function resetconnection()
{
	iFrame.src = "./pushserver2.aspx";
	heartbeat();
}

function newpicture(newpic, newinfo)
{
	var img = document.getElementById("advertbanner");
	var info = document.getElementById("advertinfo");

	img.src = newpic;
	info.innerHTML = newinfo;
}

function load()
{
	iFrame = document.createElement("iFrame");
	iFrame.style.display = "none";
	document.body.appendChild(iFrame);
	resetconnection();
} 
</script>


</head>
<body  onload="load();" onclick = "hide()" onmousemove = "check(event)">
<div id="wrapper">
  <div id="header">
  </div>
</div>
<div id="wrapper2">

<ul id="navtop">
	<li><a href="#">Home</a></li>
	<li><a href="java script:SyncTest();">News</a></li>
	<li><a href="Players.html">Players</a></li>
	<li><a href="#">History</a></li>
	<li><a href="#">Links</a></li>

</ul>
</div>

  

  <div id="advert">
  <img id="advertbanner" src="" alt="" style="z-index: 100; left: 11px; width: 850px; height: 80px" />
<div id="advertinfo"></div>
  <br />
  <br />

  
  <div id="content">
  
  <h1>Ajax-driven menus</h1>

  <img id = "image1" src="sw.jpg" alt="" 
	style="left:30; top:50; width:200; height:40;"/>
  <div id = "menuDiv1" style="left:30; top:100; width:100; 
	height: 70; visibility:hidden;"><div></div></div>
  <img id = "image2" style="left:270; top:50; width:200; 
	height:40;" src="pz.jpg" alt=""/>
  <div id = "menuDiv2" style="left:270; top:100; width:100; 
	height: 70; visibility:hidden;"><div></div></div>
  <div id = "targetDiv"></div>
  
  </div>


</div>
</body>
</html>

The only page error i get is object expected on the following line:

<body  onload="load();" onclick = "hide()" onmousemove = "check(event)">

This error also appears in the example and that works fine.

The load function is from a seperate js file so can be ignored.

I am able to see the images on my page but not the menus that should pop up underneath.

Any help is much appreciated.

Cheers

Jibber4568

Sign In

Drop Down Menu

Recommended Posts

jibber4568

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information