Advanced Search

Results 1 to 10 of 10

Thread: Fading Image Rollover

  1. #1
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Fading Image Rollover

    Okay. So I'm trying to make an online OS made completely out of HTML. I am facing a difficulty, however. I want my taskbar at the bottom of the page to fade into view when the page loads. I also want the start menu button (which is now semi-transparent) to become opaque by fading with javacript and/or html when the cursor is placed over it. When you click on the start menu button, I want it to crossfade into another image and display a menu that slides upwards (not dropdown). Its behavior is a little similar to Vista. I hope this makes sense. I have very little knowledge and expirence with javascript and have searched everywhere for a code to help me in what I'm doing. Please help!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    no time todo the menue slide up today but

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #taskbar {
     width:700px;height:100px;
    }
    
    #startmenubutton {
      position:relative;width:100px;height:50px;
    }
    
    #startmenubutton IMG {
      position:absolute;width:100px;height:50px;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (01-October-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                     (variable)
    //  parameter 1 = an array defining the start and finish values of the effect.                    (array)
    //                 field 0 the start value. (digits, for opacity minimum 0, maximum 100)
    //                 field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds.     (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.             (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.58K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,fin){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[fin||0];
     return this;
    }
    
    zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    
    function TaskBar(id){
     var obj=document.getElementById(id);
     var oop=new zxcAnimate('opacity',obj);
     oop.update([0,100],1000);
    }
    
    function ImgFade(id,ms){
     var obj=document.getElementById(id);
     var imgs=obj.getElementsByTagName('IMG');
     this.top=new zxcAnimate('opacity',imgs[1],100);
     this.top.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
      }
     }
     this.bot=new zxcAnimate('opacity',imgs[0],0);
     this.bot.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
      }
     }
     this.ms=ms||1000;
     this.addevt(obj,'mouseover','Mse',true);
     this.addevt(obj,'mouseout','Mse',false);
    }
    
    ImgFade.prototype.Mse=function(e,ud){
     this.top.obj.style.visibility='visible';
     this.top.obj.style.zIndex=!ud?'1':'0';
     this.top.update([this.top.data[0],!ud?100:0],this.ms);
    
     this.bot.obj.style.visibility='visible';
     this.bot.obj.style.zIndex=ud?'1':'0';
     this.bot.update([this.bot.data[0],ud?100:0],this.ms);
    }
    
    ImgFade.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div id="startmenubutton" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" style="visibility:hidden;" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    </div>
    <div id="taskbar" >
    I want my taskbar at the bottom of the page to fade into view when the page loads.<br />
    
    I also want the start menu button (which is now semi-transparent) to become opaque by fading with javacript<br />
    and/or html when the cursor is placed over it.<br />
    
    When you click on the start menu button, I want it to crossfade into another image and<br />
    display a menu that slides upwards (not dropdown).
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
     TaskBar('taskbar')
     new ImgFade('startmenubutton')
    /*]]>*/
    </script>
    </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/

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #taskbar {
     width:700px;height:100px;
    }
    
    #startmenubutton {
      position:relative;width:100px;height:50px;
    }
    
    #startmenubutton IMG {
      position:absolute;width:100px;height:50px;
    }
    
    .menu {
      position:absolute;overflow:hidden;visibility:hidden;left:10px;top:-5px;width:100px;height:0px;border:solid black 1px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (01-October-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                     (variable)
    //  parameter 1 = an array defining the start and finish values of the effect.                    (array)
    //                 field 0 the start value. (digits, for opacity minimum 0, maximum 100)
    //                 field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds.     (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.             (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.58K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,fin){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[fin||0];
     return this;
    }
    
    zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    
    function TaskBar(id){
     var obj=document.getElementById(id);
     var oop=new zxcAnimate('opacity',obj);
     oop.update([0,100],1000);
    }
    
    function ImgFade(id,ms){
     var obj=document.getElementById(id);
     var imgs=obj.getElementsByTagName('IMG');
     imgs[0].style.zIndex='1';
     this.bot=new zxcAnimate('opacity',imgs[0],0);
     this.bot.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
       this.bot.obj.style.zIndex='0';
      }
     }
     this.ms=ms||1000;
     this.addevt(obj,'mouseover','Mse',true);
     this.addevt(obj,'mouseout','Mse',false);
    }
    
    ImgFade.prototype.Mse=function(e,ud){
     this.bot.obj.style.visibility='visible';
     this.bot.obj.style.zIndex='2';
     this.bot.update([this.bot.data[0],ud?100:0],this.ms);
    }
    
    ImgFade.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    function Menu(id,ms){
     var obj=document.getElementById(id);
     var menu=obj.getElementsByTagName('DIV')[0];
     this.fin=menu.offsetTop;
     this.max=menu.getElementsByTagName('DIV')[0].offsetHeight;
     this.aheight=new zxcAnimate('height',menu,0);
     this.aheight.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
      }
     }
     this.atop=new zxcAnimate('top',menu,this.fin);
     this.addevt(obj,'mouseover','Mse',true);
     this.addevt(obj,'mouseout','Mse',false);
     this.ms=ms||1000;
    }
    
    Menu.prototype.Mse=function(e,ud){
     this.aheight.obj.style.visibility='visible';
     this.atop.update([this.atop.data[0],ud?this.fin-this.max:this.fin],this.ms);
     this.aheight.update([this.aheight.data[0],ud?this.max:0],this.ms);
    
    }
    
    Menu.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    <div id="startmenubutton" >
     <div class="menu" >
      <div>
       <a href="#">Link 1</a><br />
       <a href="#">Link 2</a><br />
       <a href="#">Link 3</a><br />
       <a href="#">Link 4</a><br />
      </div>
     </div>
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" style="visibility:hidden;" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    </div>
    <div id="taskbar" >
    I want my taskbar at the bottom of the page to fade into view when the page loads.<br />
    
    I also want the start menu button (which is now semi-transparent) to become opaque by fading with javacript<br />
    and/or html when the cursor is placed over it.<br />
    
    When you click on the start menu button, I want it to crossfade into another image and<br />
    display a menu that slides upwards (not dropdown).
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
     TaskBar('taskbar')
     new ImgFade('startmenubutton')
     new Menu('startmenubutton')
    /*]]>*/
    </script>
    </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/

  4. #4
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Omg thank u!!!

  5. #5
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #taskbar {
     width:700px;height:100px;
    }
    
    #startmenubutton {
      position:relative;width:100px;height:50px;
    }
    
    #startmenubutton IMG {
      position:absolute;width:100px;height:50px;
    }
    
    .menu {
      position:absolute;overflow:hidden;visibility:hidden;left:10px;top:-5px;width:100px;height:0px;border:solid black 1px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (01-October-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                     (variable)
    //  parameter 1 = an array defining the start and finish values of the effect.                    (array)
    //                 field 0 the start value. (digits, for opacity minimum 0, maximum 100)
    //                 field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds.     (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.             (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.58K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,fin){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[fin||0];
     return this;
    }
    
    zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    
    function TaskBar(id){
     var obj=document.getElementById(id);
     var oop=new zxcAnimate('opacity',obj);
     oop.update([0,100],1000);
    }
    
    function ImgFade(id,ms){
     var obj=document.getElementById(id);
     var imgs=obj.getElementsByTagName('IMG');
     imgs[0].style.zIndex='1';
     this.bot=new zxcAnimate('opacity',imgs[0],0);
     this.bot.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
       this.bot.obj.style.zIndex='0';
      }
     }
     this.ms=ms||1000;
     this.addevt(obj,'mouseover','Mse',true);
     this.addevt(obj,'mouseout','Mse',false);
    }
    
    ImgFade.prototype.Mse=function(e,ud){
     this.bot.obj.style.visibility='visible';
     this.bot.obj.style.zIndex='2';
     this.bot.update([this.bot.data[0],ud?100:0],this.ms);
    }
    
    ImgFade.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    function Menu(id,ms){
     var obj=document.getElementById(id);
     var menu=obj.getElementsByTagName('DIV')[0];
     this.fin=menu.offsetTop;
     this.max=menu.getElementsByTagName('DIV')[0].offsetHeight;
     this.aheight=new zxcAnimate('height',menu,0);
     this.aheight.Complete=function(){
      if (this.data[0]==0){
       this.obj.style.visibility='hidden';
      }
     }
     this.atop=new zxcAnimate('top',menu,this.fin);
     this.addevt(obj,'mouseover','Mse',true);
     this.addevt(obj,'mouseout','Mse',false);
     this.ms=ms||1000;
    }
    
    Menu.prototype.Mse=function(e,ud){
     this.aheight.obj.style.visibility='visible';
     this.atop.update([this.atop.data[0],ud?this.fin-this.max:this.fin],this.ms);
     this.aheight.update([this.aheight.data[0],ud?this.max:0],this.ms);
    
    }
    
    Menu.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    <div id="startmenubutton" >
     <div class="menu" >
      <div>
       <a href="#">Link 1</a><br />
       <a href="#">Link 2</a><br />
       <a href="#">Link 3</a><br />
       <a href="#">Link 4</a><br />
      </div>
     </div>
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" style="visibility:hidden;" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    </div>
    <div id="taskbar" >
    I want my taskbar at the bottom of the page to fade into view when the page loads.<br />
    
    I also want the start menu button (which is now semi-transparent) to become opaque by fading with javacript<br />
    and/or html when the cursor is placed over it.<br />
    
    When you click on the start menu button, I want it to crossfade into another image and<br />
    display a menu that slides upwards (not dropdown).
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
     TaskBar('taskbar')
     new ImgFade('startmenubutton')
     new Menu('startmenubutton')
    /*]]>*/
    </script>
    </body>
    
    </html>
    Hey, I was just testing out your code but I came across an issue. I'm having trouble adjusting the taskbar and start menu button to both be anchored to the bottom and not change size when the page is put into fullscreen. Could you please help me?

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    please post a link to your page
    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/

  7. #7
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Lightbulb My Codes

    Quote Originally Posted by vwphillips View Post
    please post a link to your page
    I haven't published it to the web yet because I'm still working out bugs. I can show you my html and css code, though.

    <html>
    <head>
    <title>Sky OS- The World's First HTML OS!</title>

    <link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
    <script type="text/javascript" src="dom-drag.js"></script>
    <script type="text/javascript" src="windowfiles/dhtmlwindow.js">

    /***********************************************
    * DHTML Window Widget- Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>
    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>
    <body>

    <a href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'external.htm', 'Ajax Win Title', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false"><img id="example" src="lips.gif" style="position: relative" />

    <script type="text/javascript">
    Drag.init(document.getElementById("example"));
    </script></a>

    <div>
    <img id="background" src="wallpaper.jpg" alt="" title="" GALLERYIMG="no">/> <a href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'external.htm', 'Ajax Win Title', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false"><img id="example" src="lips.gif" style="position: relative" />

    <script type="text/javascript">
    Drag.init(document.getElementById("example"));
    </script></a>

    </div>

    </body>
    </html>


    and


    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    body {font-family:verdana, arial, sans-serif; font-size:76%;}

    #background{position:absolute; z-index:1; width:100%; height:100%;}

    #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}

    #content {padding:5px 300px 20px 200px;}

    p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}

    #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}



    #mc{position:absolute; bottom:0px; left:0px; z-index:1; width:absolute; height:absolute}

  8. #8
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow

    Okay, I got the taskbar to fade in and be anchored to the bottom of the screen. But now I'm having trouble with the startmenubutton. Any ideas?

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    there is not enough information in your posted code, missing scripts and css and ajax html files
    Last edited by vwphillips; 11-11-2009 at 04:47 PM.
    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/

  10. #10
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow

    Quote Originally Posted by vwphillips View Post
    there is not enough information in your posted code, missing scripts and css and ajax html files
    Then you'll have to give me a few days until I can upload it to my web directory.

Bookmarks

Posting Permissions

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