...

View Full Version : Add affects



TaboTabo
02-25-2007, 10:47 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/

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

vwphillips
02-25-2007, 10:56 PM
I have this on file


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// DIV Change Height(with Persistance) (05-02-2007) Draft
// by Vic Phillips http://www.vicsjavascripts.org.uk

// The change height requirement is specified in the DIV class Name
// e.g.
// <div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolut.....
// where:
// zxcCngHt = to recognise the DIV is to have Chage Height applied
// the parameter fields are separated by commers
// parameter 0 = the minimum height
// parameter 1 = the manimum height
// parameter 2 = the number of change steps(equates to speed)
//

// The script is initialised by a BODY or window onload event call to function 'zxcInitCngHt()'.

// External control requires that each DIV is assigned a unique ID name
// Control is exercised from an event call to function zxcCngHt(zxcobj,zxcstop,zxcud)'
// Where:
// parameter 0 = obj or obj ID,
// parameter 1 = true to stop,
// parameter 2 = force direction ( 1 = down, -1 = up ).

// Persistance utalises a cookie.
// Global variable specify the Cookie Name and the Expiery duration in Days
// e.g.
var zxcCngHCookieDays=.0007; // = 1.008 minutes
var zxcCngHCookieName='Fred2';
//


// functional Code - NO changes required(I hope)

var zxcCngHAry=[];

function zxcCngHt(zxcobj,zxcstop,zxcud){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcoop=zxcobj.cngh;
clearTimeout(zxcoop.to);
zxcoop.ud=(zxcud==-1||zxcud==1)?zxcud:zxcoop.ud;
this.stop=zxcstop;
if (!this.stop){ zxcoop.cnght(); }
}

function zxcInitCngHt(){
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV')
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className.match('zxcCngHt')){
var zxcpar=zxcdivs[zxc0].className.split('zxcCngHt')[1].split(',');
// object min Height max Height steps(speed)
zxcCngHAry.push(new zxcCngHtOOP(zxcdivs[zxc0],parseInt(zxcpar[1]),parseInt(zxcpar[2]),parseInt(zxcpar[3])));
}
}
}
var zxccookie=zxcCngHGetCookie();
if (zxccookie){ zxcCngHAnaliseCookie(zxccookie); }
}

// object, min H, max H, steps, ident
function zxcCngHtOOP(zxcobj,zxcmin,zxcmax,zxcstps){
zxcobj.cngh=this;
this.obj=zxcobj;
this.mmh=[zxcobj.offsetHeight,zxcmin||0,zxcmax||100];
this.stop=false;
this.ud=(this.mmh[2]<zxcobj.offsetHeight-5)?-1:1;
this.stps=zxcmax/zxcstps||1;
this.to=null;
this.dly=document.all?10:5;
this.ref='zxccngh'+zxcCngHAry.length;
window[this.ref]=this;
}

zxcCngHtOOP.prototype.cnght=function(){
if (((this.ud>0&&this.mmh[0]+this.ud*this.stps<this.mmh[2])||(this.ud<0&&this.mmh[0]+this.ud*this.stps>this.mmh[1]))&&!this.stop){ // ||(this.ud<0&&this.cnt+this.ud>0)
this.obj.style.height=(this.mmh[0]+=this.ud*this.stps)+'px';
this.setTimeOut('cnght();',this.dly);
}
else if (!this.stop){
this.obj.style.height=((this.ud<0)?this.mmh[1]:this.mmh[2])+'px';
this.ud=-this.ud;
zxcSetCngHCookie();
}
}

zxcCngHtOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcCookieString(){
var zxcstrg='';
for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){
zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+':';
}
}

function zxcSetCngHCookie(){
var zxcexp=new Date(new Date().getTime()+zxcCngHCookieDays*86400000).toGMTString();
var zxcstrg='';
for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){ zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+'|'; }
document.cookie=zxcCngHCookieName+'='+encodeURI(zxcstrg)+';expires='+zxcexp+';path=/;';
}

function zxcCngHGetCookie(zxcnme){
var zxcst=document.cookie.indexOf(zxcCngHCookieName+'=');
var zxclen=zxcst+zxcCngHCookieName.length+1;
if ((!zxcst)&&(zxcCngHCookieName!=document.cookie.substring(0,zxcCngHCookieName.length))) return null;
if (zxcst==-1) return null;
var zxcend=document.cookie.indexOf(';',zxclen);
if (zxcend==-1) zxcend=document.cookie.length;
return decodeURI(document.cookie.substring(zxclen,zxcend));
}

function zxcCngHAnaliseCookie(zxcstrg){
zxcstrg=zxcstrg.split('|');
for (var zxc0=0;zxc0<zxcstrg.length-1;zxc0++){
var zxcnu=parseInt(zxcstrg[zxc0].split(':')[0]);
if (zxcCngHAry[zxcnu]){
var zxcud=(zxcstrg[zxc0].split(':')[1]=='1')?-1:1;
zxcCngHt(zxcCngHAry[zxcnu].obj,false,zxcud);
}
}
}


//-->
</script>

</head>

<body onload="zxcInitCngHt();" >
<input type="button" name="" value="Cng Height 1" onclick="zxcCngHt('tst1');" > <input type="button" name="" value="Stop Cng Height" onclick="zxcCngHt('tst1',true);" >
<input type="button" name="" value="Cng Height 2" onclick="zxcCngHt('tst2');" >
<div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolute;left:20px;top:40px;width:200px;height:100px;background-Color:red;" ></div>
<div id="tst2" class="RealRule zxcCngHt,20,200,150" style="position:absolute;left:250px;top:40px;width:200px;height:100px;background-Color:green;" ></div>


</body>

</html>

this uses OOP to allow concurrent execution of the effect on different objects.

Can add a fade effect if interested.

TaboTabo
02-26-2007, 07:46 AM
Can you add the fade effect please :)

If you can write it into my script so it fades when closes

Thanks a lot

vwphillips
02-26-2007, 10:17 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// DIV Change Height(with Persistance) (05-02-2007) Draft
// by Vic Phillips http://www.vicsjavascripts.org.uk

// The change height requirement is specified in the DIV class Name
// e.g.
// <div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolut.....
// where:
// zxcCngHt = to recognise the DIV is to have Chage Height applied
// the parameter fields are separated by commers
// parameter 0 = the minimum height
// parameter 1 = the manimum height
// parameter 2 = the number of change steps(equates to speed)
//

// The script is initialised by a BODY or window onload event call to function 'zxcInitCngHt()'.

// External control requires that each DIV is assigned a unique ID name
// Control is exercised from an event call to function zxcCngHt(zxcobj,zxcstop,zxcud)'
// Where:
// parameter 0 = obj or obj ID,
// parameter 1 = true to stop,
// parameter 2 = force direction ( 1 = down, -1 = up ).

// Persistance utalises a cookie.
// Global variable specify the Cookie Name and the Expiery duration in Days
// e.g.
var zxcCngHCookieDays=.0007; // = 1.008 minutes
var zxcCngHCookieName='Fred2';
//


// functional Code - NO changes required(I hope)

var zxcCngHAry=[];

function zxcCngHt(zxcobj,zxcstop,zxcud){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcoop=zxcobj.cngh;
clearTimeout(zxcoop.to);
zxcoop.ud=(zxcud==-1||zxcud==1)?zxcud:zxcoop.ud;
this.stop=zxcstop;
if (!this.stop){ zxcoop.cnght(); }
}

function zxcInitCngHt(){
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV')
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className.match('zxcCngHt')){
var zxcpar=zxcdivs[zxc0].className.split('zxcCngHt')[1].split(',');
// object min Height max Height steps(speed)
zxcCngHAry.push(new zxcCngHtOOP(zxcdivs[zxc0],parseInt(zxcpar[1]),parseInt(zxcpar[2]),parseInt(zxcpar[3])));
}
}
}
var zxccookie=zxcCngHGetCookie();
if (zxccookie){ zxcCngHAnaliseCookie(zxccookie); }
}

