PDA

View Full Version : Loading of options affecting menu display?

3D_Dog_Man
06-21-2005, 07:02 AM
Hey Everyone,

I am attempting to combine some javascripts in one file. Although I am not getting any errors as such, I am not getting the page behaviour that I expect either. Usually the menu used in this page works fine, however it will not display at all whilst 'dynamic' options are being used. It is not so much the javascript which is responsible for the 'dynamic' options, but is instead the onload method calls within the body of the document. If I exclude the onload calls the menu displays however the options are not right, and if I include the onload calls the opposite is true. Any suggestions regarding how I can get these two features to work together will be greatly appreciated.

Thanks

Regards

Davo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Search by Catalogue Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#floater_1
{
cursor: pointer;
position: absolute;
height: 50px;
width: 50px;
z-index: 5;
}
#floater_2
{
cursor: pointer;
position: absolute;
height: 50px;
width: 50px;
z-index: 5;
}
#floater_3
{
cursor: pointer;
position: absolute;
height: 52px;
width: 111px;
z-index: 5;
}
#searchByPage
{
position: absolute;
}
</style>
<link href="writingstyles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="positionernocolor.js"></script>
<script type="text/javascript" src="doiMenuDOM.js"></script>
<script type="text/javascript" src="menuconfig.js"></script>
<script type="text/javascript" src="dynamicOptions.js"></script>
<script type="text/javascript">
//<!--

upscroller1a = new Image();
upscroller1a.src = "../pictures/green_up_square.gif";
upscroller1b = new Image();
upscroller1b.src = "../pictures/yellow_up_square.gif";
downscroller1a = new Image();
downscroller1a.src = "../pictures/green_down_square.gif";
downscroller1b = new Image();
downscroller1b.src = "../pictures/yellow_down_square.gif";
helpbutton1a = new Image();
helpbutton1a.src = "../pictures/help1a.gif";
helpbutton1b = new Image();
helpbutton1b.src = "../pictures/help1b.gif";

function filter(imagename,objectsrc)
{
if (document.images)
document.images[imagename].src=eval(objectsrc+".src");
}

function scrollPageDown()
{
TimeID=setInterval("window.scrollBy(0, 50)",10);
setTimeout("clearInterval("+TimeID+")", 100);
}

function scrollPageUp()
{
TimeID=setInterval("window.scrollBy(0, -50)",10);
setTimeout("clearInterval("+TimeID+")", 100);
}
//-->
</script>
<script type="text/javascript">
//<!--
var catalogue = new Array();

catalogue[0] = new Array(
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31',
'32',
'33',
'34',
'35',
'36',
'37',
'38');

catalogue[1] = new Array(
'39',
'40',
'41',
'42',
'43',
'44',
'45',
'46',
'47',
'48',
'49',
'50',
'51',
'52',
'53',
'54',
'55',
'56',
'57',
'58',
'60',
'61',
'62',
'63',
'64',
'65',
'66',
'67',
'68',
'69',
'70',
'71',
'72',
'73',
'74',
'75',
'76',
'77',
'78');

catalogue[2] = new Array(
'79',
'80',
'81',
'82',
'83',
'84',
'85',
'86',
'87',
'88',
'89',
'90',
'91',
'92',
'93',
'94',
'95',
'96',
'97',
'98');

catalogue[3] = new Array(
'100',
'101',
'102',
'103',
'104',
'105',
'106',
'107',
'108',
'109',
'110',
'111',
'112',
'113',
'114',
'115',
'116',
'117',
'118',
'119',
'120',
'121',
'122',
'123',
'124',
'125',
'126',
'127',
'128');

function checkOptions()
{
dynamicOptions = true;
optionsLength = document.forms['showCataloguePage'].pageNumber.options.length - 1;
document.forms['showCataloguePage'].pageNumber.options[optionsLength] = null;
if(document.forms['showCataloguePage'].pageNumber.options[optionsLength])
{
dynamicOptions = false;
}
}

