Solved

Javascript - Finding mouse postion - FF ok, IE no go

Posted on 2009-06-26
10
592 Views
Last Modified: 2013-11-19
I have a problem with a script that works fine in FF, but doesn't work in IE.  The problem is this, when you click on a <span> tag, it opens a hidden div in the position where the mouse is located.  It works perfectly in FF, and works ok in IE as long as you don't scroll down the page, if you scroll down, it makes the div show down from the mouse (appears to be the amount that the menus and toolbars for ie8 occupy on the screen.  Here is the page:

http://www.randykrohn.com/gallery/index.php
<!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"><!-- InstanceBegin template="/Templates/main_test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="DocTitle" -->
<title>Dragboats.com - Photo Gallery - <?php echo $pageTitle; ?></title>
<script type="text/javascript" src="../CSSMenuWriter/cssmw/menu.js"></script>
<script type="text/javascript">
function showPictureViewer(picFile){
	var folderInfo = picFile.split("_");
	var fileLocation = '../images/gallery/' + folderInfo[0] + '/' + folderInfo[0] + '_' + folderInfo[1] + '_' + folderInfo[2] + '/' + picFile + '.jpg';
	//alert(fileLocation);
	document.getElementById('pictureViewer').style.background = "url(" + fileLocation + ")";
	
}
</script>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu_ie.css" />
<![endif]-->
<!-- InstanceEndEditable -->
<style type="text/css" media="all">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
 
body {
	background-color: #FEFD8F;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	text-align: center; 
	background-image: url(../images/main_back.png);
	background-repeat: repeat-x;
}
 
h1 {
  color: #FEFD8F;
  background-color:#FF6600;
  margin: 0px 0px 0px 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-transform:uppercase;
}
 
h2 {
	padding-top: 7px;
	margin: 0px 0px 0px 10px;
  	color: #FEFD8F;
  	font-size: 12px;
	font-weight: bold;
}
 
a,  a:link {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
 
a:visited {
  color:#5E2F00;
  font-weight: bold;
  text-decoration: none;
}
 
a:hover {
  color: #fe6d00;
  text-decoration: none;
}
 
a:focus {
  color: #fe6d00;
}
 
a:active {
  color: #fe6d00;
}
 
#outerWrapper {
  margin: 0 auto 0 auto; 
  max-width: 1024px;
  min-width: 1024px;
  text-align: left;
  width: 1024px;
}
#outerWrapper #header {
  font-size: 14px;
  font-weight: bold;
  padding: 0px 0px 0px 0px;
}
#outerWrapper #header img {
  float: left;
}
 
#outerWrapper #contentWrapper .clearFloat {
  clear: both;
  display: block;
}
#outerWrapper #footer {
  padding: 11px 0px 0px 0px;
  width: 1024px;
  height: 52px;
  background-image:url(../images/footer.png);
  background-repeat:no-repeat;
  text-align:center;
}
 
hr {
  width: 95%;
  height: 2px;
  padding-top: 2px;
  padding-left: 10px;
  padding-bottom: 2px;
}
#navbarWrapper {
	display: block;
	width: 1024px;
	height: 30px;
	clear: both;
	margin: 0px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	background-image: url(../CSSMenuWriter/cssmw_images/bg.png);
	background-repeat: repeat-x;
	background-position: left top;
	}
-->
</style>
<style type="text/css" media="print">
<!--
 
body {
  background-color: #fff;
  background-image: none;
  border-color: #000; 
  color: #000;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #leftColumn1 {
  width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
  width: 170px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
<!-- InstanceBeginEditable name="Heading" -->
<link href="../styles/full.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#photo_strip {width:950px; margin-left:15px;}
#container {margin:0; padding:0; height:115px; overflow:auto; color:#222; background:#fff;}
#container ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;}
#container ul li {display:table-cell; padding:0 3px; background:#fff; vertical-align:top;}
#container ul li img {border:0; margin: 5px 0 0 0;}
#container p {margin:0; padding:0; font-size:11px;}
</style>
 
<!--[if lte IE 7]>
<style>
#container {
width:950px;
scrollbar-arrow-color: #eee;
scrollbar-3dlight-color: #fe6d00;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #fe6d00;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #fe6d00;
scrollbar-track-color: #fff;
}
#container ul li {display:inline; zoom:1; height:35px;}
* html #container {height:115px; he\ight:75px;}
</style>
<![endif]-->
<style type="text/css">
<!--
 
#pictureViewer {
	padding:5px;
	width: 800px;
	height: 535px;
  background-image: url(../images/gallery/<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0].'/'; echo $pieces[0]."_".$pieces[1]."_".$pieces[2].'/'; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; 	
} else { echo $pieces[0]."_".$pieces[1]."_".$pieces[2]."_".$pieces[3]."_".$pieces[4].'.jpg'; } ?>);
  background-repeat: no-repeat;
  background-color: #FFF;
  margin-left: 25px;
}
-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Tooltip" --><script type="text/javascript" src="../wz_tooltip.js"></script><script type="text/javascript" src="../tip_balloon.js"></script>
<!-- InstanceEndEditable -->
<div id="outerWrapper">
  <div id="header">
<img src="../images/r1c1.jpg" alt="" width="312" height="73" /><img src="../images/r1c2.jpg" alt="" width="397" height="73" /><img src="../images/r1c3.jpg" alt="" width="315" height="73" />
<img src="../images/r2c1.jpg" alt="" width="312" height="69" /><img src="../images/r2c2.jpg" alt="" width="397" height="69" /><img src="../images/r2c3.jpg" alt="" width="315" height="69" />
</div>
  <div id="navbarWrapper">
    <?php require_once( $_SERVER['DOCUMENT_ROOT'] . "/CSSMenuWriter/cssmw/menu.php"); ?>
</div>
<!-- InstanceBeginEditable name="Content" -->
<div id="ContentHeader"></div>
  <div id="contentWrapper">
    <div id="leftColumn1">
      <div class="columnHeadings">
        <h2><?php echo $pageTitle; ?></h2>
      </div>
<div id="photo_strip">
<div id="container">
<ul>
<?php 
	  do { ?>
		  <li onmouseover="Tip('Driver: <?php echo $row_rsPictures['DriverName']; ?><br>Boat: <?php echo $row_rsPictures['BoatName'];if($row_rsPictures['BoatNumber'] != "") {
								     echo " #".$row_rsPictures['BoatNumber'];
									 } ?><br>Event: <?php
				  $AssocName_array = explode('_', $row_rsPictures['Acronym']);
				  $AssocName = $AssocName_array[0];
				  if ($AssocName == "Various") {
				  	$AssocName = "";
					}			 
				  if ($row_rsPictures['DateTo'] != ""){
				  $EventYear = date("Y", strtotime($row_rsPictures['DateTo']));
				  }
				  	else { $EventYear = "";
					}
				  echo $EventYear." ".$AssocName." ".$row_rsPictures['EventName'];?><br>FileName: <?php echo $row_rsPictures['PictureFile']; ?><br>Picture Viewed (<?php echo $row_rsPictures['Views']; ?>) since posted on <?php echo date("n-j-Y", strtotime($row_rsPictures['DatePosted'])); ?>', BALLOON, true, ABOVE, true, OFFSETX, -20)" onmouseout="UnTip()" onclick="showPictureViewer('<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5];; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>')"><img src="../images/gallery/<?php $raceYear = explode('_', $row_rsPictures['EventOverlay']); echo $raceYear[0]; ?>/<?php echo $row_rsPictures['EventOverlay']; ?>/thumb/<?php echo $row_rsPictures['PictureFile']; ?>.jpg"></li>
          <?php  
		  } while ($row_rsPictures = mysql_fetch_assoc($rsPictures));
		  ?>
</ul>
</div>
</div>
<div style="text-align: right; padding-right: 15px; font-size: 10px"><?php
$TFM_Previous = $pageNum_rsPictures - 10;
if ($TFM_Previous >= 0) {
   printf('...<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_Previous, $queryString_rsPictures.'">');
   echo "[Previous "."10"." pages] </a>...";
   //Basic-UltraDev Previous X pages SB
}
?>
  <?php
for ($i = $TFM_startLink; $i <= $TFM_endLink; $i++) {
  $TFM_LimitPageEndCount = $i -1;
  if($TFM_LimitPageEndCount != $pageNum_rsPictures) {
    printf('<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_LimitPageEndCount, $queryString_rsPictures.'">');
    echo "$i</a>";
  }else{
    echo "<b>$i</b>";
  }
if($i != $TFM_endLink) echo(" ~ ");}
?>
  <?php
$TFM_Next = $pageNum_rsPictures + 10;
$TFM_Last = $totalPages_rsPictures+1;
if ($TFM_Next - 1 < $totalPages_rsPictures) { 
  printf('...<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_Next, $queryString_rsPictures.'">');
    echo "[Next "."10"." of ".$TFM_Last." pages] </a>...";
}
?>
</div>
<div id="pictureViewer"></div>
      <div class="lgcolumnFooters">
      </div>
      </div>
    <br class="clearFloat" />
  </div>
  <div id="ContentFooter"></div>
<!-- InstanceEndEditable -->
  <div id="footer"><a href="http://www.randykrohn.com/<?php if(isset($_SESSION['svUserID'])) { echo "logout"; } else { echo "login"; } ?>.php"><?php if(isset($_SESSION['svUserID'])) { echo "LOGOUT"; } else { echo "LOGIN"; } ?></a> || <a href="http://www.dragboats.com">HOME</a> || <a href="../classifieds/main.php">CLASSIFIEDS</a> || <a href="../cart/view_cart.php">CART</a> || <a href="main.php">PICTURES</a> || <a href="../merch/main.php">MERCHANDISE</a> || <a href="../video/main.php">VIDEOS</a> || <a href="../video">SCHEDULES</a> || <a href="../results.php">RESULTS</a> || <a href="../downloads.php">DOWNLOADS</a> || <a href="../rides/main.php">RIDES</a> || <a href="../rides">SERVICES</a> || <a href="contact.php">CONTACT US</a><br />
SITE CREATED AND MAINTAINED BY <a href="http://www.finishline-productions.com" target="_blank">FINISHLINE PRODUCTIONS</a> - COPYRIGHT 1997 - <?php echo date("Y"); ?> - <a href="../docs/privacy.php">PRIVACY POLICY</a> - <a href="../docs/usage.php">TERMS OF USE</a> - <a href="../docs/returns.php">RETURN POLICY</a></div>
</div>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($rsPictures);
?>

Open in new window

0
Comment
Question by:dragboatrandy
  • 6
  • 3
10 Comments
 
LVL 5

Accepted Solution

by:
ti84p earned 250 total points
ID: 24726135
The problem is more likely to be in the script rather than the html.  Could you post the contents of the script that is inserting the div?
0
 

Author Comment

by:dragboatrandy
ID: 24726157
My bad.  I gave the source for the wrong page.  Sorry about that attached is the correct code.
<?php require_once('../../Connections/connUser.php'); ?>
<?php
 if (!isset($_SESSION)) {
 session_start(); 
 } 
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
mysql_select_db($database_connUser, $connUser);
$query_rsDrivers = "SELECT UCASE(SUBSTRING((DriverInfo.DriverName),1,1)) AS name FROM DriverInfo Inner Join Gallery_PicInfo ON Gallery_PicInfo.DriverID = DriverInfo.DriverID GROUP BY name ORDER BY name ASC";
$rsDrivers = mysql_query($query_rsDrivers, $connUser) or die(mysql_error());
$row_rsDrivers = mysql_fetch_assoc($rsDrivers);
$totalRows_rsDrivers = mysql_num_rows($rsDrivers);
 
mysql_select_db($database_connUser, $connUser);
$query_rsBoats = "SELECT UCASE(SUBSTRING((BoatInfo.BoatName),1,1)) AS name FROM BoatInfo Inner Join Gallery_PicInfo ON Gallery_PicInfo.BoatID = BoatInfo.BoatID GROUP BY name ORDER BY name ASC";
$rsBoats = mysql_query($query_rsBoats, $connUser) or die(mysql_error());
$row_rsBoats = mysql_fetch_assoc($rsBoats);
$totalRows_rsBoats = mysql_num_rows($rsBoats);
 
mysql_select_db($database_connUser, $connUser);
$query_rsNumbers = "SELECT BoatInfo.BoatNumber FROM Gallery_PicInfo Inner Join BoatInfo ON Gallery_PicInfo.BoatID = BoatInfo.BoatID GROUP BY BoatInfo.BoatNumber ORDER BY BoatInfo.BoatNumber ASC";
$rsNumbers = mysql_query($query_rsNumbers, $connUser) or die(mysql_error());
$row_rsNumbers = mysql_fetch_assoc($rsNumbers);
$totalRows_rsNumbers = mysql_num_rows($rsNumbers);
 
mysql_select_db($database_connUser, $connUser);
$query_rsEvents = "SELECT EventDates.EventID,        EventDates.AssociationID,        EventDates.DateFrom,        EventDates.DateTo,        EventDates.EventName,        EventDates.VenueID,        EventDates.EventOverlay,        EventDates.HavePictures,        EventDates.IncludeInSchedule,        Venues.VenueID,        Venues.LocationName,        Venues.Location,  AssociationInfo.Acronym FROM EventDates		  INNER JOIN Venues ON (EventDates.VenueID = Venues.VenueID) INNER JOIN AssociationInfo ON (EventDates.AssociationID = AssociationInfo.AssociationID) WHERE     (       (EventDates.HavePictures = 'Y')    ) ORDER BY EventDates.DateTo DESC";
$rsEvents = mysql_query($query_rsEvents, $connUser) or die(mysql_error());
$row_rsEvents = mysql_fetch_assoc($rsEvents);
$totalRows_rsEvents = mysql_num_rows($rsEvents);
 
mysql_select_db($database_connUser, $connUser);
$query_rsPicTypes = "SELECT * FROM Gallery_PicType";
$rsPicTypes = mysql_query($query_rsPicTypes, $connUser) or die(mysql_error());
$row_rsPicTypes = mysql_fetch_assoc($rsPicTypes);
$totalRows_rsPicTypes = mysql_num_rows($rsPicTypes);
?> 
<!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"><!-- InstanceBegin template="/Templates/main_test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="DocTitle" -->
<title>Dragboats.com - Drag Boat Photo Gallery</title>
<script type="text/javascript" src="../CSSMenuWriter/cssmw/menu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu.css" />
<style type="text/css"> 
<!--
#AutoComplete {
	font-size: 11px;
	margin-top: 10px;
	padding-bottom: 8px;
	position: absolute;
	background-color: #FFF;
	border: medium solid #F60;
	overflow: hidden;
	cursor: default;
	width: 150px;
	min-height: 50px;
	max-height: 300px;
	z-index: 5;
}
.AutoCompleteHeader {
	margin-bottom: 3px;
	text-align: right;
	font-size: 10px;
	font-weight: bold;
	padding-right: 5px;
	background-color: #FF6600;
	color: #FEFD8F;
}
.AutoCompleteHeader span {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
	
.nameList {
	min-height: 45px;
	max-height: 290px;
	overflow: auto;
	margin-bottom: 5px;
}
#content span {
	font-weight: bold;
	cursor: pointer;
}
#content .out {
	color: #5E2F00;
}
#content .over {
	color: #FF6600;
}
-->
</style>
<script type="text/JavaScript">
<!--
function addHandler(objId)
{
      var thisObj = null;
	  thisObj = objId;
	  var obj = document.getElementById(thisObj);//alert('changePic(full' + objId + ',' + thisObj + ')');
	  obj.onclick = function() { hideit('AutoComplete') };
	  }
