asked on

Dynamic Style changes not surviving back button

I have a list of FAQ categories that users can click on. When they click on a category, I use some JavaScript to change the style to visible:

u.style.display = 'block';

Or if they click again, I collapse it again with a style change:

u.style.display = 'none';

This works great, except I would like an additional bit of functionality, and I don't know how to achieve it.

When a user expands a FAQ category, and then clicks one of the FAQ's, it takes them to the page with the answer. When they then click the browser Back Button to return to the FAQ list, the category that they had previously expanded is closed again. I want it to somehow remember which category was open, or the state of the stylesheet when they left the FAQ list page, and be able to return the user to the list in the same state that they left it in.

I don't want to open the FAQ answers in a new window.

Any suggestions?
Thanks!
Sandra

neester

This isn't possible AFAIK...

Because the BACK Button does its job.
Returns to the previous page...
If you are using Javascript to Open/Close areas - by hiding and displaying blocks of information.
You are not loading another page at all.

I have a few suggestions...

1) Leave it, the users will work it out after 1 click of their back and forward button...
2) use PHP/CGI/ASP to make the content actually expand when they click the link - by loading a new page. It will actually speed up the page download initially because it will only load teh content they select. In your method the user downloads all the FAQ content regardless if they want to see it or not.
If you choose this option. I could give you assistance with PHP code to do this.

neester

ACTUALLY
I have another idea.
You could have a javascript event on PAGE LEAVE...
I am not 100% sure about how to do it.
But it COULD be possible...
Not too sure though...

:S

COBOLdinosaur

You could probably use a cookie and do some really ugly scripting to to maintain the state and recover it but that probably creates more problems than it solves. You have already rejected using best practice to solve it with a new window. The next best solution would be to open it in an Iframe, but again that creates additonal issues.

Is there some technical reason you have rejected the best solution of opening a new window, or is that contraint dictated by some design consideration?

Cd&

sstoyanovich

ASKER

Ok, I will investigate Page Leave, and see if this may give me a way. What, in general, did you have in mind to do in the script for the page leave event? How/where would I save info about which category was expanded? (No need for code samples - I can work out the details).

I really don't want to make a round trip for expanding every category. The FAQ list page only has that category names, and the titles/links to the individual FAQ's. It does *not* contain the entire faq content.

Thanks
Sandra

Roonaan

Like Cd& says, Just using frames would be the easiest workaround to this problem. No messing around with nasty cookie events etc.

-r-

sstoyanovich

ASKER

I *really* hate sites that pop up new windows when you didn't ask for it. I just don't want to do that. I'd rather lose the category expansion than switch to that. Call it a personal requirement.

... Um, I just thought of a way to do it. No opening in new pages, no additional round trips, no cookies and no iframes - just a bit of asp / session stuff. Nevermind for now. I'll go home and try it tonight.

Thanks all for the suggestions. I'll post back.

S

sstoyanovich

ASKER

Ok, Roonaan and Cd&,

How exactly would you use frames to solve this? Do you mean to have a frame on the same page as where the FAQ list is located? Then when they click an individual FAQ link, it opens in the frame, leaving the FAQ list intact?

... or did you have something more sophicticated in mind?

Thanks!
S

rodesro

Look this

http://www.mattkruse.com/javascript/mktree/

At the end of web page=
For future consideration: I want to add cookie support, so the state of the tree remains the same for each unique tree (with a given ID). This would allow you to leave a page with a tree and come back later and have it expanded to the same place as before. If I get time...

Bob

Garve

Since you're using javascript to make open up the categories, why not show the answers in the same way? Would the page then be too long?

Roonaan

Hey Sandra,

indeed, my thought would be to have either just 2 frames, one containing the faq, the other the navigational tools.

On the other hand you could also offcourse have 1 page with an iframe. You'd then use something like this:

<head>
<script type="text/javascript">
function setContent(c)
{
document.getElementById('content').innerHTML = c;
}
</script>
</head>
<body>
<iframe name="loader" height="1" width="1"></iframe>
<div id="nav">
<a target="loader" href="load.php?faqid=01">Faq1</a>
</div>
<div id="content">
</div>
</body>

Then load.php could ouput something like

<body>
<script type="text/javascript">
<?php
/*
..
code which retrieves faq content
..
*/
$content = str_replace(array("\r","\n"), array('\r','\n'), $content);
echo 'parent.setContent("'.addSlashes($content).'");';
?>
</script>
</body>

Then you'll have like a content plain which will be dynamically filled, without page reloading.

Regards

-r-

ASKER CERTIFIED SOLUTION

arantius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

arantius

