Solved

Show hide cookie amend

Posted on 2008-10-06
17
215 Views
Last Modified: 2012-05-05
Hi,

I've got a cookie i'm using with a show/hide div, I need to configure it to work with more divs.

I've attached the full code, the bit I need to edit is...

function init()
{
  var prev = readCookie('featureIntro');
  if( prev !== null )
    document.getElementById('featureIntro').style.display = prev;
  else
    document.getElementById('featureIntro').style.display='';
}

I tried the following to also use the cookie with the filter div im show/hiding.

function init()
{
  var prev = readCookie('featureIntro');
  if( prev !== null )
    document.getElementById('featureIntro').style.display = prev || document.getElementById(filter).style.display = prev;
  else
    document.getElementById('featureIntro').style.display='' || document.getElementById(filter).style.display='';
}


Any ideas how I can do this?
window.onload=init;
/*function init()
{
	var prev = readCookie('featureIntro');
	if( prev !== null )
		document.getElementById('featureIntro').style.display = prev;
}*/
function init()
{
  var prev = readCookie('featureIntro');
  if( prev !== null )
    document.getElementById('featureIntro').style.display = prev;
  else
    document.getElementById('featureIntro').style.display='';
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name) {
	createCookie(name,"",-1);
}
function showhide(id){
	if (document.getElementById){
		obj = document.getElementById(id);
		if (obj.style.display == "none"){
			obj.style.display = "";
		} else {
      		obj.style.display = "none";
		}
		if( null!==readCookie(id) )
		{
			eraseCookie( id );
		}
		createCookie(id,obj.style.display,365);
	}
}

Open in new window

0
Comment
Question by:danwpeters
  • 9
  • 5
  • 3
17 Comments
 
LVL 10

Expert Comment

by:Bane83
ID: 22650648

function init()
{
  var prev = readCookie('featureIntro');
  if( prev !== null )
  {
    document.getElementById('featureIntro').style.display = prev; 
    document.getElementById('filter').style.display = prev;
  }
  else
  {
    document.getElementById('featureIntro').style.display='';
    document.getElementById('filter').style.display='';
  }
}

Open in new window

0
 

Author Comment

by:danwpeters
ID: 22650721
Hi, thanks but this has bugged it up. it remembers if I close them both, if I open filter it wont remember, if I open feature it will open both when i reload the page.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 400 total points
ID: 22650844
It would be smarter to save the name of the shown div or a list of shown divs and hide the rest.

Anyway

var listOfItems = ["featureIntro","filter"];
 
function init() {
  for (var i=0;i<listOfItems.length;i++) {
    var prev = readCookie(listOfItems[i]);
    document.getElementById(listOfItems[i]).style.display = (prev != null)?prev:'none'; 
  }
}

Open in new window

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:danwpeters
ID: 22650879
Thanks mplungjan, they open and close ok again now, but reset when the page is reloaded.
0
 

Author Comment

by:danwpeters
ID: 22650907
Tested it in firefox, and it works. But in IE it doesnt, forgets your div show/hide state when reloading the page.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22650948
remove the window.onload=init and put this at the bottom of the page

<script>
init()
</script>
0
 

Author Comment

by:danwpeters
ID: 22650971
Hmm still the same, any ideas?
0
 
LVL 10

Assisted Solution

by:Bane83
Bane83 earned 100 total points
ID: 22651224
Not sure if this is your problem, or if you've fixed it yet or not, but I believe there might be a small mistake with mplungjian's script:

var listOfItems = ["featureIntro","filter"];
 
function init() {
  for (var i=0;i<listOfItems.length;i++) {
    var prev = readCookie(listOfItems[i]);
    document.getElementById(listOfItems[i]).style.display = (prev != null)?prev:'none';
  }
}

Here, if the cookie is null it sets the display to 'none', which would start the divs as hidden.  Going by your original code, you may want to switch that to:

document.getElementById(listOfItems[i]).style.display = (prev != null)?prev:'';
0
 

Author Comment

by:danwpeters
ID: 22651346
bane, thanks for fixing it, I want to give you points too, how can I?
0
 
LVL 10

Expert Comment

by:Bane83
ID: 22651476
There's a split functionality somewhere, I don't remember exactly where, but it's fine.  mplungjan did all of the real work.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22657048
And our joint efforts was only worth a "B" ?
0
 

Author Comment

by:danwpeters
ID: 22657290
Hi mplungjan, I gave you a B as it wasnt complete, I was then going to give bane83 the same as he fixed the issue, but I couldnt assign any more points after accepting your answer. Sorry.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22657365
I unaccepted for you to split points

I do not believe a "B" is in order when the fix was so obvious and I could have answered it myself had I not been asleep at the time (CET) -  so I did not get a chance to rectify the suggestion.
The actual joint solution is worth an "A" in my opinion.
0
 

Author Closing Comment

by:danwpeters
ID: 31503373
Thanks for your help guys
0
 

Author Comment

by:danwpeters
ID: 22657437
i've marked it correctly now, thanks for unaccepting the points mplungian, it was the first time ive had to accept 2 answers in a question so wasnt sure how it worked correctly. I thought I would have to give a B to yours and an A to bane's as he completed it, if you had completed it I would have given you an A, however, at the end of the day it was bane who completed it, which is why I originally marked you as a B.

Your both A now, thanks again for your help!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22657698
Thanks

My issue was really that I had presented you with some code and in 4 hours you closed it with a "B"
Had I been available when you discovered that my code assumed (not unreasonably) that you wanted to default the divs to collapsed, then I would have completed the question and you would have had no reason to give a "B". So basically I suggest you give the experts the time/chance to answer the question completely (with possible extra elaboration) instead of grading based on the first comment.
0
 

Author Comment

by:danwpeters
ID: 22657745
mplungian, I graded when my question was fully answered. The code wasn't working correctly in IE, you gave a response to this which did not work, Bane83 then stepped in and provided a fix, and so my question was answered fully. Which would suggest your answer was a B, as it had a bug, and Bane corrected it which made it an A. Your grades are fine now, so lets call this a day.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 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