Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2009-06-26
10
Medium Priority
?
602 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
10 Comments
 
LVL 5

Accepted Solution

by:
ti84p earned 500 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
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 
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 500 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 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