Oh yes, and cookies.js came from http://www.netspade.com/articles/javascript/cookies.xml

COBOLdinosaur

do a single iframe this way right after the body tag:

<iframe id="theIF" name="theIF" class="IFhide" src=""></iframe>

then do the links as
<a href="yourfaq.html" target="theIF"
onclick="document.getElementById('theIF').className='IFshow';return true;">

The classes look like this:

<style type="text/CSS">
.IFhide {height:1px;width:1px;z-index:10;
position:absolute;left:100px;top:100px;}
.IFshow {height:300px;width:300px;z-index:10;
position:absolute;left:100px;top:100px;}
</style>

Then you just need a button on the page to close it:

<input type="button" value="close FAQ"
onclick="document.getElementById('theIF').className='IFhide'">

or you could put a close on the FAQ pages to refer themselves back through the parent:

<input type="button" value="close"
onclick="top.document.getElementById('theIF').classname='IFhide'">

Cd&

neester

I still dont see how a FRAME will solve hte probelm...
If someone hits the BACK BUTTON the page will still go back to the last loaded page?????

Wont it?
Maybe im missing something - i NEVER use frames... not for a few years anyway.
So i cant be sure - but i dont see how frames woudl fix the problem withteh BACK BUTTON rolling up the Javascript block....????

COBOLdinosaur

Iframe is an element within the page. The page does not change when a document is loaded into the iframe. Think of it as a layer on steroids.

Cd&

sstoyanovich

ASKER

Garve: yes, then the page would be way too long. Some of the FAQ's have screenshots, etc.

Everyone: that idea I said I had... it's not going to work. When you hit back, your .asp doesn't execute - there's no trip to the server. I'll test to confirm, but I think not. And that's what I needed if I was going to remember the expanded category in the session.

Roonaan, thanks for the iframe code. It would work - though I don't prefer this simply because I feel that I don't have room on the page for the full answer content (especially pages with screen shots). I will fall back on this if other things fail.

arantius, seeing as my other options have fallen through, it's looking like cookies are my best (and maybe only) way of doing this the way that I want. Very high likelihood that your answer will be the one I accept. And it comes with code too - thank you.

Cd&, wow, thanks for all the code. But again, I feel that I don't have room on the page to include the answer content on the same page as the FAQ. It would be on the same page, right? (That's how I interperted the code; please correct me if I'm wrong, because that would make your solution be the best one.)

I'm working on this now, I should get done tonight, and accept the best answer after that.

Thanks all!
Sandra

COBOLdinosaur

It would be on the same page; yes. However it would display on top of the rest of the cotent, and if it was too big it would get independent scroll bars. When the IFhide class is set it cannot be seen and does not take space. When it is expanded it sits above the rest of the elemnts on the page and does not result in any of them being moved.

When the user wants the answer that is the only on the page of importance, and it becomes the dominant feature, but only until they are finished with it.

Cd&

neester

COBOLDinosaur...
Yeah but that means, if someone clicks a link on the FAQ>
And the JAVASCRIPT rolls down the content.
They hit BACK, it will still navigate to the page they were at before they were looking at the FAQ...
INSTEAD of rolling the JAVASCRIPT back up??

Isn't that what ssoyanovich wanted??

I dont see ANYWAY to do that, unless you capture the event when the Page is leaving...
Even then, i dont think its possible to Hault that process....

neester

** Sorry...
>>INSTEAD of rolling the JAVASCRIPT back up??
INSTEAD of rolling the FAQ BLOCK back up??

sstoyanovich

ASKER

Cd&, ok, it takes the whole page. Actually that's ever so close to ideal. Would the user still be able to right-click the individual FAQ link and say 'Open in a New Window' (or in Mozilla, click with the middle mouse button to open in a new tab). I for one like to be able to do that when I see a number of answers or search results that may be of interest. May sound like a conflict of my previous requirement where I don't want it to open in a new window, but my requirement is simply this: the user should decide that, not the web page developer.

Everyone: I've confirmed that using the Session will definitely not work. The asp code does not get called when you hit Back.

arantius, the cookie solution hinges on whether onload is called when you hit Back. I'm about to find out...

Still working on it as we speak,
Sandra

neester

Sandra - am i correct in what I said??

If so - I dont think anything here will work????

Did you want it, so when they hit BACK - it rolls the content back up using javascript?

If so - I woudl recommend what I posted originally - use a server side language...

sstoyanovich

ASKER

It is confirmed. The cookie solution works. Plus it came with code, so that's the solution I will accept. It may not have been what I originally set out to find, but it's the simplest close solution. Thank you everyone for your comments and scripts and time.

Sandra