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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts

    style.visibility onClick not working properly

    Hey everyone,

    It has been a while since I have visited the forum, but some of you have been a great help in the past and I am hoping to call on your expertise once more with a problem I have been having with what I thought would be a rather simple script.

    In a nutshell, what I am trying to do is dynamically change the page appearance by making DIVs visible or hidden based upon where the visitor clicks. I was able to do this manually when I was working with only a few elements, but now that I am trying to expand the page to include multiple views, I am running into some difficulties that I can't figure out.

    The first of these problems centers around a a function that should change one DIV for another, the function and onClick call are as follows. . .

    function changepn(movepm)
    {
    currentpm = currentpm+movepm
    if (currentpm>>maxpm) {currentpm = minpm}
    if (currentpm<<minpm) {currentpm = maxpm}
    document.getElementById(currentpn).style.visibility = "hidden"
    currentpn = pnlist[currentpm]
    document.getElementById(currentpn).style.visibility = "visible"
    }

    <div id="leftdiv" style="position:absolute;width:50;height:50;left:5;top:5;visibility:visible;">
    <table width="50" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="50" height="50"
    <center>
    <a href="#serf.html" onClick="movepm(-1)">
    <img src="leftarrow.gif" width="50" height="50" border="0">
    </a>
    </center>
    </td>
    </tr>
    </table>
    </div>

    This portion of the script does absolutely nothing at all when the arrow is clicked on, but should be exchanging the visibility of one div for another.


    The second problem occurs in the following script. On a side note, it does work in part in that when the visitor clicks on one of the links, things start disappearing like they should, but nothing comes up in its place. The function and onClick are as follows . . .

    function changeall(newpn,newsn,newtn,newpd,newsd,newbg)
    {
    document.getElementById(currentpn).style.visibility = "hidden"
    document.getElementById(currentsn).style.visibility = "hidden"
    document.getElementById(currenttn).style.visibility = "hidden"
    document.getElementById(currentpd).style.visibility = "hidden"
    document.getElementById(currentsd).style.visibility = "hidden"
    NOTE - the five lines of code above appear to work just fine, but everything below this point doesnt work in the least bit -
    currentpn = pncellid[newpn]
    currentsn = sncellid[newsn]
    currenttn = tncellid[newsn][newtn]
    currentpd = pdcellid[newpd]
    currentsd = sdcellid[newpn][newsd]
    currentbg = bgimg[newbg]
    document.getElementById("mainbody").background = currentbg
    document.getElementById(currentpn).style.visibility = "visible"
    document.getElementById(currentsn).style.visibility = "visible"
    document.getElementById(currenttn).style.visibility = "visible"
    document.getElementById(currentpd).style.visibility = "visible"
    document.getElementById(currentsd).style.visibility = "visible"
    }

    <div id="pncell01" style="position:absolute;width:900;height:50;left:55;top:5;visibility:visible;">
    <table width="900" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="300" height="50">
    <center>
    <a href="#serf.html" onClick="changeall(1,1,1,1,1,3)">
    <img src="serfbuttonbg.jpg" width="250" height="40" border="0">
    </a>
    </center>
    </td>
    <td width="300" height="50">
    <center>
    <a href="#serf.html" onClick="changeall(2,2,1,2,1,4)">
    <img src="woodbuttonbg.jpg" width="250" height="40" border="0">
    </a>
    </center>
    </td>
    <td width="300" height="50">
    <center>
    <a href="#serf.html" onClick="changeall(3,3,1,3,1,5)">
    <img src="desertbuttonbg.jpg" width="250" height="40" border="0">
    </a>
    </center>
    </td>
    </tr>
    </table>
    </div>

    On a trimmed down version of these scripts, I was able to get the divs to change visibility by manually calling on them, but to do that for the entire page would end up in an absolutely huge script, but it looked something like this. . .

    function changemncell(mnold,mnnew)
    {
    if (mnold==1)
    {
    document.getElementById("mncell01").style.visibility = "hidden"
    document.getElementById("sncell01").style.visibility = "hidden"
    document.getElementById("pdcell01").style.visibility = "hidden"
    document.getElementById("testdata01").style.visibility = "hidden"
    document.getElementById("tncell01").style.visibility = "hidden"
    }
    if (mnold==2)
    {
    document.getElementById("mncell02").style.visibility = "hidden"
    document.getElementById("sncell02").style.visibility = "hidden"
    document.getElementById("pdcell02").style.visibility = "hidden"
    document.getElementById("testdata02").style.visibility = "hidden"
    document.getElementById("tncell02").style.visibility = "hidden"
    }
    if (mnold==3)
    {
    document.getElementById("mncell03").style.visibility = "hidden"
    document.getElementById("sncell03").style.visibility = "hidden"
    document.getElementById("pdcell03").style.visibility = "hidden"
    document.getElementById("testdata03").style.visibility = "hidden"
    document.getElementById("tncell03").style.visibility = "hidden"
    }
    if (mnold==4)
    {
    document.getElementById("mncell04").style.visibility = "hidden"
    document.getElementById("sncell04").style.visibility = "hidden"
    document.getElementById("pdcell04").style.visibility = "hidden"
    document.getElementById("testdata04").style.visibility = "hidden"
    document.getElementById("tncell04").style.visibility = "hidden"
    }
    if (mnnew==1)
    {
    document.getElementById("mncell01").style.visibility = "visible"
    document.getElementById("sncell01").style.visibility = "visible"
    document.getElementById("pdcell01").style.visibility = "visible"
    document.getElementById("testdata01").style.visibility = "visible"
    document.getElementById("tncell01").style.visibility = "visible"
    document.getElementById("mainbody").background = "nightbg.jpg"
    }
    if (mnnew==2)
    {
    document.getElementById("mncell02").style.visibility = "visible"
    document.getElementById("sncell02").style.visibility = "visible"
    document.getElementById("pdcell02").style.visibility = "visible"
    document.getElementById("testdata02").style.visibility = "visible"
    document.getElementById("tncell02").style.visibility = "visible"
    document.getElementById("mainbody").background = "skybg.jpg"
    }
    if (mnnew==3)
    {
    document.getElementById("mncell03").style.visibility = "visible"
    document.getElementById("sncell03").style.visibility = "visible"
    document.getElementById("pdcell03").style.visibility = "visible"
    document.getElementById("testdata03").style.visibility = "visible"
    document.getElementById("tncell03").style.visibility = "visible"
    document.getElementById("mainbody").background = "woodbg.jpg"
    }
    if (mnnew==4)
    {
    document.getElementById("mncell04").style.visibility = "visible"
    document.getElementById("sncell04").style.visibility = "visible"
    document.getElementById("pdcell04").style.visibility = "visible"
    document.getElementById("testdata04").style.visibility = "visible"
    document.getElementById("tncell04").style.visibility = "visible"
    document.getElementById("mainbody").background = "desertbg.jpg"
    }
    }

    At first, I thought the problem may be in the way that I am defining the variables used by the functions, but I have tried several variations and nothing seems to solve the problem. I made sure to declare them as global variables and unless I am just missing something terribly simple in all of this, by all rights, it seems to me that it should work properly. For the sake of arguement, however, I will include the variable declerations just in case I am making a mistake of some sort there. . .

    var pnlist = new Array
    pnlist[1] = "pncell01"
    pnlist[2] = "pncell02"
    pnlist[3] = "pncell03"
    pnlist[4] = "pncell04"
    pnlist[5] = "pncell05"
    var pncellid = new Array
    pncellid[1] = "pncell01"
    pncellid[2] = "pncell02"
    pncellid[3] = "pncell03"
    pncellid[4] = "pncell04"
    pncellid[5] = "pncell05"
    var sncellid = new Array
    sncellid[1] = "sncell01"
    sncellid[2] = "sncell02"
    sncellid[3] = "sncell03"
    sncellid[4] = "sncell04"
    sncellid[5] = "sncell05"
    var tncellid = new Array
    tncellid[1] = new Array
    tncellid[1][1] = "tncell0101"
    tncellid[2] = new Array
    tncellid[2][1] = "tncell0201"
    tncellid[3] = new Array
    tncellid[3][1] = "tncell0301"
    tncellid[4] = new Array
    tncellid[4][1] = "tncell0401"
    tncellid[5] = new Array
    tncellid[5][1] = "tncell0501"
    var pdcellid = new Array
    pdcellid[1] = "pdcell01"
    pdcellid[2] = "pdcell02"
    pdcellid[3] = "pdcell03"
    pdcellid[4] = "pdcell04"
    pdcellid[5] = "pdcell05"
    var sdcellid = new Array
    sdcellid[1] = new Array
    sdcellid[1][1] = "sdcell0101"
    sdcellid[2] = new Array
    sdcellid[2][1] = "sdcell0201"
    sdcellid[3] = new Array
    sdcellid[3][1] = "sdcell0301"
    sdcellid[4] = new Array
    sdcellid[4][1] = "sdcell0401"
    sdcellid[5] = new Array
    sdcellid[5][1] = "sdcell0501"
    var bgimg = new Array
    bgimg[1] = "serfbg.jpg"
    bgimg[2] = "woodbg.jpg"
    bgimg[3] = "desertbg.jpg"
    bgimg[4] = "nightbg.jpg"
    bgimg[5] = "skybg.jpg"
    var currentpm = 1
    var maxpm = 5
    var minpm = 1
    var currentpn = "pncell01"
    var currentsn = "sncell01"
    var currenttn = "tncell0101"
    var currentpd = "pdcell01"
    var currentsd = "sdcell0101"
    var currentbg = "serfbg.jpg"


    For those of you that want to explore a bit deeper, I have the code uploaded in my web space at . . .

    members.aol.com/greasonnightwlf/testzone/newserftest.html

    Any help you guys might be able to offer would be very greatly appreciated. I have been beating my head on the desk over this for the last several days and am getting so frustrated at this point, I am just about ready to scrap the entire thing.

    GW

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Bah, the server for my web space is (as seems so typical) having problems so here is a copy of the entire page coding that I have completed so far.
    Last edited by greasonwolfe; 04-15-2006 at 05:14 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Lightbulb

    Well, it would appear I have solved my problems with the code in question. It helps when all the DIVs are in place to be called on and when I call the right function.

    Anyways, if anyone is interested in taking a look at the page in action, here is the link. I haven't put any other data on the page yet since most of it is still in the works, but at least the arrows and buttons across the top are doing what they are supposed to be doing.

    http://members.aol.com/greasonnightw...wserftest.html

    GW


  •  

    Posting Permissions

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