[RESOLVED] visible/invisible div’s

@screamingbuddhaNov 22.2002

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?

to post a comment

JavaScript

12 Comments(s) _↴

@Zach_ElfersNov 22.2002 — #I don't know what you mean, but you can hide divs etc., but putting display:none; in the CSS script.?

@gil_davisNov 22.2002 — #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.

@screamingbuddhaauthorNov 22.2002 — #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_davisNov 22.2002 — #[i]Originally posted by screamingbuddha [/i]

[B](id=Poll style="visibility: hidden")

(id=Results style="visibility: visible")

[/B][/QUOTE]

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

You should be able to figure out the rest.

@screamingbuddhaauthorNov 22.2002 — #Gil you think too highly of me..

can I get a code check

[URL=http://www.thatissolame.com/test/test.html]here where I'm testing this?[/URL]

thanks

@gil_davisNov 22.2002 — #My best advice would be to get a working cookie script. Yours isn't.

@screamingbuddhaauthorNov 22.2002 — #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_davisNov 22.2002 — #(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.

@screamingbuddhaauthorNov 22.2002 — #(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.

[URL=http://www.thatissolame.com/test/test.html]here[/URL]

@gil_davisNov 22.2002 — #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:

[B]<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>[/B][/Quote]

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>
[/Quote]

@screamingbuddhaauthorNov 23.2002 — #thanks very much!

(labor fruits updated)

sb

@conma2cangAug 20.2003 — #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

Also in #JavaScript _↴

Javascript Tipbox Vertical menu with slide Form Redirect to Multiple Pages

Success!

Help @screamingbuddha spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] visible/invisible div’s

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] visible/invisible div’s

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