// Set Netscape up to run the "captureMousePosition" function whenever
// the mouse is moved. For Internet Explorer and Netscape 6, you can capture
// the movement a little easier.
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page
divX = 0;
divY = 0;
divXText="";
divYText="";
 
offsets = getScrollXY();
offsetX = offsets[0];
offsetY = offsets[1];
 
function captureMousePosition(e) {
    if (document.layers) {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        xMousePos = window.event.x;+document.body.scrollLeft;
        yMousePos = window.event.y;+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard 
            xMousePos = e.clientX;
        yMousePos = e.clientY;
            
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
            
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos+offsetX;
      divY = yMousePos+offsetY;
      
      if(divX > (xMousePosMax/2))
      { divX = divX-150; }
      if(divY > (yMousePosMax/2))
      { divY = divY-100; }
      
      divXText = divX+"px";
      divYText = divY+"px";
      
      //window.status = "xMousePos=" + xMousePos + ", yMousePos=" + yMousePos 
      //                        + ", divX=" + divX + ", divY=" + divY 
      //                        +", offsetX="+offsetX+", offsetY="+offsetY;
}
 
 
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) 
  {
     //Netscape compliant
     scrOfY = window.pageYOffset;
     scrOfX = window.pageXOffset;
  } 
  else
  {
     if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) 
       {
       //DOM compliant
       scrOfY = document.body.scrollTop;
       scrOfX = document.body.scrollLeft;
     } 
       else 
       {
       if( document.documentElement &&
            ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) 
            {
          //IE6 standards compliant mode
          scrOfY = document.documentElement.scrollTop;
          scrOfX = document.documentElement.scrollLeft;
       }
     }
  }
  return [ scrOfX, scrOfY ];
}
 
function showIt(type, values) 
{ 
     var infoHolder = document.getElementById('AutoComplete');
	removeChildren(infoHolder);
	//infoHolder.style.display = "";
	var valuePairs = values.split("~"); // Splits the Name/ID pairs
	//var valueNames = valuePairs[0].split("|||"); //Gives you the boat name or the driver name
	//alert(valueNames[1]);
	var header = document.createElement("div");
	var headerTextLink = document.createElement("span");
	headerTextLink.setAttribute('id', 'CloseAutoComplete');
	var headerText = document.createTextNode("CLOSE");
	headerTextLink.appendChild(headerText);
	header.appendChild(headerTextLink);
	header.className = "AutoCompleteHeader";
	infoHolder.appendChild(header);
	var nameHolder = document.createElement("div");
	nameHolder.className = "nameList";
	for(i = 0; i < (valuePairs.length - 1); i++){
		//alert(valuePairs[i]);
		var name = valuePairs[i].split("|||");
		//alert(name[1]);
		var number = name[1].split("^^");
		id = number[0];
		selectedNumber = number[1];
		var textContainer = document.createElement("p");
		var nameLink = document.createElement("a");
		nameLink.setAttribute('href', 'pictures.php?' + type + 'ID=' + id); 
		var nameText = document.createTextNode(name[0]);
		nameLink.appendChild(nameText);
			if(type != 'Driver'){
			var nameTextAddOn = document.createTextNode(' #' + selectedNumber);
			nameLink.appendChild(nameTextAddOn);
			infoHolder.style.width = "200px";
			} else {
				infoHolder.style.width = "150px";
			}
							
							
		
		textContainer.appendChild(nameLink);
		nameHolder.appendChild(textContainer);
		
	}
	infoHolder.appendChild(nameHolder);
	 var screenH = yMousePosMax;
     var screenW = xMousePosMax;
     
     infoHolder.style.position = "absolute";
     infoHolder.style.left = divXText;
     infoHolder.style.top = divYText;
     infoHolder.style.display="";
	 addHandler('CloseAutoComplete');
}
 
function hideit(whichdiv)
{ document.getElementById(whichdiv).style.display="none"; }
 
function removeChildren(s) {
//alert(s);
while (s.hasChildNodes())
s.removeChild(s.childNodes[0]);
}
 
function createRequestObject() {
    
        var req;
    
        if(window.XMLHttpRequest){
            // Firefox, Safari, Opera...
            req = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            // Internet Explorer 5+
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            // There is an error creating the object,
            // just as an old browser is being used.
            alert('There was a problem creating the XMLHttpRequest object');
        }
    
        return req;
    
    }
    
    // Make the XMLHttpRequest object
    var http = createRequestObject();
    
    function sendRequest(Type,ID) {
        
        // Open PHP script for requests
		//alert(act + type + uf);
        http.open('get', 'select.php?t=' + Type + '&v=' + ID);
        http.onreadystatechange = handleResponse;
        http.send(null);
    
    }
    
    function handleResponse() {
    
        if(http.readyState == 4 && http.status == 200){
            var response = http.responseText;
			var temp = new Array();
			//alert(response);
			temp = response.split("&&");
			//var splitResponse = split("||", response);
			//alert(response);
			if((temp) && (temp[0] != '')) {                	
					//alert('The Image File: ' + temp[0] + '/nThe Heading: ' + temp[1] + '/nThe Caption: ' + temp[2] + temp[3]);
					// UPDATE ajaxTest content
					showIt(temp[0], temp[1]);					
		}
			//if(temp[0] == 'County'){
				//	updateCountyList(temp[1]);
					//}
    } 
	//alert("shutting down quickAlert");
}
 
function getRemoteInfo(Type, ID) {
		//var searchVal = document.getElementById(type).value;
		//alert(searchVal + " " + type);
		//alert(ID);
		sendRequest(Type, ID);
    }
//-->
</script>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu_ie.css" />
<![endif]-->
<!-- InstanceEndEditable -->
<style type="text/css" media="all">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
 
body {
	background-color: #FEFD8F;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	text-align: center; 
	background-image: url(../images/main_back.png);
	background-repeat: repeat-x;
}
 
h1 {
  color: #FEFD8F;
  background-color:#FF6600;
  margin: 0px 0px 0px 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-transform:uppercase;
}
 
h2 {
	padding-top: 7px;
	margin: 0px 0px 0px 10px;
  	color: #FEFD8F;
  	font-size: 12px;
	font-weight: bold;
}
 
a,  a:link {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
 
a:visited {
  color:#5E2F00;
  font-weight: bold;
  text-decoration: none;
}
 
a:hover {
  color: #fe6d00;
  text-decoration: none;
}
 
a:focus {
  color: #fe6d00;
}
 
a:active {
  color: #fe6d00;
}
 
#outerWrapper {
  margin: 0 auto 0 auto; 
  max-width: 1024px;
  min-width: 1024px;
  text-align: left;
  width: 1024px;
}
#outerWrapper #header {
  font-size: 14px;
  font-weight: bold;
  padding: 0px 0px 0px 0px;
}
#outerWrapper #header img {
  float: left;
}
 
#outerWrapper #contentWrapper .clearFloat {
  clear: both;
  display: block;
}
#outerWrapper #footer {
  padding: 11px 0px 0px 0px;
  width: 1024px;
  height: 52px;
  background-image:url(../images/footer.png);
  background-repeat:no-repeat;
  text-align:center;
}
 
hr {
  width: 95%;
  height: 2px;
  padding-top: 2px;
  padding-left: 10px;
  padding-bottom: 2px;
}
#navbarWrapper {
	display: block;
	width: 1024px;
	height: 30px;
	clear: both;
	margin: 0px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	background-image: url(../CSSMenuWriter/cssmw_images/bg.png);
	background-repeat: repeat-x;
	background-position: left top;
	}
-->
</style>
<style type="text/css" media="print">
<!--
 
body {
  background-color: #fff;
  background-image: none;
  border-color: #000; 
  color: #000;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #leftColumn1 {
  width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
  width: 170px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
<!-- InstanceBeginEditable name="Heading" -->
<link href="../styles/2box.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Tooltip" --><!-- InstanceEndEditable -->
<div id="outerWrapper">
  <div id="header">
<img src="../images/r1c1.jpg" alt="" width="312" height="73" /><img src="../images/r1c2.jpg" alt="" width="397" height="73" /><img src="../images/r1c3.jpg" alt="" width="315" height="73" />
<img src="../images/r2c1.jpg" alt="" width="312" height="69" /><img src="../images/r2c2.jpg" alt="" width="397" height="69" /><img src="../images/r2c3.jpg" alt="" width="315" height="69" />
</div>
  <div id="navbarWrapper">
    <?php require_once( $_SERVER['DOCUMENT_ROOT'] . "/CSSMenuWriter/cssmw/menu.php"); ?>
</div>
<!-- InstanceBeginEditable name="Content" -->
<div id="ContentHeader"></div>
  <div id="contentWrapper">
    <div id="content">
      <div class="lgcolumnHeadings">
        <h2>welcome to the photo gallery</h2>
      </div>
      <p>Welcome to the World's Largest Drag Boat Photo Gallery at Dragboats.com.  Now finding pictures of your favorite boats and drivers is so much easier!  Simply click on the letter and a menu will appear with all of the information available for that category, run down the list, find your option and click it - it's that easy!</p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY DRIVER NAME</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Driver', '<?php echo $row_rsDrivers['name']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsDrivers['name']; ?></span>
		  <?php 
          if($i < $totalRows_rsDrivers) { echo " || "; } 
		  $i++;
		  } while ($row_rsDrivers = mysql_fetch_assoc($rsDrivers)); ?></p>
      <div id="AutoComplete" style="display: none"></div>
      <div class="lgcolumnFooters"></div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY BOAT NAME</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Boat', '<?php echo $row_rsBoats['name']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsBoats['name']; ?></span>
	  <?php 
          if($i < $totalRows_rsBoats) { echo " || "; } 
		  $i++;
		  } while ($row_rsBoats = mysql_fetch_assoc($rsBoats)); ?></p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY BOAT NUMBER</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Number', '<?php echo $row_rsNumbers['BoatNumber']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsNumbers['BoatNumber']; ?></span>
	  <?php 
          if($i < $totalRows_rsNumbers) { echo " || "; } 
		  $i++;
		  } while ($row_rsNumbers = mysql_fetch_assoc($rsNumbers)); ?></p>
      <div class="lgcolumnFooters">
      </div>
          <div class="lgcolumnHeadings">
        <h2>CHOOSE BY event</h2>
      </div>
      <p><select name="EventID" id="EventID" style="font-size: 12px">
                  <option value="">Choose An Event</option>
                  <?php
