PDA

View Full Version : Add effect to DIV



Tabo
02-26-2007, 04:26 PM
I am making a site that has colapsable widgets and i use this script:

<Head>

<script type="text/javascript" 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);
}

function hidemembers() {
toggleBox('members','none');
createCookie('members','none');
}

function showmembers() {
toggleBox('members','block');
createCookie('members','block');
}

function toggleBox(id, display) {
// DOM3 = IE5, NS6
if (document.getElementById) {
document.getElementById(id).style.display = display;
// Netscape 4
} else if (document.layers) {
document.layers[id].display = display;
// IE 4
} else if (document.all) {
document.all[id].style.display = display;
}
}

window.onload = function() {
var memberDisplay = readCookie('members');
if (memberDisplay !== null) {
toggleBox('members',memberDisplay);
}
};

</head>
<body>

<a href="javascript:showmembers()">Show</a> | <a href="javascript:hidemembers()">hide</a>

<div id="members">content1</div>
</body>

However when the widgets open/close i want it to have an affect. I have looked everywhere and i have found this:

http://blogs.tech-recipes.com/johnny/scriptaculous-quick-reference/
(scroll down a little to see!)

can someone please add to my script the effect "fade" to happen when the div is hidden and "SlideDown" when it opened.

Also if its posible and does not ask too much i would like it to pulseate and then fade :)

Thank you a lot for your help


---------

Also i use this more then once on a page, would it be possible to show me how to change the cookie each time so it will work. Thank you.