dragboatrandy
asked on
Javascript - Finding mouse postion - FF ok, IE no go
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
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);
?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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.scrollLef
yMousePos = window.event.y; //+document.body.scrollTop
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.scrollLef
yMousePos = window.event.y; //+document.body.scrollTop
ASKER
I changed line 165 and 166 as per your suggestion, and still the same affect.
Any other thoughts?
Any other thoughts?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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> </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);
?>ASKER
Any other thoughts?
ASKER
None of the solutions really worked. I just did a workaround that works 95% of the time.
ASKER
Open in new window