JS how to open layer at anchor...

Gretchen · 01-01-2007, 05:15 PM

I have been struggling with a form divided into virtual layers using JS showLayer and HTML <div> coding. I am wondering if there is a JS script that will cause a virtual layer to open at the point of an anchor? This would function just as HTML <a href="#name"> hyperlinks but would be activated as part of an onClick command.

My current showLayer script is:

Code:

var currentLayer = 'page1';
function showLayer(lyr) {
   hideLayer(currentLayer);
   document.getElementById(lyr)
      .style.visibility = 'visible';
   currentLayer = lyr;
}

function hideLayer(lyr) {
   document.getElementById(lyr).
      style.visibility = 'hidden';
}

CSS is:

Code:

.page{
        position: absolute;
        top: 10px;
        left: 100px;
        visibility: hidden;
}

And button commands are:

Code:

<input type="button" id="B1" value="Go Back" onClick="showLayer('page2')">
<input type="button" id="C2" value="Continue" onClick="showLayer('page3')">

As I wrote before, when I click either button, it moves me to the correct layer, but always to the same position on the page as the cursor was last. In other words, if I was 550px down the page when I clicked "Continue," the next layer opens at 550px down the screen. As the content of some layers is only a few px high, you have to scroll up to see the content. This is fine for me as I know there is something on the page, but for a visitor to the form, they will think they clicked through to a blank page and shut down. I am thinking a JS anchor script may solve this issue.

THANKS!

1212jtraceur · 01-01-2007, 06:12 PM

Will you post the rest of your code? I'm thinking that I may be able to help you with this, but not without complete code.

1212jtraceur

Mr J · 01-01-2007, 06:37 PM

Post a url to your page, we need to see the layout

Gretchen · 01-01-2007, 06:43 PM

ANY help would be GREATLY appreciated!

I have several scripts and a lengthy form. A simplified version looks like this:

Scripts:

Code:

<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<title>CARES Member Survey - 2006</title>
<link href="http://www.caresfoundation.org/cares_01.css" 
rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: 10px;
font-weight: Bold
}
.page{
        position: absolute;
        top: 10px;
        left: 100px;
        visibility: hidden;
}
-->
</style>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
 min=test.substring(8,p); max=test.substring(p+1);
 if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- Respondent '+nm+' is required.\n'; }
} if (errors) alert('Sorry! Please fill in required fields and click continue again:\n'+errors);
return document.MM_returnValue = (errors == '');
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
var currentLayer = 'page1';
function showLayer(lyr) {
   hideLayer(currentLayer);
   document.getElementById(lyr)
      .style.visibility = 'visible';
   currentLayer = lyr;
}

function hideLayer(lyr) {
   document.getElementById(lyr).
      style.visibility = 'hidden';
}
</script>
</head>

Form:

Code:

<BODY>


<form id="multiForm" METHOD="POST" action="submission_form.asp" name="Member Survey - 2006/2007">

<div id="page1" class="page" style="visibility:visible; position:absolute; left:100px; top:10px; width:750px">
<TABLE>
<TR>
<TD colSpan=5><FONT size=2>Dear Member,<BR><BR>Please find below a survey designed to help us get to know our members better. <p><STRONG>We anticipate that this survey will take no more than 10 minutes to complete.</STRONG> 
<P align=right>Thank you! Your input is greatly appreciated.</SPAN></FONT>
<P align=right><a href="#page2anchor"><input type="button" id="C1" value="Start" onClick="showLayer('page2')"></a></P>
</TD></TR>
</TABLE>
</div>

<div id="page2" class="page"> 
<TABLE>
<TR>
<TD colSpan=5 align=right><span class=subT><a name="page2anchor" id="page2anchor"> </a>Page 1 of 8</span><br>
<TR>
<TD width=5>&nbsp;</TD>
<TD vAlign=top align=left colSpan=6>* Denotes required fields</TD></TR></TBODY>
<TBODY bgColor=#f5f5f5>
<TR>
<TD width=5>&nbsp;</TD>
<TD vAlign=top align=left><FONT color=red>*</FONT>First Name:<BR><INPUT title="Respondent First Name" style="BACKGROUND-COLOR: #ffffa0" size=25 name=Firstname> </TD>
<tr>
<TD align=middle colSpan=7><a href="#page3"><INPUT type=button value="Continue" onclick="MM_validateForm('Firstname','','R','Lastname','','R','Address','','R','City','','R','State','','R','Zipcode','','RisNum','Country','','R')? showLayer('page3') :showLayer('page2');"></a></TD></TR></TBODY></TABLE>
</div>
</form>
</body>
</html>

Mr J · 01-01-2007, 09:01 PM

Here's something to try to start with .... (work on a copy of your page)

Remove all the anchor tags

Use the display property instead of the visible property ...

Change the page rule to

.page{
display:none;
}

Remove

visibility:visible;

from the page1 div

Change the show and hide layer functions for these

var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr).style.display="block"
currentLayer = lyr;
}

function hideLayer(lyr) {
document.getElementById(lyr).style.display="none"
}

See if you are happy with the way the page works using the above amendments

Gretchen · 01-02-2007, 04:07 AM

Sorry this message took so long; for some reason my earlier response did not post. At any rate...

I deleted all anchor tags, changed my css and script as you recommended and dropped the visibility style reference in my page 1 div tag. I got a blank page.

So, I tried adding a display style reference to the page 1 div tag as follows:

Code:

<div id="page1" class="page" style="display: block">

It works PERFECTLY for moving from pages of long content to short. For some reason the reverse is not true; i.e. when I start at 250px down the page and click through to a layer 300px in height, it opens at 250px down the page; BUT the big issue has been resolved.

THANK YOU!!!

Mr J · 01-02-2007, 07:12 PM

Ah, I forgot to tell you to also take out the class="page" from div page1

Sorry

In order to help you further I would need a url to the actual page so that I can see the layout and functionality of the page