Solved

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

Posted on 2009-06-26
10
584 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 5

Expert Comment

by:ti84p
Comment Utility
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
Comment Utility
I changed line 165 and 166 as per your suggestion, and still the same affect.

Any other thoughts?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 5

Assisted Solution

by:ti84p
ti84p earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Any other thoughts?
0
 
LVL 8

Expert Comment

by:rweil
Comment Utility
0
 

Author Closing Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now