do {  
?>
                  <option value="<?php echo $row_rsEvents['EventID']?>">
                  <?php 
				  $AssocName_array = explode('_', $row_rsEvents['Acronym']);
				  $AssocName = $AssocName_array[0];
				  $EventYear = date("Y", strtotime($row_rsEvents['DateTo']));
				  echo $EventYear." ".$AssocName." ".$row_rsEvents['EventName'];?>
                  </option>
                  <?php
} while ($row_rsEvents = mysql_fetch_assoc($rsEvents));
  $rows = mysql_num_rows($rsEvents);
  if($rows > 0) {
      mysql_data_seek($rsEvents, 0);
	  $row_rsEvents = mysql_fetch_assoc($rsEvents);
  }
?>
                </select></p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY PICTURE TYPE</h2>
      </div>
<p><select name="PicTypeID" id="PicTypeID" style="font-size: 12px">
<option value="">Choose An Type</option>
<?php
do {  
?>
<option value="<?php echo $row_rsPicTypes['picTypeID']?>"><?php echo $row_rsPicTypes['picType']?></option>
<?php
} while ($row_rsPicTypes = mysql_fetch_assoc($rsPicTypes));
  $rows = mysql_num_rows($rsPicTypes);
  if($rows > 0) {
      mysql_data_seek($rsPicTypes, 0);
	  $row_rsPicTypes = mysql_fetch_assoc($rsPicTypes);
  }
?>
</select></p>
      <div class="lgcolumnFooters">
      </div>
    </div>
    <div id="rightColumn1">
      <div class="columnHeadings">
        <h2>specials</h2></div>
<p>&nbsp;</p><div class="columnFooters">
    </div></div>
    
    <br class="clearFloat" />
  </div>
  <div id="ContentFooter"></div>
<!-- InstanceEndEditable -->
  <div id="footer"><a href="http://www.randykrohn.com/<?php if(isset($_SESSION['svUserID'])) { echo "logout"; } else { echo "login"; } ?>.php"><?php if(isset($_SESSION['svUserID'])) { echo "LOGOUT"; } else { echo "LOGIN"; } ?></a> || <a href="http://www.dragboats.com">HOME</a> || <a href="../classifieds/main.php">CLASSIFIEDS</a> || <a href="../cart/view_cart.php">CART</a> || <a href="main.php">PICTURES</a> || <a href="../merch/main.php">MERCHANDISE</a> || <a href="../video/main.php">VIDEOS</a> || <a href="../video">SCHEDULES</a> || <a href="../results.php">RESULTS</a> || <a href="../downloads.php">DOWNLOADS</a> || <a href="../rides/main.php">RIDES</a> || <a href="../rides">SERVICES</a> || <a href="contact.php">CONTACT US</a><br />
SITE CREATED AND MAINTAINED BY <a href="http://www.finishline-productions.com" target="_blank">FINISHLINE PRODUCTIONS</a> - COPYRIGHT 1997 - <?php echo date("Y"); ?> - <a href="../docs/privacy.php">PRIVACY POLICY</a> - <a href="../docs/usage.php">TERMS OF USE</a> - <a href="../docs/returns.php">RETURN POLICY</a></div>
</div>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($rsDrivers);
mysql_free_result($rsBoats);
mysql_free_result($rsNumbers);
 
mysql_free_result($rsPicTypes);
?>

Open in new window

0
 

Author Comment

by:dragboatrandy
ID: 24726160
The code that shows the div starts on line 229, but the script that finds the mouse postiion is right above that one.  I found the script that finds the mouse position somewhere online somewhere, but I can't remember
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 5

Expert Comment

by:ti84p
ID: 24726199
thanks

It looks to me like the script may be compensating for scrolling twice.  Try changing lines 165 and 166 to
        xMousePos = window.event.x; //+document.body.scrollLeft;
        yMousePos = window.event.y; //+document.body.scrollTop;
0
 

Author Comment

by:dragboatrandy
ID: 24726215
I changed line 165 and 166 as per your suggestion, and still the same affect.

Any other thoughts?
0
 
LVL 5

Assisted Solution

by:ti84p
ti84p earned 250 total points
ID: 24726225
if not, try something like:
    if (document.layers) {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos+offsetX;
      divY = yMousePos+offsetY;
    } else if (document.all) {
        xMousePos = window.event.x;
        yMousePos = window.event.y;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos;    //different here to compensate for handling
      divY = yMousePos;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard 
            xMousePos = e.clientX;
        yMousePos = e.clientY;
            
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos+offsetX;
      divY = yMousePos+offsetY;
    }
            

Open in new window

0
 

Author Comment

by:dragboatrandy
ID: 24726504
That one puts the div in the very same place no matter where the mouse is. Unless I put the code in the wrong place.
<?php require_once('../../Connections/connUser.php'); ?>
<?php
 if (!isset($_SESSION)) {
 session_start(); 
 } 
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
mysql_select_db($database_connUser, $connUser);
$query_rsDrivers = "SELECT UCASE(SUBSTRING((DriverInfo.DriverName),1,1)) AS name FROM DriverInfo Inner Join Gallery_PicInfo ON Gallery_PicInfo.DriverID = DriverInfo.DriverID GROUP BY name ORDER BY name ASC";
$rsDrivers = mysql_query($query_rsDrivers, $connUser) or die(mysql_error());
$row_rsDrivers = mysql_fetch_assoc($rsDrivers);
$totalRows_rsDrivers = mysql_num_rows($rsDrivers);
 
