you.gotfoo.org

December 29th, 2006

Using Script.aculo.us to Toggle a DIV II

AJAX, by jay.

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

PLAIN TEXT

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>

Back Top

December 29th, 2006

Using Script.aculo.us to Toggle a DIV II

Responses to “Using Script.aculo.us to Toggle a DIV II”