Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS how to open layer at anchor...

    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!

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Post a url to your page, we need to see the layout
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More than happy to

    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>

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yes!

    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!!!

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    Last edited by Mr J; 01-02-2007 at 08:14 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •