Solved

Dynamic Style changes not surviving back button

Posted on 2004-10-06
22
547 Views
Last Modified: 2012-05-05
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


0
Comment
Question by:sstoyanovich
  • 6
  • 6
  • 4
  • +4
22 Comments
 
LVL 11

Expert Comment

by:neester
ID: 12237481
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.
0
 
LVL 11

Expert Comment

by:neester
ID: 12237522
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12238512
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&
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12238576
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
0
 
LVL 49

Expert Comment

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

-r-
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12239421
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
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12240107
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
0
 

Expert Comment

by:rodesro
ID: 12240684
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
0
 
LVL 7

Expert Comment

by:Garve
ID: 12240931
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?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12241132
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-
0
 
LVL 18

Accepted Solution

by:
arantius earned 500 total points
ID: 12241659
This assumes there is only one level of categories, with one sub list in each.  It uses a cookie to remember the last opened list and reopens it on load.

<html>
<head>
<script src="cookies.js"></script>
<script>
function toggle(id) {
      var el=document.getElementById(id);
      if ("block"==el.style.display) {
            el.style.display="none";
            setCookie("lastopen", "");
      } else {
            el.style.display="block";
            setCookie("lastopen", id);
      }
}
function openthing() {
      var id=getCookie("lastopen");
      //alert(id);
      if (id!="") toggle(id);
}
</script>
<style>
.sublist {
      display: none;
}
</style>
</head>
<body onload="javascript:openthing()">

<ul>
<li onclick="javascript:toggle('sublist1');">thing 1
<ul id="sublist1" class="sublist">
<li>sub thing 1
</ul>
</ul>
</body>
</html>
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 18

Expert Comment

by:arantius
ID: 12241674
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12243160
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&
0
 
LVL 11

Expert Comment

by:neester
ID: 12243438
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....????
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12243501
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&
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12243893
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12243936
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&
0
 
LVL 11

Expert Comment

by:neester
ID: 12243939
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....
0
 
LVL 11

Expert Comment

by:neester
ID: 12243945
** Sorry...
>>INSTEAD of rolling the JAVASCRIPT back up??
INSTEAD of rolling the FAQ BLOCK back up??
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12244221
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
0
 
LVL 11

Expert Comment

by:neester
ID: 12244299
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...
0
 
LVL 1

Author Comment

by:sstoyanovich
ID: 12244312
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
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now