// object, min H, max H, steps, ident
function zxcCngHtOOP(zxcobj,zxcmin,zxcmax,zxcstps){
zxcobj.cngh=this;
this.obj=zxcobj;
this.mmh=[zxcobj.offsetHeight,zxcmin||0,zxcmax||100];
this.stop=false;
this.ud=(this.mmh[2]<zxcobj.offsetHeight-5)?-1:1;
this.stps=zxcmax/zxcstps||1;
this.to=null;
this.dly=document.all?10:5;
this.ref='zxccngh'+zxcCngHAry.length;
window[this.ref]=this;
}

zxcCngHtOOP.prototype.cnght=function(){
if (((this.ud>0&&this.mmh[0]+this.ud*this.stps<this.mmh[2])||(this.ud<0&&this.mmh[0]+this.ud*this.stps>this.mmh[1]))&&!this.stop){ // ||(this.ud<0&&this.cnt+this.ud>0)
this.obj.style.height=(this.mmh[0]+=this.ud*this.stps)+'px';
zxcOpacity(this.obj,this.mmh[0]*(100/this.mmh[2]));
this.setTimeOut('cnght();',this.dly);
}
else if (!this.stop){
this.obj.style.height=((this.ud<0)?this.mmh[1]:this.mmh[2])+'px';
this.ud=-this.ud;
zxcSetCngHCookie();
}
}

function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}


zxcCngHtOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcCookieString(){
var zxcstrg='';
for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){
zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+':';
}
}

function zxcSetCngHCookie(){
var zxcexp=new Date(new Date().getTime()+zxcCngHCookieDays*86400000).toGMTString();
var zxcstrg='';
for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){ zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+'|'; }
document.cookie=zxcCngHCookieName+'='+encodeURI(zxcstrg)+';expires='+zxcexp+';path=/;';
}

function zxcCngHGetCookie(zxcnme){
var zxcst=document.cookie.indexOf(zxcCngHCookieName+'=');
var zxclen=zxcst+zxcCngHCookieName.length+1;
if ((!zxcst)&&(zxcCngHCookieName!=document.cookie.substring(0,zxcCngHCookieName.length))) return null;
if (zxcst==-1) return null;
var zxcend=document.cookie.indexOf(';',zxclen);
if (zxcend==-1) zxcend=document.cookie.length;
return decodeURI(document.cookie.substring(zxclen,zxcend));
}

function zxcCngHAnaliseCookie(zxcstrg){
zxcstrg=zxcstrg.split('|');
for (var zxc0=0;zxc0<zxcstrg.length-1;zxc0++){
var zxcnu=parseInt(zxcstrg[zxc0].split(':')[0]);
if (zxcCngHAry[zxcnu]){
var zxcud=(zxcstrg[zxc0].split(':')[1]=='1')?-1:1;
zxcCngHt(zxcCngHAry[zxcnu].obj,false,zxcud);
}
}
}


//-->
</script>

</head>

<body onload="zxcInitCngHt();" >
<input type="button" name="" value="Cng Height 1" onclick="zxcCngHt('tst1');" > <input type="button" name="" value="Stop Cng Height" onclick="zxcCngHt('tst1',true);" >
<input type="button" name="" value="Cng Height 2" onclick="zxcCngHt('tst2');" >
<div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolute;left:20px;top:40px;width:200px;height:100px;background-Color:red;" ></div>
<div id="tst2" class="RealRule zxcCngHt,20,200,150" style="position:absolute;left:250px;top:40px;width:200px;height:100px;background-Color:green;" ></div>


</body>

</html>

vwphillips
02-27-2007, 07:18 PM
from pm

Thank you for the help but how can i do it so that when a link is pressed it shows, and when an other link is pressed it hides it from display???????


answer is in the application notes


// External control requires that each DIV is assigned a unique ID name
// Control is exercised from an event call to function zxcCngHt(zxcobj,zxcstop,zxcud)'
// Where:
// parameter 0 = obj or obj ID,
// parameter 1 = true to stop,
// parameter 2 = force direction ( 1 = down, -1 = up ).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum