Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Add affects

  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add affects

    I am making a site that has colapsable widgets and i use this script:

    <Head>
    Code:
    <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>

    Code:
    <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...ick-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
    Last edited by TaboTabo; 02-25-2007 at 10:49 PM.
    ----------------------------------------------
    ----------------------------------------------

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    I have this on file
    Code:
    <!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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you add the fade effect please

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

    Thanks a lot
    ----------------------------------------------
    ----------------------------------------------

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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
    Code:
    // 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 ).
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •