Solved

Set Visibility with cookies in Javascript

Posted on 2009-07-14
10
349 Views
Last Modified: 2012-05-07
Hi experts,

I have a code on my page to set the visibility of two DIVs (one visible and the other one hidden loading on the same container). So when the user click on link A for example shows DIV A and hides B and vice versa.

My problem is when the user clicks on a link on DIV B (which was hidden when the pages loads) and go to other page when he/she comes back now DIV A is back visible.

So I am trying to get a cookie to remember when the last one has been clicked on to keep it visible when go back to the page but, I really have no clue how to go about this...

Can anyone help? Fix my code or give another similar to execute the same function

Thanks!


function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility; 
}
 
HTML DIV Code example
 
<div id="DIV_A"><a href='#' onClick="setVisibility('DIV_A", 'inline');setVisibility("DIV_B, 'none')">

Open in new window

0
Comment
Question by:ClaBap
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 9

Expert Comment

by:xBellox
ID: 24854085
First you need some simple functions to make it easier work with javascript cookies, like in the example bellow.

Second, you need to set the cookie value every time the visibility changes, and last, you need to set the visibility according the last status... It will be something like this:


<script language='javascript'>
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);
}
 
 
 
// Your function
 
function setVisibility(id, visibility) {
   document.getElementById(id).style.display = visibility; 
   createCookie("myVis"+id,visibility,356);
}
 
 
 
</script>
 
// YOUR HTML
 
// AND AT THE END OF CODE
<script language='javascript'>
 // setting the stored visibility
 
   if (readCookie('myVisDIV_A')==null) {
      createCookie('myVisDIV_A', 'visible', 356); // Seeting default value 'visible' (change to 'none' if default should be hidden)
 
   }
   function setVisibility('divA', readCookie('myVisDIV_A'));
</script>
</body></html>

Open in new window

0
 

Author Comment

by:ClaBap
ID: 24854339
I'm sorry I'm really new with Javascript so what exactly do I need to change on the code that you provided to make it work with my HTML code? Should I substitute the values: "name", "value" and "date" for something specific??
0
 
LVL 9

Expert Comment

by:xBellox
ID: 24858220
The only thing you need to change is the default visibility, if the div starts hidden or visible...

You define it at this part of the code:

<script language='javascript'>
 // setting the stored visibility
 
   if (readCookie('myVisDIV_A')==null) {
      createCookie('myVisDIV_A', 'visible', 356); // Seeting default value 'visible' (change to 'none' if default should be hidden)
 
   }
   function setVisibility('divA', readCookie('myVisDIV_A'));
</script>

Choose

createCookie('myVisDIV_A', 'inline', 356); // If you want the default is visible

or

createCookie('myVisDIV_A', 'none', 356); // If you want the default is hiddent
0
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

Author Comment

by:ClaBap
ID: 24860929
Dear XBellox,

Thanks for your help. I tried to place the code as you said but it's still not working. I would really appreciate if you could take a quick look at my page to try to help me figure out what I'm doing wrong.
I'm sending the HTML and also the CSS.

One more time thank you very much for your help.
claudio.css.txt
cookies.html.txt
0
 
LVL 9

Accepted Solution

by:
xBellox earned 500 total points
ID: 24861430
Oh... my mistake, a classic "copy and paste" error.... Change the #147 of cookies.html from this (just remove the word "function"):

 function setVisibility('display_prod', readCookie('myVisdisplay_prod'));

to this:

 setVisibility('display_prod', readCookie('myVisdisplay_prod'));



0
 

Author Comment

by:ClaBap
ID: 24861507
Dear xBellox

Just Perfect!!!! Thank you very much
0
 

Author Comment

by:ClaBap
ID: 24861585
xBellox,

Do you have any idea how I could solve my swap image problem?? I have a swap image with the title of each DIV. MY problem is if I click on the img that brings the hidden DIV and leave the page when I come back img "title A" which is the default is now showing "DIV B"??

Should I create another cookie to keep the image?? Any idea??

One more time thank you a lot
0
 
LVL 9

Expert Comment

by:xBellox
ID: 24862210
I added one more function and modify another. Plus i change the onClick event on imgs.

I'm sending the new cookies.html, and also showing the code that I changed.

// Javascript changes
 
function setVisibility(eid, visibility) {
   document.getElementById(eid).style.display = visibility; 
   createCookie("myVis"+eid,visibility,356);
   changeMyImg();
}
 
 
function changeMyImg() {
	if (document.getElementById('display_prod').style.display=='inline') { // If display_prod visibility is inline that means the images should be: whats_new_up and dont_miss_down
	    alert('Changing');
		document.getElementById('whats_new').src = 'http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/whats_new_up.jpg';
		document.getElementById('dont_miss').src = 'http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/dont_miss_down.jpg';
	} else { // If not, the images should be: whats_new_down and dont_miss_up
		document.getElementById('whats_new').src = 'http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/whats_new_down.jpg';
		document.getElementById('dont_miss').src = 'http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/dont_miss_up.jpg';	
	}
}
 
 
// HTML changes
 
<img src="http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/whats_new_up.jpg" alt="What's New" name="whats_new" width="96" height="26" border="0" id="whats_new" />
<img src="http://www.miatamania.com/sitegraphics/Redesign/Prod_Images/dont_miss_down.jpg" alt="Don't Miss" name="dont_miss" width="96" height="26" border="0" id="dont_miss" />

Open in new window

cookies.html.txt
0
 

Author Comment

by:ClaBap
ID: 24862351
Dear xBellox

Thank you veryyyy much. It's working perfectly now. THANK YOU
0
 
LVL 9

Expert Comment

by:xBellox
ID: 24862445
You're welcome.

I hope you remember  to remove the "alert('Changing');" that I left on code for debug only.

I'm glad that i could help.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

Title # Comments Views Activity
Glitching Slide Show 19 26
Ajax on ASP 2 35
compare date to getdate() 8 15
Getting robots.txt Error 9 19
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

735 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