function generateOptions()
{
if(!dynamicOptions)
{
//alert("Your browser does not support?");
return;
}

var select1 = document.forms['showCataloguePage'].catalogueNoSelector;
var selectedItem = select1.options[select1.selectedIndex].value;

if(!selectedItem)
{
return;
}

var list = catalogue[selectedItem];
var select2 = document.forms['showCataloguePage'].pageNumber;
select2.options.length = 0;

for(i=0; i<list.length; i++)
{
select2.options[i] = new Option(list[i], list[i+1]);
}
}
//-->
</script>

</head>

<body onload="checkOptions(), generateOptions();" onresize="window.location.href = window.location.href;">

<script type="text/javascript">
//<!--
fgsMenu.SetPosition('absolute',0,0);
fgsMenu.SetType('float');
fgsMenu.SetCorrection(0,0);
fgsMenu.SetCellSpacing(10);
fgsMenu.SetItemDimension(110,40);
fgsMenu.SetBackground('','../pictures/greenmarble.gif','repeat','');
fgsMenu.SetShadow(false);
fgsMenu.SetFont('verdana,arial,tahoma, serif','10pt');
fgsMenu.SetItemBorder(2,'#85B211','solid');
fgsMenu.SetItemText('#D5D500','center','bold','','');
fgsMenu.SetItemTextHL('#773C00','center','bold','','');
fgsMenu.SetItemBackground('#773C00','','','');
fgsMenu.SetItemBackgroundHL('#D5D500','','','');
fgsMenu.SetItemBorderTopHL(2,'#773C00','solid');
fgsMenu.SetItemBorderRightHL(2,'#773C00','solid');
fgsMenu.SetItemBorderBottomHL(2,'#773C00','solid');
fgsMenu.SetItemBorderLeftHL(2,'#773C00','solid');
fgsMenu.SetItemTextClick('#004000','center','','','');
fgsMenu.SetItemBackgroundClick('','','','');
fgsMenu.SetItemBorderTopClick(2,'#773c00','solid');
fgsMenu.SetItemBorderRightClick(2,'#773c00','solid');
fgsMenu.SetItemBorderBottomClick(2,'#773c00','solid');
fgsMenu.SetItemBorderLeftClick(2,'#773c00','solid');
fgsMenu.SetBorderTop(2,'#592D00','outset');
fgsMenu.SetBorderRight(2,'#592D00','outset');
fgsMenu.SetBorderBottom(2,'#592D00','outset');
fgsMenu.SetBorderLeft(2,'#592D00','outset');
fgsMenu.SetPopOnClick(false);

fgsMenu._pop.SetCorrection(0,0);
fgsMenu._pop.SetItemDimension(150,20);
fgsMenu._pop.SetPaddings(1);
fgsMenu._pop.SetBackground('#773C00','','','');
fgsMenu._pop.SetFont('verdana,arial,tahoma, serif','10pt');
fgsMenu._pop.SetBorderTop(2,'#773c00','outset');
fgsMenu._pop.SetBorderRight(2,'#773c00','outset');
fgsMenu._pop.SetBorderBottom(2,'#773c00','outset');
fgsMenu._pop.SetBorderLeft(2,'#773c00','outset');
fgsMenu._pop.SetDelay(500);
fgsMenu._pop.SetItemBorder(2,'#006400','solid');
fgsMenu._pop.SetItemText('#d5d500','left','','','');
fgsMenu._pop.SetItemTextHL('#773C00','left','','','');
fgsMenu._pop.SetItemBorderHL(2,'#006400','solid');
fgsMenu._pop.SetItemPaddings(0);
fgsMenu._pop.SetItemPaddingsHL(0);
fgsMenu._pop.SetItemBackgroundHL('#D5D500','','','');
fgsMenu._pop.SetPadding(1,1,1,1);
fgsMenu.Build();

//-->
</script>

<div id="floater_2">
<span onmouseover="filter('scrollaid1','upscroller1b'); window.status='Left Click your mouse to Scroll Up.';"
onmouseout="filter('scrollaid1','upscroller1a'); window.status=''">
<img id="scrollaid1" onclick="scrollPageUp()" src="../pictures/green_up_square.gif">
</span>
</div>

<div id="floater_1">
<span onmouseover="filter('scrollaid2','downscroller1b'); window.status='Left Click your mouse to Scroll Down.';"
onmouseout="filter('scrollaid2','downscroller1a'); window.status=''">
<img id="scrollaid2" onclick="scrollPageDown()" src="../pictures/green_down_square.gif">
</span>
</div>

<div id="floater_3">
<a href="#" onmouseover="filter('help1','helpbutton1b'); window.status='Left Click your mouse for Help.';"
onmouseout="filter('help1','helpbutton1a'); window.status=''">
<img id="help1" src="../pictures/help1a.gif" border="0">
</a>
</div>

<script type="text/javascript">
//<!--
var isDOM, floater_1Obj, floater_2Obj, floater_3Obj
var isNS, pageHeight, pageWidth
var floater_1Width, floater_1Height, floater_2Width, floater_2Height, floater_3Width, floater_3Height
var paddingX, paddingY, floater_1X, floater_1Y, floater_2X, floater_2Y, floater_3X, floater_3Y
var xOffset, yOffset
var isMoving
var newXOffset, newYOffset
var justClicked

if (document.getElementById) {
isDOM = true;
floater_1Obj = document.getElementById("floater_1").style;
floater_2Obj = document.getElementById("floater_2").style;
floater_3Obj = document.getElementById("floater_3").style;
} else {
isDOM = false;
floater_1Obj = document.floater_1;
floater_2Obj = document.floater_2;
floater_3Obj = document.floater_3;
}

if (navigator.appName == 'Netscape') {
isNS = true;
} else {
isNS = false;
}

floater_1Width = 50;
floater_1Height = 50;
floater_2Width = 50;
floater_2Height = 50;
floater_3Width = 111;
floater_3Height = 52;

paddingX = 0;
paddingY = 0;

newXOffset = 0;
newYOffset = 0;

window.onresize = refreshValues
window.setInterval("placeFloater()", 100)

refreshValues();

isMoving = false;
justClicked = false;
//}

function refreshValues() {

if (isNS) {
pageHeight = window.innerHeight - 20;
pageWidth = window.innerWidth - 20;
} else {
pageHeight = document.body.clientHeight;
pageWidth = document.body.clientWidth;
}

floater_1X = pageWidth - floater_1Width - paddingX;
floater_1Y = pageHeight - floater_1Height - paddingY;
floater_2X = pageWidth - floater_2Width - paddingX;
floater_2Y = floater_2Height - paddingY - 50;
floater_3X = pageWidth - floater_3Width - 52;
floater_3Y = floater_3Height - paddingY - 52;

placeFloater();

}

function placeFloater() {
if (isNS) {
xOffset = window.pageXOffset;
yOffset = window.pageYOffset;
} else {
xOffset = document.body.scrollLeft;
yOffset = document.body.scrollTop;
}

floater_1Obj.top = floater_1Y + yOffset - newYOffset;
floater_1Obj.left = floater_1X + xOffset - newXOffset;
floater_2Obj.top = floater_2Y + yOffset - newYOffset;
floater_2Obj.left = floater_2X + xOffset - newXOffset;
floater_3Obj.top = floater_3Y + yOffset - newYOffset;
floater_3Obj.left = floater_3X + xOffset - newXOffset;

}

function setNewPos() {

if (isMoving) {
if (justClicked) {
justClicked = false;
} else {
clickedX = window.event.clientX;
clickedY = window.event.clientY;

newXOffset = pageWidth - clickedX - floater_1Width;
newYOffset = pageHeight - clickedY - floater_1Height;
newXOffset = pageWidth - clickedX - floater_2Width;
newYOffset = pageHeight - clickedY - floater_2Height;
newXOffset = pageWidth - clickedX - floater_3Width;
newYOffset = pageHeight - clickedY - floater_3Height;

placeFloater();

isMoving = false;
}

}

}
//-->
</script>

<div align="center" id="searchByPage">
<table>
<form action="" id="showCataloguePage" method="" name="showCataloguePage">
<tr align="left">
<td class="green_georgia_subheading"><em>Show Page</em> quickly jumps to your catalogue page of interest</td>
</tr>
<tr align="center">
<td>
<table>
<tr align="left">
<td>
<table>
<tr align="left">
<td><img src="../pictures/light2.gif" width="51" height="51"></td>
<td>
<ul>
<li class="brown_verdana_text">Select a catalogue of interest by clicking on the box below</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>
<span class="black_verdana_text">Catalogue
<select class="black_verdana_text" id="catalogueNoSelector" name="catalogueNoSelector" onchange="generateOptions()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
selected</span>
</td>
</tr>
<tr align="center">
<td>&nbsp;</td>
</tr>
<tr align="left">
<td>
<table>
<tr align="left">
<td><img src="../pictures/light2.gif" width="51" height="51"></td>
<td>
<ul>
<li class="brown_verdana_text">Select a catalogue page of interest by clicking on the box below</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>
<span class="black_verdana_text">Page
</span>
<select class="black_verdana_text" id="pageNumber" name="pageNumber">
<option>&nbsp;</option>
</select>
<span class="black_verdana_text">
selected
</span>
</td>
</tr>
<tr align="center">
<td>&nbsp;</td>
</tr>
<tr align="left">
<td>
<table>
<tr align="left">
<td><img src="../pictures/light2.gif" width="51" height="51"></td>
<td>
<ul>
<li class="brown_verdana_text">Click Show Page to show all craft stamps on your catalogue page of interest</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>
<input name="showPage" type="submit" class="black_verdana_text" id="showPage" value="Show Page">
</td>
</tr>
</table>
</td>
</tr>
<form>
</table>
</div>
<script type="text/javascript">
setElement('searchByPage', 20, 1, 101, 57, 1);
</script>
</body>
</html>
Kor
06-21-2005, 11:10 AM
remove
<script type="text/javascript">
setElement('searchByPage', 20, 1, 101, 57, 1);
</script>

from the bottom of the page and call the function also onload. See also that you have separated the functions called onload by a comma!


<body onload="checkOptions();generateOptions();setElement('searchByPage', 20, 1, 101, 57, 1)" onresize="window.location.href = window.location.href;">
Kor
06-21-2005, 11:48 AM
and you may replace the huge hotdogs of arrays calalogue[index] values with a short incremental loop like this:

var q = new Array()//the limits' array
q[0] =[1,38];
q[1] =[39,78];
q[2] =[79,98];
q[3] =[99,128];
var catalogue= new Array()
for (var i=0;i<q.length;i++){
catalogue[i]=new Array();
var k=0;
for(var j=q[i][0];j<=q[i][1];j++){
catalogue[i][k]=String(j);k++;
}
}
3D_Dog_Man
06-22-2005, 12:50 AM
KOR,

Thanks for writing back with your suggestions. I have modified the onload event handler within the body of the document as you suggested, however the menu still does not respond. The script at the bottom of the code snippet, shown as..

<script type="text/javascript">
setElement('searchByPage', 20, 1, 101, 57, 1);
</script>

.... is not related to the menu at all. Moving the 'setElement' call into the onload event handler unfortunately did not improve the behaviour of the page.

My dilemma is still based on the menu code which is listed just after the body of the document, and is the lines of code with fgsMenu before each method call. There are also two external javascript files related to this menu.

If you have any further suggestions they will be greatly appreciated. Thanks for your help so far.

Regards

Davo