mysql_select_db($database_connUser, $connUser);
$query_rsBoats = "SELECT UCASE(SUBSTRING((BoatInfo.BoatName),1,1)) AS name FROM BoatInfo Inner Join Gallery_PicInfo ON Gallery_PicInfo.BoatID = BoatInfo.BoatID GROUP BY name ORDER BY name ASC";
$rsBoats = mysql_query($query_rsBoats, $connUser) or die(mysql_error());
$row_rsBoats = mysql_fetch_assoc($rsBoats);
$totalRows_rsBoats = mysql_num_rows($rsBoats);
 
mysql_select_db($database_connUser, $connUser);
$query_rsNumbers = "SELECT BoatInfo.BoatNumber FROM Gallery_PicInfo Inner Join BoatInfo ON Gallery_PicInfo.BoatID = BoatInfo.BoatID GROUP BY BoatInfo.BoatNumber ORDER BY BoatInfo.BoatNumber ASC";
$rsNumbers = mysql_query($query_rsNumbers, $connUser) or die(mysql_error());
$row_rsNumbers = mysql_fetch_assoc($rsNumbers);
$totalRows_rsNumbers = mysql_num_rows($rsNumbers);
 
mysql_select_db($database_connUser, $connUser);
$query_rsEvents = "SELECT EventDates.EventID,        EventDates.AssociationID,        EventDates.DateFrom,        EventDates.DateTo,        EventDates.EventName,        EventDates.VenueID,        EventDates.EventOverlay,        EventDates.HavePictures,        EventDates.IncludeInSchedule,        Venues.VenueID,        Venues.LocationName,        Venues.Location,  AssociationInfo.Acronym FROM EventDates		  INNER JOIN Venues ON (EventDates.VenueID = Venues.VenueID) INNER JOIN AssociationInfo ON (EventDates.AssociationID = AssociationInfo.AssociationID) WHERE     (       (EventDates.HavePictures = 'Y')    ) ORDER BY EventDates.DateTo DESC";
$rsEvents = mysql_query($query_rsEvents, $connUser) or die(mysql_error());
$row_rsEvents = mysql_fetch_assoc($rsEvents);
$totalRows_rsEvents = mysql_num_rows($rsEvents);
 
mysql_select_db($database_connUser, $connUser);
$query_rsPicTypes = "SELECT * FROM Gallery_PicType";
$rsPicTypes = mysql_query($query_rsPicTypes, $connUser) or die(mysql_error());
$row_rsPicTypes = mysql_fetch_assoc($rsPicTypes);
$totalRows_rsPicTypes = mysql_num_rows($rsPicTypes);
?> 
<!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"><!-- InstanceBegin template="/Templates/main_test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="DocTitle" -->
<title>Dragboats.com - Drag Boat Photo Gallery</title>
<script type="text/javascript" src="../CSSMenuWriter/cssmw/menu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu.css" />
<style type="text/css"> 
<!--
#AutoComplete {
	font-size: 11px;
	margin-top: 10px;
	padding-bottom: 8px;
	position: absolute;
	background-color: #FFF;
	border: medium solid #F60;
	overflow: hidden;
	cursor: default;
	width: 150px;
	min-height: 50px;
	max-height: 300px;
	z-index: 5;
}
.AutoCompleteHeader {
	margin-bottom: 3px;
	text-align: right;
	font-size: 10px;
	font-weight: bold;
	padding-right: 5px;
	background-color: #FF6600;
	color: #FEFD8F;
}
.AutoCompleteHeader span {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
	
.nameList {
	min-height: 45px;
	max-height: 290px;
	overflow: auto;
	margin-bottom: 5px;
}
#content span {
	font-weight: bold;
	cursor: pointer;
}
#content .out {
	color: #5E2F00;
}
#content .over {
	color: #FF6600;
}
-->
</style>
<script type="text/JavaScript">
<!--
function addHandler(objId)
{
      var thisObj = null;
	  thisObj = objId;
	  var obj = document.getElementById(thisObj);//alert('changePic(full' + objId + ',' + thisObj + ')');
	  obj.onclick = function() { hideit('AutoComplete') };
	  }
// Set Netscape up to run the "captureMousePosition" function whenever
// the mouse is moved. For Internet Explorer and Netscape 6, you can capture
// the movement a little easier.
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page
divX = 0;
divY = 0;
divXText="";
divYText="";
 
offsets = getScrollXY();
offsetX = offsets[0];
offsetY = offsets[1];
 
function captureMousePosition(e) {
    if (document.layers) {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos+offsetX;
      divY = yMousePos+offsetY;
    } else if (document.all) {
        xMousePos = window.event.x;
        yMousePos = window.event.y;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos;    //different here to compensate for handling
      divY = yMousePos;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard 
            xMousePos = e.clientX;
        yMousePos = e.clientY;
            
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
      offsets = getScrollXY();
      offsetX = offsets[0];
      offsetY = offsets[1];
      
      divX = xMousePos+offsetX;
      divY = yMousePos+offsetY;
    }
      
      //window.status = "xMousePos=" + xMousePos + ", yMousePos=" + yMousePos 
      //                        + ", divX=" + divX + ", divY=" + divY 
      //                        +", offsetX="+offsetX+", offsetY="+offsetY;
}
 
 
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) 
  {
     //Netscape compliant
     scrOfY = window.pageYOffset;
     scrOfX = window.pageXOffset;
  } 
  else
  {
     if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) 
       {
       //DOM compliant
       scrOfY = document.body.scrollTop;
       scrOfX = document.body.scrollLeft;
     } 
       else 
       {
       if( document.documentElement &&
            ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) 
            {
          //IE6 standards compliant mode
          scrOfY = document.documentElement.scrollTop;
          scrOfX = document.documentElement.scrollLeft;
       }
     }
  }
  return [ scrOfX, scrOfY ];
}
 
