Jump to content

Drop Down Menu

jibber4568

By jibber4568
in Javascript Help

Recommended Posts

jibber4568 Newbie

jibber4568

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/93377-drop-down-menu/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.