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 15 of 15
  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding Random Variable to Text Rotator

    I have a text rotator on http://cherrylanecollection.com/redesign/index.htm. The javascript source is here: http://cherrylanecollection.com/rede...cripts/Fade.js

    It only rotates through 9 different testimonials. I couldn't figure out where I would need to add the random variable. Can anyone help?

    Let me know if this question clear enough.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Some questons and comments

    Pardon me if this seems like I don't understand, because it is true, I don't!

    You only have 9 testimonials, so how do you expect to see more without adding to the array? The additional entries will go in the 'fade2' array at the end of the 'Fade.js' script.
    Make sure you follow the instructions just above the array.

    What is adding a 'Random Variable' suppose to do. By definition a text rotator usually displays the text in sequence 1....9 and then repeats. In the instructions mentioned above the author stressed the sequence be maintained as whole numbers. See the 'Notes' which says:
    * - The list of messages defined in the fader *must* start at one (1)
    * and count upwards without skipping any integers.
    Finally, if it still doesn't work, describe the errors you are getting and view the error console.

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Oh...

    That question was kinda vague. I want the rotator to display a random testimonial. Would the code have to completely reworked?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Smile Try this ...

    I'm having trouble loading your 'index.htm' file on my computer, so this is just something to try:
    PHP Code:
    var hash = new Array();
    function 
    throb(item) {
      
    item Math.round(Math.random()*9) * 2;  // change 9 to number of messages available

      // If the hash array does not have an entry for this item, initialise it at 2
      
    if (!hash[item]) hash[item] = 2;

      
    // Send a fade command using the hash array to tell us what parameters we should use
      
    fader[item].fade(Math.floor(hash[item] / 2), !(hash[item] % 2));

      
    // Call this function again for this same item after a certain amount of time
      
    setTimeout(function() { throb(item); }, (hash[item] % 2) ? 100 15000);

      
    // If we have exceeded the number of messages in this fader, start over again at 2
      
    if (++hash[item] > fader[item].msg.length 1hash[item] = 2;

    It's the smallest change to your code I could think of.
    Let us know what happens.

  • #5
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That didn't work. Thanks for trying to help! It is much appreciated. That was a good idea though. What else could I try? I'm very inexperienced with Javascript.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question More questions ...

    Quote Originally Posted by thealexbaron View Post
    That didn't work. Thanks for trying to help! It is much appreciated. That was a good idea though. What else could I try? I'm very inexperienced with Javascript.

    So what happened? What didn't work? Did you receive or check on any error messages? Do you get the same results in different browsers?

    If you don't show us what you did, it becomes very difficult to tell you what to try next!
    Post your script or a link where the test script resides.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (04-October-2008) DRAFT
    // 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.
    
    // **** 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.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     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  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var TextAry=[]
    TextAry[0]='Text 0';
    TextAry[1]='Text 1';
    TextAry[2]='Text 2';
    
    
    function Fade(id,ary){
     var obj=document.getElementById(id);
     if (!obj.set){
      obj.set=true;
      obj.nu=0;
     }
     zxcBAnimator('opacity#',obj,0,100,1000);
     var nnu=Math.floor(Math.random()*ary.length);
     var txt=ary[Math.floor(Math.random()*ary.length)];
     while (obj.nu==nnu) nnu=Math.floor(Math.random()*ary.length);
     obj.nu=nnu;
     obj.innerHTML=ary[nnu];
     setTimeout(function(){ zxcBAnimator('opacity#',obj,0,100,1000); },2000);
     setTimeout(function(){ Fade(id,ary); },4000);
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="Fade('tst',TextAry);">
    <div id="tst" style="width:100px;height:100px;background-Color:#FFFFCC;" ></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/

  • #8
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Sweet!

    Thanks a lot! I haven't tried this out, yet, but I will on Monday.

    As for the last post- I apologize for not specifying; I didn't really know what was wrong, even in the least!

  • #9
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks!

    I couldn't wait until monday! It works perfectly! Thank you so much!

  • #10
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have a new problem. I got the text rotator working the way I want it to, but now it occasionally says, "undefined". I'm not sure why it's doing this! You can see the text rotator here: http://cherrylanecollection.com

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    I tested for a while and seemed fine

    is 'undefined' an error alert of displayed in the message box

    if it is an error alert please specify the error line

    but you could try

    Code:
    function Fade(id,ary){
     var obj=document.getElementById(id);
     if (!obj.set){
      obj.set=true;
      obj.nu=0;
     }
     zxcBAnimator('opacity#',obj,0,100,100);
     var nnu=Math.floor(Math.random()*ary.length);
     while (obj.nu==nnu||!ary[nnu]) nnu=Math.floor(Math.random()*ary.length);
     obj.nu=nnu;
     obj.innerHTML=ary[nnu];
     setTimeout(function(){ zxcBAnimator('opacity#',obj,0,100,1000); },200);
     setTimeout(function(){ Fade(id,ary); },400);
    }
    Last edited by vwphillips; 10-06-2008 at 05:06 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/

  • Users who have thanked vwphillips for this post:

    thealexbaron (10-07-2008)

  • #12
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Again..

    Again, you have helped solve my problem. This worked perfectly. Thank you so much for your help.

  • #13
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New Problem...

    I cannot figure out how to change the length of time for it to stay on each message. I tried changing all of the different numbers, and it never came out quite right- no errors.

  • #14
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    does this make it easier?
    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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (04-October-2008) DRAFT
    // 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.
    
    // **** 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.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     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]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var TextAry=[]
    TextAry[0]='Text 0';
    TextAry[1]='Text 1';
    TextAry[2]='Text 2';
    
    
    function Fade(id,ary,zxcspd,zxchold){
     var obj=document.getElementById(id);
     if (!obj.nu) obj.nu=0;
     var nnu=Math.floor(Math.random()*ary.length);
     while (obj.nu==nnu||!ary[nnu]) nnu=Math.floor(Math.random()*ary.length);
     obj.nu=nnu;
     zxcBAnimator('opacity#',obj,0,100,zxcspd);
     obj.innerHTML=ary[nnu];
     setTimeout(function(){ zxcBAnimator('opacity#',obj,0,100,zxcspd); },zxchold);
     setTimeout(function(){ Fade(id,ary,zxcspd,zxchold); },zxchold+zxcspd*2);
    }
    /*]]>*/
    </script></head>
    
    <body onload="Fade('tst',TextAry,1000,6000);">
    <div id="tst" style="width:100px;height:100px;background-Color:#FFFFCC;" >33</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/

  • #15
    New Coder
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Oh..

    Wow. I didn't realize that I needed to change that stuff in the body!

    Thanks so much for the help! I am doing some Javascript tutorials, so that I can eventually figure out my own problems, and possibly help other people, too. Thanks again.


  •  

    Posting Permissions

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