function showIt(type, values) 
{ 
     var infoHolder = document.getElementById('AutoComplete');
	removeChildren(infoHolder);
	//infoHolder.style.display = "";
	var valuePairs = values.split("~"); // Splits the Name/ID pairs
	//var valueNames = valuePairs[0].split("|||"); //Gives you the boat name or the driver name
	//alert(valueNames[1]);
	var header = document.createElement("div");
	var headerTextLink = document.createElement("span");
	headerTextLink.setAttribute('id', 'CloseAutoComplete');
	var headerText = document.createTextNode("CLOSE");
	headerTextLink.appendChild(headerText);
	header.appendChild(headerTextLink);
	header.className = "AutoCompleteHeader";
	infoHolder.appendChild(header);
	var nameHolder = document.createElement("div");
	nameHolder.className = "nameList";
	for(i = 0; i < (valuePairs.length - 1); i++){
		//alert(valuePairs[i]);
		var name = valuePairs[i].split("|||");
		//alert(name[1]);
		var number = name[1].split("^^");
		id = number[0];
		selectedNumber = number[1];
		var textContainer = document.createElement("p");
		var nameLink = document.createElement("a");
		nameLink.setAttribute('href', 'pictures.php?' + type + 'ID=' + id); 
		var nameText = document.createTextNode(name[0]);
		nameLink.appendChild(nameText);
			if(type != 'Driver'){
			var nameTextAddOn = document.createTextNode(' #' + selectedNumber);
			nameLink.appendChild(nameTextAddOn);
			infoHolder.style.width = "200px";
			} else {
				infoHolder.style.width = "150px";
			}
							
							
		
		textContainer.appendChild(nameLink);
		nameHolder.appendChild(textContainer);
		
	}
	infoHolder.appendChild(nameHolder);
	 var screenH = yMousePosMax;
     var screenW = xMousePosMax;
     
     infoHolder.style.position = "absolute";
     infoHolder.style.left = divXText;
     infoHolder.style.top = divYText;
     infoHolder.style.display="";
	 addHandler('CloseAutoComplete');
}
 
function hideit(whichdiv)
{ document.getElementById(whichdiv).style.display="none"; }
 
function removeChildren(s) {
//alert(s);
while (s.hasChildNodes())
s.removeChild(s.childNodes[0]);
}
 
function createRequestObject() {
    
        var req;
    
        if(window.XMLHttpRequest){
            // Firefox, Safari, Opera...
            req = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            // Internet Explorer 5+
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            // There is an error creating the object,
            // just as an old browser is being used.
            alert('There was a problem creating the XMLHttpRequest object');
        }
    
        return req;
    
    }
    
    // Make the XMLHttpRequest object
    var http = createRequestObject();
    
    function sendRequest(Type,ID) {
        
        // Open PHP script for requests
		//alert(act + type + uf);
        http.open('get', 'select.php?t=' + Type + '&v=' + ID);
        http.onreadystatechange = handleResponse;
        http.send(null);
    
    }
    
    function handleResponse() {
    
        if(http.readyState == 4 && http.status == 200){
            var response = http.responseText;
			var temp = new Array();
			//alert(response);
			temp = response.split("&&");
			//var splitResponse = split("||", response);
			//alert(response);
			if((temp) && (temp[0] != '')) {                	
					//alert('The Image File: ' + temp[0] + '/nThe Heading: ' + temp[1] + '/nThe Caption: ' + temp[2] + temp[3]);
					// UPDATE ajaxTest content
					showIt(temp[0], temp[1]);					
		}
			//if(temp[0] == 'County'){
				//	updateCountyList(temp[1]);
					//}
    } 
	//alert("shutting down quickAlert");
}
 
function getRemoteInfo(Type, ID) {
		//var searchVal = document.getElementById(type).value;
		//alert(searchVal + " " + type);
		//alert(ID);
		sendRequest(Type, ID);
    }
//-->
</script>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="../CSSMenuWriter/cssmw/menu_ie.css" />
<![endif]-->
<!-- InstanceEndEditable -->
<style type="text/css" media="all">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
 
body {
	background-color: #FEFD8F;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	text-align: center; 
	background-image: url(../images/main_back.png);
	background-repeat: repeat-x;
}
 
h1 {
  color: #FEFD8F;
  background-color:#FF6600;
  margin: 0px 0px 0px 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-transform:uppercase;
}
 
h2 {
	padding-top: 7px;
	margin: 0px 0px 0px 10px;
  	color: #FEFD8F;
  	font-size: 12px;
	font-weight: bold;
}
 
a,  a:link {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
 
a:visited {
  color:#5E2F00;
  font-weight: bold;
  text-decoration: none;
}
 
a:hover {
  color: #fe6d00;
  text-decoration: none;
}
 
a:focus {
  color: #fe6d00;
}
 
a:active {
  color: #fe6d00;
}
 
#outerWrapper {
  margin: 0 auto 0 auto; 
  max-width: 1024px;
  min-width: 1024px;
  text-align: left;
  width: 1024px;
}
#outerWrapper #header {
  font-size: 14px;
  font-weight: bold;
  padding: 0px 0px 0px 0px;
}
#outerWrapper #header img {
  float: left;
}
 
#outerWrapper #contentWrapper .clearFloat {
  clear: both;
  display: block;
}
#outerWrapper #footer {
  padding: 11px 0px 0px 0px;
  width: 1024px;
  height: 52px;
  background-image:url(../images/footer.png);
  background-repeat:no-repeat;
  text-align:center;
}
 
hr {
  width: 95%;
  height: 2px;
  padding-top: 2px;
  padding-left: 10px;
  padding-bottom: 2px;
}
#navbarWrapper {
	display: block;
	width: 1024px;
	height: 30px;
	clear: both;
	margin: 0px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	background-image: url(../CSSMenuWriter/cssmw_images/bg.png);
	background-repeat: repeat-x;
	background-position: left top;
	}
-->
</style>
<style type="text/css" media="print">
<!--
 
body {
  background-color: #fff;
  background-image: none;
  border-color: #000; 
  color: #000;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #leftColumn1 {
  width: 170px;
}
#outerWrapper #contentWrapper #rightColumn1 {
  width: 170px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
<!-- InstanceBeginEditable name="Heading" -->
<link href="../styles/2box.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Tooltip" --><!-- InstanceEndEditable -->
<div id="outerWrapper">
  <div id="header">
<img src="../images/r1c1.jpg" alt="" width="312" height="73" /><img src="../images/r1c2.jpg" alt="" width="397" height="73" /><img src="../images/r1c3.jpg" alt="" width="315" height="73" />
<img src="../images/r2c1.jpg" alt="" width="312" height="69" /><img src="../images/r2c2.jpg" alt="" width="397" height="69" /><img src="../images/r2c3.jpg" alt="" width="315" height="69" />
</div>
  <div id="navbarWrapper">
    <?php require_once( $_SERVER['DOCUMENT_ROOT'] . "/CSSMenuWriter/cssmw/menu.php"); ?>
