ClaBap
asked on
Set Visibility with cookies in Javascript
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!
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')">
ASKER
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??
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
You define it at this part of the code:
<script language='javascript'>
// setting the stored visibility
if (readCookie('myVisDIV_A')=
createCookie('myVisDIV_A',
}
function setVisibility('divA', readCookie('myVisDIV_A'));
</script>
Choose
createCookie('myVisDIV_A',
or
createCookie('myVisDIV_A',
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Dear xBellox
Just Perfect!!!! Thank you very much
Just Perfect!!!! Thank you very much
ASKER
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
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
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.
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" />
cookies.html.txt
ASKER
Dear xBellox
Thank you veryyyy much. It's working perfectly now. THANK YOU
Thank you veryyyy much. It's working perfectly now. THANK YOU
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.
I hope you remember to remove the "alert('Changing');" that I left on code for debug only.
I'm glad that i could help.
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:
Open in new window