www.webdeveloper.com
Results 1 to 5 of 5

Thread: is it possible to make a half-size <br /> in my javascript rotating text with fade-in

  1. #1
    Join Date
    Nov 2013
    Posts
    9

    is it possible to make a half-size <br /> in my javascript rotating text with fade-in

    I built a rotating text with fade in from code i found on the web, i only have a basic code understanding, enough to modify and understand roughly what each bit is doing - but not to write anything complex.

    quotation[2] needs three lines and others only two, so it moves the site below up and down as it rotates. is there anyway to set a half
    in this code so i can have a half space above and below the sentence? or to centre the third quote only.

    i tried a css with span 0.5em method, but the span wouldnt work inside the rest of this code.

    thanks

    (site is www.focallocal.org)

    <DIV id=textrotator style="FONT: 18px arial ; text-align:centre; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>
    <body bgcolor="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0">
    <script type = "text/javascript">
    var hexinput = 255; // initial color value.

    quotation = new Array()
    quotation[0] = "<br />A simple and fun way to make the world and your community a happier, more connected place in your free time<br /><br />"
    quotation[1] = "<br />Discover how you can shape the world in your spare time through Collective Action<br /><br />"
    quotation[2] = "Bringing people and their communities closer together and dealing with serious societal issues in a constructive, light-hearted, adventurous and enjoyable way"

    function fadingtext()
    {
    if(hexinput >111)
    {
    hexinput -=11; // increase color value
    document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
    setTimeout("fadingtext()",300); // 300ms per step
    }
    else
    {
    hexinput = 255; //reset hex value
    }
    }

    var which = 0;

    function changetext()
    {
    which += 1;
    if (which >= quotation.length)
    {
    which = 0;
    }

    document.getElementById("textrotator").innerHTML = quotation[which];

    fadingtext();

    setTimeout("changetext()",8000);
    }

    window.onload = changetext();
    </script></div>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    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[*/
    
    #tst {
      position:relative;left:100px;top:100px;width:600px;height:100px;border:solid red 1px;
    }
    
    .text {
      position:relative;top:20px;color:#FFFFFF;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="Next" onmouseup="zxcColorAnimator.Next('tst',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcColorAnimator.Next('tst',-1);" />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcColorAnimator.GoTo('tst',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcColorAnimator.GoTo('tst',1);" />
     <input id="b4" type="button" name="" value="GoTo 2" onmouseup="zxcColorAnimator.GoTo('tst',2);" />
     <input id="mess" />
    
     <div id="tst" >
      <div class="text" ></div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Message Color Animator. (26-November-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcColorAnimator={
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      this.Pause(id)
      if (o&&o.ary[n]&&n!=o.n){
       o.ud=n>o.nu?1:-1;
       this.rotate(o,n);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     init:function(o){
      var id=o.ParentID,m=o.Mode,sc=o.StartColor,fc=o.FinishColor,ary=o.HTMLArray,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,ctr=o.Center,add=o.AddEvents,obj=document.getElementById(id),d=obj.getElementsByTagName('DIV')[0],sc=this.hexrgb(sc),fc=this.hexrgb(fc);
      if (d&&sc&&fc&&ary instanceof Array){
       var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='B'?'backgroundColor':'color',z0=0;
       d.innerHTML=ary[0];
       o.id=id;
       o.obj=obj;
       o.d=d;
       o.sc=sc;
       o.fc=fc;
       o.ary=ary;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       o.c=[obj,m,sc,fc];
       o.n=0;
       o.ud=1;
       o.lgth=o.ary.length-1;
       o.ctr=ctr===true;
       o.ctr?o.d.style.top=(o.obj.offsetHeight-o.d.offsetHeight)/2+'px':null;
       this.cng(o,sc.concat());
       if (add instanceof Array){
        for (;z0<add.length;z0++){
         if (add[z0]&&add[z0][0]){
          d=document.getElementById(add[z0][0]);
          if (d&&this[add[z0][2]]){
           m=add[z0][1];
           this.addevt(d,m=='click'||m=='mouseover'||m=='mouseout'||m=='mousedown'?m:'mouseup',add[z0][2],id,add[z0][3]);
          }
         }
        }
       }
       this['zxc'+id]=o;
       typeof(o.OnChange)=='function'?o.OnChange(o,o.n):null;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,o.h):null;
      }
     },
    
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      this.animate(o,o.c,o.c[4],o.c[3],new Date(),o.ms,o.auto?true:a);
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=[],z0=0;
      for (var z0=0;z0<3;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?n[z0]:t[z0];
      }
      this.cng(o,n);
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       this.cng(o,t.concat());
       if (ud===true||typeof(ud)=='number'){
        n=o.auto?o.n+o.ud:ud;
        n=n>o.lgth?0:n<0?o.lgth:n;
         if (o.ary[n]){
         o.n=n;
         o.d.innerHTML=o.ary[n];
         o.ctr?o.d.style.top=(o.obj.offsetHeight-o.d.offsetHeight)/2+'px':null;
         typeof(o.OnChange)=='function'?o.OnChange(o,n):null;
         this.animate(o,o.c,o.c[4],o.c[2],new Date(),o.ms,false);
        }
       }
       else if (o.auto){
        oop.Auto(o.id,o.h);
       }
      }
     },
    
     cng:function(o,c){
      o.c[0].style[o.c[1]]='rgb('+c[0]+','+c[1]+','+c[2]+')';
      o.c[4]=c
     },
    
     hexrgb:function(c){
      if (typeof(c)=='string'){
       if (c.length==7&&c.charAt(0)=='#'){
       return [parseInt(c.substring(1,3),16),parseInt(c.substring(3,5),16),parseInt(c.substring(5,7),16)];
       }
      }
      return false;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcColorAnimator.init({
     ParentID:'tst',         // the unique ID name of the parent DIV.                                 (string)
     StartColor:'#FFCC66',   // the fade in color.                                                    (string)
     FinishColor:'#FFFFFF',  // the fade out color.                                                   (string)
     HTMLArray:[             // an array defining the messages html.                                  (array)
      'A simple and fun way to make the world and your community a happier, more connected place in your free time',
      'Discover how you can shape the world in your spare time through Collective Action<br />',
      'Bringing people and their communities closer together and dealing with serious societal issues in a constructive, light-hearted, adventurous and enjoyable way'
     ],
     Mode:'backgroundColor', //(optional) the color mode, 'C' or 'color' or 'B' or 'backgroundColor'. (string, default = 'color')
     Animate:1000,           //(optional) the animation duration in millisec.                         (number, default = 1000)
    
     AutoHold:1000,          //(optional) the auto rotate  in millisec 'hold' delay in millisec.      (number, default = Animate*4)
     AutoStart:1000,         //(optional) the auto rotate  start delay in millisec.                   (number, default = no auto start)
     Center:false,           //(optional) true = center the text in the parent DIV.                   (number, default = the CSS position of the nested DIV)
     AddEvents:[             //(optional) an array defining the event calls to add to page elements.  (number, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function name.
      // field 3 = the parameter to pass top the function.
      ['tst','mouseover','Pause',null],
      ['tst','mouseout','Auto',null],
      ['b4','mouseup','GoTo',2]
     ],
     OnChange:function(o,n){ //(optional) a function to call when the message changes.               (function, default = no function)
      // o = the script instance
      // n = the current message index number
      document.getElementById('mess').value='message '+n;  // example use
     }
    });
    /*]]>*/
    </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
    Nov 2013
    Posts
    9
    thanks very much for your reply.

    as i said i'm not great at web dev and the top part of your code is tripping me up as i'm not sure how to add that part into its host page (.php) without interfering with the other code.

    here's the full code for the page, it'd be a huge help if you could drop your code into it (its the header.php file from a wordpress install). the text rotator is halfway down.

    <?php
    /**
    * Title: Header template.
    *
    * Description: Defines header content.
    *
    * Please do not edit this file. This file is part of the Cyber Chimps Framework and all modifications
    * should be made in a child theme.
    *
    * @category Cyber Chimps Framework
    * @package Framework
    * @since 1.0
    * @author CyberChimps
    * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
    * @link http://www.cyberchimps.com/
    */
    ?>
    <!DOCTYPE html>
    <!--[if lt IE 7]>
    <html class="ie ie6 lte9 lte8 lte7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html class="ie ie7 lte9 lte8 lte7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8 lte9 lte8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 9]>
    <html class="ie ie9" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if gt IE 9]> <html <?php language_attributes(); ?>> <![endif]-->
    <!--[if !IE]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />

    <title><?php wp_title(''); ?></title>

    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    <!-- IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/inc/js/html5.js" type="text/javascript"></script>
    <![endif]-->

    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <div class="container">

    <?php do_action('cyberchimps_before_wrapper'); ?>

    <div id="wrapper" class="container-fluid">
    <!-- kash ed -->
    <header id="cc-header" class="row-fluid">
    <div class="span3 focallogo">
    <div id="logo">
    <a title="" href="http://focallocal.org/"><img alt="logo" src="http://focallocal.org/wp-content/uploads/2013/02/logo-focallocal.png"></a>
    </div>
    </div>

    <div class="span7 frontpageabout">
    <DIV id=textrotator style="FONT: 18px arial ; text-align:centre; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>
    <body bgcolor="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0">
    <script type = "text/javascript">
    var hexinput = 255; // initial color value.

    quotation = new Array()
    quotation[0] = "<br />A simple and fun way to make the world and your community a happier, more connected place in your free time<br /><br />"
    quotation[1] = "<br />Discover how you can shape the world in your spare time through Collective Action<br /><br />"
    quotation[2] = "Bringing people and their communities closer together and dealing with serious societal issues in a constructive, light-hearted, adventurous and enjoyable way"

    function fadingtext()
    {
    if(hexinput >111)
    {
    hexinput -=11; // increase color value
    document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
    setTimeout("fadingtext()",300); // 300ms per step
    }
    else
    {
    hexinput = 255; //reset hex value
    }
    }

    var which = 0;

    function changetext()
    {
    which += 1;
    if (which >= quotation.length)
    {
    which = 0;
    }

    document.getElementById("textrotator").innerHTML = quotation[which];

    fadingtext();

    setTimeout("changetext()",8000);
    }

    window.onload = changetext();
    </script></div>


    <div id="register" class="span2">

    <div id="social">
    <div class="icons">
    <a href="https://twitter.com/Focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/twitter.png" alt="Twitter"></a><a href="https://www.facebook.com/andyat.focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/facebook.png" alt="Facebook"></a><a href="http://www.google.com/" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/gplus.png" alt="Google"></a><a href="http://www.youtube.com/Focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/youtube.png" alt="YouTube"></a><a href="mailto:contact@focallocal.org"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/email.png" alt="Email"></a> </div>
    </div>

    </div>
    </header>

    <!-- kash ed -->

    <nav id="navigation" class="row-fluid" role="navigation">
    <div class="main-navigation navbar">
    <div class="navbar-inner">
    <div class="container">
    <?php /* hide collapsing menu if not responsive */
    if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
    <div class="nav-collapse collapse">
    <?php endif; ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav', 'walker' => new cyberchimps_walker(), 'fallback_cb' => 'cyberchimps_fallback_menu' ) ); ?>

    <?php if( cyberchimps_get_option( 'searchbar', 1 ) == "1" ) : ?>
    <div class="menu-searchbar">
    <?php get_search_form(); ?>
    </div>
    <?php endif; ?>
    <?php /* hide collapsing menu if not responsive */
    if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
    </div><!-- collapse -->

    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>
    <?php endif; ?>
    </div><!-- container -->
    </div><!-- .navbar-inner .row-fluid -->
    </div><!-- main-navigation navbar -->
    </nav><!-- #navigation -->

    <?php do_action('cyberchimps_after_navigation'); ?>

  4. #4
    Join Date
    Nov 2013
    Posts
    9
    thanks very much for your reply.

    as i said i'm not great at web dev and the top part of your code is tripping me up as i'm not sure how to add that part into its host page (.php) without interfering with the other code.

    here's the full code for the page, it'd be a huge help if you could drop your code into it (its the header.php file from a wordpress install). the text rotator is halfway down.

    Code:
    <?php
    /**
     * Title: Header template.
     *
     * Description: Defines header content.
     *
     * Please do not edit this file. This file is part of the Cyber Chimps Framework and all modifications
     * should be made in a child theme.
     *
     * @category Cyber Chimps Framework
     * @package  Framework
     * @since    1.0
     * @author   CyberChimps
     * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
     * @link     http://www.cyberchimps.com/
     */
    ?>
    <!DOCTYPE html>
    <!--[if lt IE 7]>
    <html class="ie ie6 lte9 lte8 lte7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html class="ie ie7 lte9 lte8 lte7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8 lte9 lte8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 9]>
    <html class="ie ie9" <?php language_attributes(); ?>> 
    <![endif]-->
    <!--[if gt IE 9]>  <html <?php language_attributes(); ?>> <![endif]-->
    <!--[if !IE]><!--> 
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>" />
    	<meta name="viewport" content="width=device-width" />
    	
    	<title><?php wp_title(''); ?></title>
    	
    	<link rel="profile" href="http://gmpg.org/xfn/11" />
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    	
    	<!-- IE6-8 support of HTML5 elements -->
    	<!--[if lt IE 9]>
    		<script src="<?php echo get_template_directory_uri(); ?>/inc/js/html5.js" type="text/javascript"></script>
    	<![endif]-->
    	
    	<?php wp_head(); ?>
    </head>
    
    
    <body <?php body_class(); ?>>
    
    
    <div class="container">
    	
    <?php do_action('cyberchimps_before_wrapper'); ?>
    
    
    <div id="wrapper" class="container-fluid">	
    <!-- kash ed -->
    	<header id="cc-header" class="row-fluid">
    		<div class="span3 focallogo">			
    		<div id="logo">
    			<a title="" href="http://focallocal.org/"><img alt="logo" src="http://focallocal.org/wp-content/uploads/2013/02/logo-focallocal.png"></a>
    		</div>
    		</div>
    
    
    		<div class="span7 frontpageabout">
      <DIV id=textrotator style="FONT: 18px arial ; text-align:centre; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>
      <body bgcolor="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0">
      <script type = "text/javascript">
        var hexinput = 255; // initial color value.
    
    
        quotation = new Array()
        quotation[0] = "<br />A simple and fun way to make the world and your community a happier, more connected place in your free time<br /><br />" 
        quotation[1] = "<br />Discover how you can shape the world in your spare time through Collective Action<br /><br />"
        quotation[2] = "Bringing people and their communities closer together and dealing with serious societal issues in a constructive, light-hearted, adventurous and enjoyable way"
    
    
        function fadingtext()
        { 
          if(hexinput >111) 
          { 
            hexinput -=11; // increase color value
            document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
            setTimeout("fadingtext()",300); // 300ms per step
          }
          else 
          {
            hexinput = 255; //reset hex value
          }
        }
    
    
     var which = 0;
    
    
    function changetext()
    {
        which += 1; 
        if (which >= quotation.length)
        {
            which = 0;
        }
    
    
        document.getElementById("textrotator").innerHTML = quotation[which]; 
    
    
        fadingtext();
    
    
        setTimeout("changetext()",8000);
    }
    
    
        window.onload = changetext();
      </script></div>
    		
    		
    		<div id="register" class="span2">
    				
    	<div id="social">
    		<div class="icons">
    			<a href="https://twitter.com/Focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/twitter.png" alt="Twitter"></a><a href="https://www.facebook.com/andyat.focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/facebook.png" alt="Facebook"></a><a href="http://www.google.com/" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/gplus.png" alt="Google"></a><a href="http://www.youtube.com/Focallocal" target="_blank"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/youtube.png" alt="YouTube"></a><a href="mailto:contact@focallocal.org"><img src="http://focallocal.org/wp-content/themes/response/cyberchimps/lib/images/social/legacy/email.png" alt="Email"></a>		</div>
    	</div>
    	
    		</div>
    	</header>
    
    
    <!-- kash ed -->	
    
    
    	<nav id="navigation" class="row-fluid" role="navigation">
          <div class="main-navigation navbar">
            <div class="navbar-inner">
            	<div class="container">
              <?php /* hide collapsing menu if not responsive */
    						if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
      					<div class="nav-collapse collapse">
                <?php endif; ?>
              		<?php wp_nav_menu( array( 'theme_location'  => 'primary', 'menu_class' => 'nav', 'walker' => new cyberchimps_walker(), 'fallback_cb' => 'cyberchimps_fallback_menu' ) ); ?>
    			
    			<?php if( cyberchimps_get_option( 'searchbar', 1 ) == "1" ) : ?>
    				<div class="menu-searchbar">
    					<?php get_search_form(); ?>
    				</div>
          <?php endif; ?>
          <?php /* hide collapsing menu if not responsive */
    						if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
    			</div><!-- collapse -->
    			
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </a>
          <?php endif; ?>
              </div><!-- container -->
            </div><!-- .navbar-inner .row-fluid -->
          </div><!-- main-navigation navbar -->
    	</nav><!-- #navigation -->
    	
    	<?php do_action('cyberchimps_after_navigation'); ?>

  5. #5
    Join Date
    Nov 2013
    Posts
    9
    i dont understand how i would fit this part into my page

    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[*/
    
    #tst {
      position:relative;left:100px;top:100px;width:600px;height:100px;border:solid red 1px;
    }
    
    .text {
      position:relative;top:20px;color:#FFFFFF;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="Next" onmouseup="zxcColorAnimator.Next('tst',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcColorAnimator.Next('tst',-1);" />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcColorAnimator.GoTo('tst',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcColorAnimator.GoTo('tst',1);" />
     <input id="b4" type="button" name="" value="GoTo 2" onmouseup="zxcColorAnimator.GoTo('tst',2);" />
     <input id="mess" />
    
     <div id="tst" >
      <div class="text" ></div>
     </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles