Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > show hide divs - show last state upon reload/post

Reply
Thread Tools

show hide divs - show last state upon reload/post

 
 
ll
Guest
Posts: n/a
 
      04-30-2008
I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis

--------------------------------------------

<script language="javascript" type="text/javascript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>
 
Reply With Quote
 
 
 
 
Erwin Moller
Guest
Posts: n/a
 
      05-01-2008
ll schreef:
> I'm currently working on a form which consists of a show and hide
> javascript. The toggle works fine, although when I click on submit, I
> would like the page to reload with the toggle (show/hide) div in the
> same state it was before being submitted. E.G. If the div was
> visible, I'd like for it to be visible upon return.
> Here's the script I'm currently using - thanks for any help,
> Louis
>
> --------------------------------------------
>
> <script language="javascript" type="text/javascript">
> function WM_toggle(id){
> if (document.all){
> if(document.all[id].style.display == 'none'){
> document.all[id].style.display = '';
> } else {
> document.all[id].style.display = 'none';
> }
> return false;
> } else if (document.getElementById){
> if(document.getElementById(id).style.display == 'none'){
> document.getElementById(id).style.display = 'block';
> } else {
> document.getElementById(id).style.display = 'none';
> }
> return false;
> }
> }
> </script>


Hi,

First, that code is not recommended (at least not by me).
Why don't you simply use getElementById()??
Also, stop using the language="javascript".

Your function could look like:

<script type="text/javascript">
function showHide(someID){
var theEldisp = document.getElementById(someID);
theEldisp.style.display=(theEldisp.style.display== 'none')?'block':'none';
}
</script>

<span onClick="showHide('test');">click here to toggle On and off</span>
<hr>
<div id="test" style='display:block'>
your hiding div content.<br> your hiding div content.<br>
</div>


----------------
To your question concerning remembering the last state:
Since you have a fresh page, the old values are gone.
So you have to find some way to remember them.

Two ways to do this:
1) Clientside solution:
-> store the values in a frameset.
When you post a form in a window in a frameset, only that window is
refreshed, not the window holding the frameset definition.
So you can store here the last value of the div.
Then, if the page loads, check let your new page ask the frameset for
the last value and act accordingly ('none' or 'block')

2) Post the state to your processing script, and let the response write
the right value.
If you control the server too, you can easily add a hidden field to your
form, set its value when somebody click the toggle.
Now if the form is received by the server, do you normal things, and
check for this hidden value, and in the output simply set it right
immediately.
So your output will be (on PHP for example):

<?php
$dispStyle = ((isset($_POST['lastdisp'])) ? $_POST['lastdisp']: 'none');
?>
<div id="test" style='display:<?php echo dispStyle; ?>'>
your hiding div content.<br> your hiding div content.<br>
</div>


Hope that helps.
Personally I prefer the second solution because that doesn't involve
extra frames.

Regards,
Erwin Moller
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      05-01-2008
ll wrote:
> I'm currently working on a form which consists of a show and hide
> javascript. The toggle works fine, although when I click on submit, I
> would like the page to reload with the toggle (show/hide) div in the
> same state it was before being submitted. E.G. If the div was
> visible, I'd like for it to be visible upon return.
> Here's the script I'm currently using - thanks for any help,
> Louis
>
> --------------------------------------------
>
> <script language="javascript" type="text/javascript">


language="javascript" is unnecessary, and deprecated since HTML 4.01,
1999-12-24 CE.

> function WM_toggle(id){


This is no constructor, by convention its identifier should not start with a
capital letter.

> if (document.all){


var o = document.all[id];

> if(document.all[id].style.display == 'none'){


if (o.style.display == 'none')
{

aso.

> document.all[id].style.display = '';
> } else {
> document.all[id].style.display = 'none';
> }


o.style.display = (o.style.display == 'none') ? '' : 'none';

> return false;


You should fix that indentation.

> } else if (document.getElementById){


This branch, representing the standards-compliant approach, should be the
first one. The document.all branch is only needed for compatibility with
IE 4 which is pretty much obsolete by now.

> if(document.getElementById(id).style.display == 'none'){
> document.getElementById(id).style.display = 'block';


An element does not need to be a block element in order to be displayed.
There is no good reason not to set the initial value by assigning the empty
string in this branch as well.

> } else {
> document.getElementById(id).style.display = 'none';
> }


It is very inefficient to call a method several times only to retrieve the
same reference as before.

var o = document.getElementById(id);

// see above
o.style.display = (o.style.display == 'none') ? '' : 'none';

> return false;
> }
> }
> </script>


Summarized:

function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}

function wm_toggle(id)
{
var o;

if (isMethod(document, "getElementById"))
{
o = document.getElementById(id);
}
else if (document.all)
{
o = document.all[id];
}

if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = (o.style.display == "none") ? "" : "none";
return false;
}

return true;
}


As for your question, since the following execution context does not retain
the properties of the preceding one, you will have to store the display
state of the respective elements in a way that it can be read by client-side
scripting later. One way to do that are cookies, but it might suffice to
modify the query part of the request made when submitting the form, and read
that query part afterwards. For example (quick hack):

<head>
...
<script type="text/javascript">
function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}

var getElemById = (function() {
if (isMethod(document, "getElementById"))
{
return function(id) {
return document.getElementById(id);
};
}
else if (document.all)
{
return function(id) {
return document.all[id];
};
}
else
{
return function() {
return null;
};
}
})();

function restoreDisplayState()
{
var state =
(document.URL.match(/[?&]displaystate=([^&#]+)/)
|| [0, null])[1];

if (state == 0)
{
var o = getElemById("bar");
if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = "none";
}
}
}
</script>
</head>

<body onload="restoreDisplayState()">
<div id="bar">&nbsp;</div>
...
<form action="foo" method="post" onsubmit="return handleSubmit(this)">
<script type="text/javascript">
function getDisplayState(id)
{
var o = getElemById(id);
return (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined"
? (o.style.display == "none"
? 0
: 1)
: "");
}

function handleSubmit(f)
{
f.action += "?displaystate=" + getDisplayState("bar");
return true;
}
</script>
...
</form>
</body>


HTH

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Show/hide divs according to server side variable Mike P ASP .Net 7 06-20-2008 02:15 PM
show/hide divs on checkbox click Mike P ASP General 1 11-14-2007 05:44 PM
hide & show divs with different text msgs in the same place on the screen??? tlyczko Javascript 5 12-08-2005 03:04 AM
problem using CSS to hide/show divs for tab interface middletree HTML 0 10-25-2005 03:26 PM
divs hide-show form elements showing thru.. Frances Javascript 3 09-09-2005 08:41 PM



Advertisments