</div>
<!-- InstanceBeginEditable name="Content" -->
<div id="ContentHeader"></div>
  <div id="contentWrapper">
    <div id="content">
      <div class="lgcolumnHeadings">
        <h2>welcome to the photo gallery</h2>
      </div>
      <p>Welcome to the World's Largest Drag Boat Photo Gallery at Dragboats.com.  Now finding pictures of your favorite boats and drivers is so much easier!  Simply click on the letter and a menu will appear with all of the information available for that category, run down the list, find your option and click it - it's that easy!</p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY DRIVER NAME</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Driver', '<?php echo $row_rsDrivers['name']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsDrivers['name']; ?></span>
		  <?php 
          if($i < $totalRows_rsDrivers) { echo " || "; } 
		  $i++;
		  } while ($row_rsDrivers = mysql_fetch_assoc($rsDrivers)); ?></p>
      <div id="AutoComplete" style="display: none"></div>
      <div class="lgcolumnFooters"></div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY BOAT NAME</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Boat', '<?php echo $row_rsBoats['name']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsBoats['name']; ?></span>
	  <?php 
          if($i < $totalRows_rsBoats) { echo " || "; } 
		  $i++;
		  } while ($row_rsBoats = mysql_fetch_assoc($rsBoats)); ?></p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY BOAT NUMBER</h2>
      </div>
      <p><?php 
	  $i = 1;
	  do { ?>
		  <span onclick="getRemoteInfo('Number', '<?php echo $row_rsNumbers['BoatNumber']; ?>')" onMouseOut="this.className='out';" onMouseOver="this.className='over';"><?php echo $row_rsNumbers['BoatNumber']; ?></span>
	  <?php 
          if($i < $totalRows_rsNumbers) { echo " || "; } 
		  $i++;
		  } while ($row_rsNumbers = mysql_fetch_assoc($rsNumbers)); ?></p>
      <div class="lgcolumnFooters">
      </div>
          <div class="lgcolumnHeadings">
        <h2>CHOOSE BY event</h2>
      </div>
      <p><select name="EventID" id="EventID" style="font-size: 12px">
                  <option value="">Choose An Event</option>
                  <?php
do {  
?>
                  <option value="<?php echo $row_rsEvents['EventID']?>">
                  <?php 
				  $AssocName_array = explode('_', $row_rsEvents['Acronym']);
				  $AssocName = $AssocName_array[0];
				  $EventYear = date("Y", strtotime($row_rsEvents['DateTo']));
				  echo $EventYear." ".$AssocName." ".$row_rsEvents['EventName'];?>
                  </option>
                  <?php
} while ($row_rsEvents = mysql_fetch_assoc($rsEvents));
  $rows = mysql_num_rows($rsEvents);
  if($rows > 0) {
      mysql_data_seek($rsEvents, 0);
	  $row_rsEvents = mysql_fetch_assoc($rsEvents);
  }
?>
                </select></p>
      <div class="lgcolumnFooters">
      </div>
      <div class="lgcolumnHeadings">
        <h2>CHOOSE BY PICTURE TYPE</h2>
      </div>
<p><select name="PicTypeID" id="PicTypeID" style="font-size: 12px">
<option value="">Choose An Type</option>
<?php
do {  
?>
<option value="<?php echo $row_rsPicTypes['picTypeID']?>"><?php echo $row_rsPicTypes['picType']?></option>
<?php
} while ($row_rsPicTypes = mysql_fetch_assoc($rsPicTypes));
  $rows = mysql_num_rows($rsPicTypes);
  if($rows > 0) {
      mysql_data_seek($rsPicTypes, 0);
	  $row_rsPicTypes = mysql_fetch_assoc($rsPicTypes);
  }
?>
</select></p>
      <div class="lgcolumnFooters">
      </div>
    </div>
    <div id="rightColumn1">
      <div class="columnHeadings">
        <h2>specials</h2></div>
<p>&nbsp;</p><div class="columnFooters">
    </div></div>
    
    <br class="clearFloat" />
  </div>
  <div id="ContentFooter"></div>
<!-- InstanceEndEditable -->
  <div id="footer"><a href="http://www.randykrohn.com/<?php if(isset($_SESSION['svUserID'])) { echo "logout"; } else { echo "login"; } ?>.php"><?php if(isset($_SESSION['svUserID'])) { echo "LOGOUT"; } else { echo "LOGIN"; } ?></a> || <a href="http://www.dragboats.com">HOME</a> || <a href="../classifieds/main.php">CLASSIFIEDS</a> || <a href="../cart/view_cart.php">CART</a> || <a href="main.php">PICTURES</a> || <a href="../merch/main.php">MERCHANDISE</a> || <a href="../video/main.php">VIDEOS</a> || <a href="../video">SCHEDULES</a> || <a href="../results.php">RESULTS</a> || <a href="../downloads.php">DOWNLOADS</a> || <a href="../rides/main.php">RIDES</a> || <a href="../rides">SERVICES</a> || <a href="contact.php">CONTACT US</a><br />
SITE CREATED AND MAINTAINED BY <a href="http://www.finishline-productions.com" target="_blank">FINISHLINE PRODUCTIONS</a> - COPYRIGHT 1997 - <?php echo date("Y"); ?> - <a href="../docs/privacy.php">PRIVACY POLICY</a> - <a href="../docs/usage.php">TERMS OF USE</a> - <a href="../docs/returns.php">RETURN POLICY</a></div>
</div>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($rsDrivers);
mysql_free_result($rsBoats);
mysql_free_result($rsNumbers);
 
mysql_free_result($rsPicTypes);
?>

Open in new window

0
 

Author Comment

by:dragboatrandy
ID: 24739243
Any other thoughts?
0
 
LVL 8

Expert Comment

by:rweil
ID: 25965471
0
 

Author Closing Comment

by:dragboatrandy
ID: 31597073
None of the solutions really worked.  I just did a workaround that works 95% of the time.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
QQ problem 22 43
html Uncheck Checkbox 2 25
Javascript Urgent help (Need help to disable event handler) 8 44
send email part1 9 28
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question