PDA

View Full Version : regarding global layers - I am stuck

aferndale
10-19-2002, 09:24 PM
I am really pretty new to javascript and have a question about setting a global layer to be dynamic to the site

I want the site to sit in the center of the browser, but the one page that has the script on it has a static positioning for one section - it is a support page that has 2 drop down menues that are positioned perfecly for a site positioned to the left, but when set to center, obviously the menues will reposition as the browser is opened wider.

How do I position the menues to reposition as the browser is opened wider?

the code as it is now:

function setUpStuff() {
ns4 = (document.layers) ? 1:0;
ie4 = (document.all) ? 1:0;
repopulateOptions("one", "layer_one_select_one",
"inithome");
repopulateOptions("two", "layer_two_select_one",
"inithome");
globallayerx = 170;
globallayery = 500;
if (ie4) {
document.all['one'].style.left=globallayerx;
document.all['one'].style.top=globallayery;;
document.all['two'].style.left=globallayerx;
document.all['two'].style.top=globallayery;
}
if (ns4) {
document.layers['one'].left=globallayerx;
document.layers['one'].top=globallayery;
document.layers['two'].left=globallayerx;
document.layers['two'].top=globallayery;
}
showLayer("one");
hideLayer("two");

any help would be great
beetle
10-19-2002, 09:49 PM
Don't need javascript at all, this can be done with CSS

When using absolute positioning, the object uses the top and left properties to position itself. If the object's container is not positioned (relative or absolute) then the object positions itself against the BODY. if the object's containter IS positioned (relative or absolute) then the object will position itself against it's container.

Quickie example<html>
<head>
<title>layout</title>
<style>
div#content {
position: absolute;
width: 760px;
top: 10px;
left: 50%;
margin-left: -381px;
}
div#support {
position: absolute;
left: 170px;
top: 500px;
}
</style>
<body>
<div id="content">
<div id="support">
<!-- content here -->
</div>
</div>
</div>
</body>
</html>
aferndale
10-19-2002, 10:06 PM
these menus are embedded in the script. - When the page loads, you only see the first menu that contains a list of products that one would need support with. when a product is selected, it places another menu below it that contains a specific product that pertains to first menu.

the objects are not a part of the page, but rather the script - I think (really, I am new to js)

In any event, I added the DIV content to my style sheet, but am unsure of where I would put the style command in the html

is it up at the globallayerx="" area, or down in the code where the image related to the menue is. What shouldd I do with the globallayerx and y setting that is in the code I supplyed? delete it?

thanks for the help
beetle
10-19-2002, 10:14 PM
Show me all the source code. Either give me a link or paste it here. I'll get it fixed.
aferndale
10-19-2002, 10:26 PM
http://www.admitcomputer.com/support/support.shtml

this is how it is now

code:

<!--
<SCRIPT language=JavaScript>
<!--

function preloadImages() { //v1.2
if (document.images) {
var imgFiles = preloadImages.arguments;
var preloadArray = new Array();
for (var i=0; i<imgFiles.length; i++) {
preloadArray[i] = new Image;
preloadArray[i].src = imgFiles[i];
}
}
}
function swapImage() { //v1.2
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.swapImgData;
for (i=0; i < (swapImage.arguments.length-2); i+=3) {
objStr = swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = swapImage.arguments[i+2];
} }
document.swapImgData = swapArray; //used for restore
}
function swapImgRestore() { //v1.2
if (document.swapImgData != null)
for (var i=0; i<(document.swapImgData.length-1); i+=2)
document.swapImgData[i].src = document.swapImgData[i+1];
}

preloadImages('/stdnav/img/gennav/eng/buy-yel.gif' ,'/stdnav/img/gennav/eng/sup-yel.gif',
'/stdnav/img/gennav/eng/prod-yel.gif','/stdnav/img/gennav/eng/com-yel.gif');

</SCRIPT>
<!--
<TABLE bgColor=#3366cc border=0 cellPadding=0 cellSpacing=0 width=500>
<TBODY>
<TR>
<TD bgColor=#3366cc width=480>
&nbsp;</TD>
<TD colSpan=2>&nbsp;</TD></TR>
<TR>
<TD bgColor=#ffffff width=140>&nbsp;</TD>
</TR></TBODY></TABLE><!-- **END** head_end.inc -->
<!--<TABLE border=0 cellPadding=0 cellSpacing=0 width=500>
<TBODY>
<TR>
<TD vAlign=top width=140><BR><BR><BR><BR><BR></TD>
<TD vAlign=top width=480>
<TABLE border=0 cellPadding=10 cellSpacing=0 width=480>
<TBODY>
<TR>
<TD><BR><IMG height=1 src="Printers_files/white_dot.gif"
width=8> <FONT color=#000000 face="Arial, Helvetica, Geneva">Select
your product.
</FONT><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
<TABLE> -->


