...

View Full Version : style.visibility onClick not working properly



greasonwolfe
04-19-2005, 11:05 PM
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

greasonwolfe
04-20-2005, 03:07 AM
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.

greasonwolfe
04-21-2005, 03:57 AM
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/greasonnightwlf/testzone/newserftest.html

GW



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum