PDA

Click to See Complete Forum and Search --> : [RESOLVED] visible/invisible div's

screamingbuddha
11-22-2002, 11:44 AM
could use some help here, sorry to have to ask for this kind of load

I have 2 elements that will be displayed on a page depending on a cookie status.
One element is a form, the other is a table structure.

I haven't used DHTML in some time, and I remember that you could use z-index to determine which one would be displayed - in this case:

var Status == getCookieValue(myCookie)
if Status = "taken"
{
/* table containing results, information, etc.. */
}
else
{
/* form and submit button */

I don't think z-index is still the most effecient, or easiest way to do this.. is there a more current method?
Zach Elfers
11-22-2002, 11:46 AM
I don't know what you mean, but you can hide divs etc., but putting display:none; in the CSS script.:)
gil davis
11-22-2002, 11:58 AM
The "z-index" parameter detemines the stacking order of positioned objects that are overlapping. It is used to bring an object to the front of another object without changing the visibility of either object.

The "display" parameter detemines how an object is displayed in the flow of the document: "inline", "block" or "none". It is used to expand and collapse things, like an outline or menu.

The "visiblilty" parameter determies whether an object is visible or not: "visible", "hidden" or "inherit". It is used to selectively show and hide portions of a document.
screamingbuddha
11-22-2002, 12:13 PM
ok I think I understand a little better..
can you help me write it out, or point to an example?
(I know my syntax is bad.. corrections and flames welcome)


var Status == getCookieValue(myCookie)
if Status = "taken";
{
(id=Poll style="visibility: hidden")
(id=Results style="visibility: visible")
}
else
{
(id=Poll style="visibility: visible")
(id=Results style="visibility: hidden")
}

<body>

<table><tr>

<div id="Poll">
<td>poll</td>
<td>info</td>
<td>submit</td>
</div>

</tr><tr>

<div id="Results">
<td>results</td>
<td>info</td>
</div>

</tr></table>

this is the nature of what I have to produce.. sorry I'm no good at this
gil davis
11-22-2002, 12:33 PM
Originally posted by screamingbuddha
(id=Poll style="visibility: hidden")
(id=Results style="visibility: visible")



{document.getElementById("Poll").style.visibility = "hidden";
document.getElementById("Rusults").style.visibility = "visible";}


You should be able to figure out the rest.
screamingbuddha
11-22-2002, 12:59 PM
Gil you think too highly of me..
can I get a code check
here where I'm testing this? (http://www.thatissolame.com/test/test.html)

thanks
gil davis
11-22-2002, 01:35 PM
My best advice would be to get a working cookie script. Yours isn't.
screamingbuddha
11-22-2002, 01:42 PM
I'd been working with this script previously.. and it seemed to work just fine (commented out what I added, and it didn't show any errors)
what platform/browser are you running?
gil davis
11-22-2002, 03:28 PM
(heavy sigh)

I used IE 5.5 on Windows 2000.

Your getCookieValue() function does not seem to return the cookie correctly. I couldn't debug the page any further, and gave up. Perhaps someone with more patience with cookie scripts and such will pick up this thread.
screamingbuddha
11-22-2002, 04:18 PM
(shaking my head in shame)

I'm sorry Gil, I'm new here and certainly didn't mean to cause such a reaction within days of registering..

for anyone else with patience remaining.. I've updated the cookieScript to something seemingly more stable.
The original problem still remains, I need only one of the div's visible based on the conditional.
here (http://www.thatissolame.com/test/test.html)
gil davis
11-22-2002, 05:01 PM
Well, I looked at your latest, and you have cleaned up the cookie crumbs.

I can now see your logic problems.

You cannot change the visibility of an object until it exists. You need to make both divs "hidden" by default. Then in an "onLoad" script, act accordingly.

Add the visible decisions to the existing "onLoad" script. This stuff:

<script language="javascript">
GetCookie('pollStatus')
{
if (GetCookie('pollStatus') == null)
{
SetCookie('pollStatus','untaken', exp);
}
if (GetCookie('pollStatus') == 'untaken')
{
//document.getElementById("pollResults").style.visibility = "hidden";
//document.getElementById("pollQuestion").style.visibility = "visible";
}
else
{
//document.getElementById("pollQuestion").style.visibility = "hidden";
//document.getElementById("pollResults").style.visibility = "visible";
}
}
</script>

Put it in a function and get rid of the first cookie call (not necessary, doesn't do anything) and the first set of braces. Call the function somewhere in the "onLoad".

Change the "div" styles, either inline or using a style sheet. For example (using the ID's so you can change the type of tag if you want):


<style>
.pollQuestion {visibility: hidden}
.pollResults {visibility: hidden}
</style>
screamingbuddha
11-22-2002, 07:36 PM
thanks very much!
(labor fruits updated)

sb
conma2cang
08-19-2003, 10:02 PM
i want to use onclick to show/hide tables...

but i want the setting show/hide to be remembered .. so that when the user reloads the page... the setting is still there...


how do i use the codes above then?

plz explain to me a little more!

thx