This is an up date to Using Script.aculo.us to Toggle a DIV with the added bonus of persisting the state of the Toggled DIV(s). This is not as an elegant solution because it doesn't to use the Effect.Toggle Function but it does allow you to use any pair of Combination Effects.
First a shout out to Cookies in JavaScript and Unobtrusive & Persistent Script.aculo.us Effects for the JavaScript Cookies code.
Due to the need to have a window.onload function in the script I cannot demo it in Wordpress but I can demo it here.
View Source Code
CODE:
-
<script>
-
-
window.onload=function(){
-
-
var boxIds = new Array("test_div_1","test_div_2");
-
for (i = 0; i <boxIds.length; i++) {
-
if (boxIds[i]) {
-
setDiv(boxIds[i]);
-
}
-
}
-
}
-
-
function setDiv(id){
-
-
cookieValue = readCookie(id);
-
-
if (cookieValue == 'Appear') {
-
new Effect.Appear(id);
-
setCookie(id,'Appear',1) ;
-
}else if (cookieValue == 'Fade') {
-
new Effect.Fade(id);
-
setCookie(id,'Fade',1) ;
-
}else{
-
new Effect.Fade(id);
-
setCookie(id,'Fade',1) ;
-
}
-
}
-
-
function divToggle(id){
-
-
cookieValue = readCookie(id);
-
-
if (cookieValue == 'Fade') {
-
new Effect.Appear(id);
-
setCookie(id,'Appear',1) ;
-
}else if (cookieValue == 'Appear') {
-
new Effect.Fade(id);
-
setCookie(id,'Fade',1) ;
-
}
-
}
-
-
function setCookie(name,value,days) {
-
if (days) {
-
var date = new Date();
-
date.setTime(date.getTime()+(days*24*60*60*1000));
-
var expires = ";expires="+date.toGMTString();
-
} else {
-
expires = "";
-
}
-
document.cookie = name+"="+value+expires+";path=/";
-
}
-
-
function readCookie(name) {
-
var dc = document.cookie;
-
var prefix = name + "=";
-
var begin = dc.indexOf("; " + prefix);
-
if (begin == -1) {
-
begin = dc.indexOf(prefix);
-
if (begin != 0) return null;
-
} else {
-
begin += 2;
-
}
-
var end = document.cookie.indexOf(";", begin);
-
if (end == -1) {
-
end = dc.length;
-
}
-
return unescape(dc.substring(begin + prefix.length, end));
-
}
-
</script>
-
-
///////
-
-
<a href="javascript:divToggle('test_div_2');"><strong>DIV 2</strong></a>
-
<div id='test_div_2' style='display:none;border:#999999 solid 1px;'>
-
<strong>Can You See Me Now?</strong>
-
-
</div>
Posted in AJAX.
One Response
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Wow; I just stumbled onto this via Pixel Groovy, and it's a solution I've been racking my brain to try to figure out for the last week. I'm really looking forward to putting this to use, thanks for the posts!