#1
  1. No Profile Picture
    I know he can get the job, but can he do the job?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    TEXAS
    Posts
    27
    Rep Power
    0

    Wink


    http://www.firstprotestant.com/Staff...p?about=active

    On the above page I am hiding information about both people shown. I would like to make the script such that one person's biography text would disappear when the other's biography text is chosen. I don't know how to do that. Can someone help me? Your assistance is appreciated. If you could point me toward a tutorial or something, that would be great too.

    Thanks

    Joe Banks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    527
    Rep Power
    14
    I assume both biogs are in div layers.


    <script>
    function showorhide1(f){
    if(f){
    visi1="visible";
    visi2="hidden";
    }
    else{
    visi1="hidden";
    visi2="visible";
    }
    if(document.layers){

    document.layer1.visibility=visi1;
    document.layer2.visibility=visi2;
    }
    if(document.all){
    document.all.layer1.style.visibility=visi1;
    document.all.layer2.style.visibility=visi2;
    }
    if(!document.all && document.getElementById){

    document.getElementById("layer1").style.visibility=visi1;
    document.getElementById("layer2").style.visibility=visi2;
    }
    }

    </script>

    <href="javascript:showorhide1(1);">first Biog</a>
    <href="javascript:showorhide1(0);">second Biog</a>


    John
  4. #3
  5. No Profile Picture
    I know he can get the job, but can he do the job?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    TEXAS
    Posts
    27
    Rep Power
    0

    Wink this will work more than two?


    I just want to be sure that I could use this if I need to expand, because I'm such a newbie that I don't understand your code completely. In other words, it will expand for more than two bios?
    Last edited by joebankz; April 2nd, 2001 at 05:19 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    527
    Rep Power
    14
    I didn't realise you wanted more than two. This will work:

    <HTML>
    <BODY>

    <script>
    var numberoflayers=3;//the number of biogs in divs
    function showorhide1(passedlayer){
    //hides all biogs
    for (n=0;n<numberoflayers;n++){
    layername="div"+n;
    if(document.layers){
    //NN4
    document.layers[layername].visibility='hidden';
    }
    if(document.all){
    //iE
    document.all[layername].style.visibility='hidden';
    }
    if(!document.all && document.getElementById){
    //Netscape 6
    document.getElementById(layername).style.visibility='hidden';
    }
    }

    //displays required biog
    layername=passedlayer;
    if(document.layers){
    document.layers[layername].visibility='show';
    }
    if(document.all){
    document.all[layername].style.visibility='visible';
    }
    if(!document.all && document.getElementById){
    document.getElementById(layername).style.visibility='visible';
    }


    }

    </script>
    <DIV id="div0" style="position:relative;visibility:hidden">
    first layer
    </div>
    <DIV id="div1" style="position:relative;visibility:hidden">
    second layer
    </div>
    <DIV id="div2" style="position:relative;visibility:hidden">
    third layer
    </div>

    <a href="javascript:showorhide1('div0');">first Biog</a>
    <a href="javascript:showorhide1('div1');">second Biog</a>
    <a href="javascript:showorhide1('div2');">third Biog</a>

    </BODY></HTML>


    try it out I think it's self explanatory. I have added some REM statements

    label your divs div0, div1 etc and place the name of the div in the <a> that calls it. If you do this you only need change the numberoflayers to equal the number of biogs.

    John
    Last edited by JohnB; April 2nd, 2001 at 06:19 PM.
  8. #5
  9. No Profile Picture
    I know he can get the job, but can he do the job?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    TEXAS
    Posts
    27
    Rep Power
    0

    Angry I can't get that one to work.


    John,

    I can't get that script to work in IE at least. My netscape browser doesn't work for some reason unbeknownst to me.

    thank you

    Joe banks
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    527
    Rep Power
    14
    I had a quick look. You have written these two lines as one. They must be on two separate lines otherwise it reads it all as a comment.

    //displays required biog
    layername=passedlayer;

    I tested my script in all three main browsers and it works OK.

    I had a better look and I am slightly confused about what you are doing. It's probably my problem. You seem to be using <span> instead of <div> which is OK but I can only find the closing </span> tags. You need to put the id="div1" etc inside the opening <span> so the routine can identify the <span> to make visible.

    John
    Last edited by JohnB; April 3rd, 2001 at 04:05 PM.
  12. #7
  13. No Profile Picture
    I know he can get the job, but can he do the job?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    TEXAS
    Posts
    27
    Rep Power
    0

    Thumbs up You are too cool!


    I worked out what was going wrong with those two lines -- Thank you.

    Actually, I did have the script working the way you had it written. However, it toggled off the the visibility, but left a large blank space where the biog was to go. The first thing I tried, in order to correct the problem, was to change to a <span> tag. That didn't work so then instead of using 'visibility' I changed it to 'display'. This solved the puzzle for me. You can see the results at http://www.firstprotestant.com/Staff...p?about=active


    Thanks again

    Joseph Banks
    Last edited by joebankz; April 4th, 2001 at 09:54 AM.

IMN logo majestic logo threadwatch logo seochat tools logo