<table height="225">
<TBODY>
<TR>
<td height="1">
<DIV id=one style="center: 9; position: absolute; top: 500; visibility: hidden; width: 200; height: 132">
<FORM NAME="frmproductline">
<TABLE border=0 cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD width=55></TD>
<TD align=middle vAlign=center>
<TABLE border=0 cellPadding=0 cellSpacing=4 height="77">
<TBODY>
<TR>
<TD height=21><IMG height=4 src="servreq/white_dot.gif"
width=0></TD>
<TD height="21"></TD></TR>
<TR>
<TD height="23"><img border="0" src="/images/1.gif" width="27" height="27"> </TD>
<TD height="23"><NOBR><FONT color=#000000><SELECT name=layer_one_select_one
onchange=reactToFormChange(this.form.elements[0])> <OPTION
selected value=1>____________________________</OPTION> <OPTION
value=2></OPTION> <OPTION value=3></OPTION> <OPTION
value=4></OPTION> <OPTION value=5></OPTION> <OPTION
value=6></OPTION> <OPTION value=7></OPTION> <OPTION
value=8></OPTION> <OPTION value=9></OPTION> <OPTION
value=10></OPTION> <OPTION value=11></OPTION> <OPTION
value=12></OPTION> <OPTION value=13></OPTION> <OPTION
value=14></OPTION> <OPTION value=15></OPTION> <OPTION
value=16></OPTION> <OPTION value=17></OPTION> <OPTION
value=18></OPTION> <OPTION value=19></OPTION> <OPTION
value=20></OPTION></SELECT> &nbsp;</FONT></NOBR>
</TD></TR>
<TR>
<TD height=21><IMG height=4 src="servreq/white_dot.gif"
width=0></TD>
<TD height="21"></TD></TR></TBODY></TABLE></TD>
<TD align=middle vAlign=center width=33></TD></TR></TBODY></TABLE></FORM></DIV>
<!-- THIS IS LAYER TWO -->
<DIV id=two style="position: absolute; visibility: hidden; width: 480; height: 142">
<FORM NAME="frmproduct">
<TABLE border=0 cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD align=middle vAlign=center>
<TABLE border=0 cellPadding=4 cellSpacing=0 height="128">
<TBODY>
<TR>
<TD height=21><IMG height=4 src="servreq/white_dot.gif"
width=0></TD>
<TD height="21"></TD></TR>
<TR>
<TD height="25"> <img border="0" src="/images/1.gif" width="27" height="27"> </TD>
<TD height="25"><NOBR><FONT color=#000000><SELECT name=layer_two_select_one
onchange=reactToFormChange(this)> <OPTION selected
value=1>____________________________</OPTION> <OPTION
value=2></OPTION> <OPTION value=3></OPTION> <OPTION
value=4></OPTION> <OPTION value=5></OPTION> <OPTION
value=6></OPTION> <OPTION value=7></OPTION> <OPTION
value=8></OPTION> <OPTION value=9></OPTION> <OPTION
value=10></OPTION> <OPTION value=11></OPTION> <OPTION
value=12></OPTION> <OPTION value=13></OPTION> <OPTION
value=14></OPTION> <OPTION value=15></OPTION> <OPTION
value=16></OPTION> <OPTION value=17></OPTION> <OPTION
value=18></OPTION> <OPTION value=19></OPTION> <OPTION
value=20></OPTION></SELECT></FONT></NOBR> </TD></TR>
<TR>
<TD height=21><IMG height=4 src="servreq/white_dot.gif"
width=0></TD>
<TD height="21"></TD></TR>
<TR>
<TD height="29"><img border="0" src="/images/2.gif" width="27" height="28"> </TD>
<TD height="29"><FONT face=arial size=-1><NOBR><SELECT name=layer_two_select_two
onchange=reactToFormChange(this.form.elements[1])> <OPTION
selected value=1>________________________________________</OPTION>
<OPTION value=2></OPTION> <OPTION value=3></OPTION> <OPTION
value=4></OPTION> <OPTION value=5></OPTION> <OPTION
value=6></OPTION> <OPTION value=7></OPTION> <OPTION
value=8></OPTION> <OPTION value=9></OPTION> <OPTION
value=10></OPTION> <OPTION value=11></OPTION> <OPTION
value=12></OPTION> <OPTION value=13></OPTION> <OPTION
value=14></OPTION> <OPTION value=15></OPTION> <OPTION
value=16></OPTION> <OPTION value=17></OPTION> <OPTION
value=18></OPTION> <OPTION value=19></OPTION> <OPTION
value=20></OPTION></SELECT> </NOBR>
</FONT></TD></TR>
</TBODY></TABLE></TD>
<TD align=middle vAlign=center width=29></TD></TR></TBODY></TABLE></FORM></DIV>
</TR></TBODY>
</table>
&nbsp;
</FORM>

this is old code that I am reusing. I would have no idea how to build it myself
beetle
10-20-2002, 12:05 AM
Ok...before i get too far....after looking at your page I have 1 question, why are you trying to absolutley position these? Why not just put them inline with the HTML?
aferndale
10-20-2002, 02:38 AM
well, I guess I do, and that would be the simplest solution. I guess I just move the script down into that section? I wasn't sure what to break apart and if it would have an effect.
beetle
10-20-2002, 03:00 AM
Oh, so you are concerned about the placement of the script block? Don't be. All your javascript there is functions...just stick them in the HEAD
aferndale
10-20-2002, 03:07 AM
seeing as I did not write this script, I noticed that there is a lot of crap in it - stuff that I just don't know where it is coming from.

<td width="500" align="left" valign="top" bgcolor="white">
<table border="1" width="100%" cellpadding="10" width="500">
<tr>
<td>
<P class="bodyHead" align="center">Service Request Form</P>
<p align="center" class="bodyText2">Please fill in all of the information below then hit<br>
<b>SUBMIT FORM</b> at the bottom of
this page.</font></p>
<hr width="400" align="center">
<p class="bodyText2" align="left"><b>Contact Information:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <FONT CLASS="bodyText3">* - Required Fields</FONT></p>
<blockquote>
<FORM NAME=userdata ACTION="" METHOD="post" ENCTYPE="text/plain" onSubmit="return sendmail();" onReset="return resetfrm();">
<table>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>Municipality:</b></font></td>
<td><!--webbot bot="Validation" B-Value-Required="TRUE" --><input NAME="Contact_Organization" SIZE="35"> <font color="red">*</font></td>
</tr>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>Customer Contact:</b></font></td>
<td><!--webbot bot="Validation" B-Value-Required="TRUE" --><input NAME="Contact_FirstName" SIZE="35"> <font color="red">*</font></td>
</tr>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>Title:</b></font></td>
<td><!--webbot bot="Validation" B-Value-Required="TRUE" --><input NAME="Contact_Title" SIZE="35"></td>
</tr>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>Telephone #:</b></font></td>
<td><input NAME="Contact_WorkPhone" SIZE="25" MAXLENGTH="25"> <font color="red">*</font></td>
</tr>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>FAX #:</b></font></td>
<td><input TYPE="TEXT" NAME="Contact_FAX" SIZE="25" MAXLENGTH="25"></td>
</tr>
<tr>
<td ALIGN="right"><font class="bodyText2"><b>E-mail address:</b></font></td>
<td><input TYPE="TEXT" NAME="Contact_Email" SIZE="25"></td>
</tr>
</table>
</form>
</blockquote>
</FORM>
<p><b><font class="bodyText2">Please provide the following product information:</font></b></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><b><font class="bodyText2">Please describe the problem/question/request as <br>
thoroughly as possible:</font></b></p>
<blockquote>
<p>&nbsp;<!--webbot bot="Validation" B-Value-Required="TRUE" --><textarea NAME="Problem" ROWS="15" COLS="45"></textarea>
</p>
</blockquote>
<p align="left">&nbsp;</p>
<FORM NAME=mailMessage ACTION="" METHOD="post" ENCTYPE="text/plain" onSubmit="return sendmail();" onReset="return resetfrm();">
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; <input TYPE="SUBMIT" VALUE="Submit Form" >
<input TYPE="RESET" VALUE="Reset Form">
</p>
<INPUT TYPE=HIDDEN VALUE="" NAME=message>
</FORM>
<hr>
<font class="bodyText2">
Revised: <!--webbot bot="TimeStamp" S-Type="EDITED" S-Format="%B %d, %Y" startspan -->September 29, 2002<!--webbot bot="TimeStamp" i-CheckSum="11053" endspan -->
</font>
<!--
<SCRIPT language=JavaScript>

this is the page itself, and I want to get the menu into this area:

class="bodyText2">Please provide the following product information:</font></b></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

I should place the script in the head, or should I place this part of it into the code?

sorry to be so annoying about this - thanks for all your help
beetle
10-20-2002, 03:59 AM
Originally posted by beetle
Oh, so you are concerned about the placement of the script block? Don't be. All your javascript there is functions...just stick them in the HEAD