Results 1 to 8 of 8

Thread: How to rotate a Div after 30 seconds

  1. #1
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default How to rotate a Div after 30 seconds

    I have a two <divs> and want rotate them.
    For example, at the start of the page i want activate one div & its content and then in 30 seconds i want activate content of 2nd div while hiding the earlier div.

    For example:
    Code:
    <div id="div1">
    <p>some txt & image </p> </div>
    
    <div id="div1">
    <p>some txt & image </p> </div>
    Can i do this with JavaScript function?
    The problem is, while there are onload, onClick functions,
    there is no function thats to be called on 30 seconds after load etc.

    I appreciate any help.
    Last edited by Snookerman; 04-28-2009 at 07:33 PM. Reason: fixed [/code] tag

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Javascript provides both the setTimeout() and setInterval() methods (Google them for more info). For example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function rotateDivs(){
     rotateDivs.flag = !rotateDivs.flag;
     if(rotateDivs.flag){
      document.getElementById('div1').style.display = 'none';
      document.getElementById('div2').style.display = '';
     }
     else {
      document.getElementById('div1').style.display = '';
      document.getElementById('div2').style.display = 'none';
     }
    }
    onload = function(){
     setInterval(rotateDivs, 30000);
    };
    </script>
    </head>
    <body>
    <div id="div1">
    <p>some txt1 & image </p> </div>
    <div id="div2" style="display: none;">
    <p>some txt2 & image </p> </div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    developer_MA (05-14-2009)

  4. #3
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks John for the input.
    In playing with this, onething i run into is:
    can't you set the opacity of element via javaScript function.

    <script type="text/javascript">
    //call rorate function but this case set the opacity
    functionX(elementID);

    </script>

    functionX(elementID)
    {
    elementID.style.opacity=0;
    elementID.filters.alpha.opacity=100";

    }

  5. #4
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    try:
    Code:
    elementID.filters="alpha(opacity=100)";
    more info here: http://www.quirksmode.org/js/opacity.html
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  6. The Following User Says Thank You to Master_script_maker For This Useful Post:

    developer_MA (05-14-2009)

  7. #5
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How can I add extra dive tags to the ones already on the code. I also want to know if it is possible to manually rotate the divs instead of setting the time. I also tried Featured Content Slider v2.4 it doesn't seem to work for me since when I put audio files in different frames, the previous hidden frame continues to play the audio. Pls help

  8. #6
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to rotate multiple divs

    1. I want to rotate multiple divs on one page, each has varying amount of info, so I want the user to manually rotate the content instead of setting a timer.

    2. Since other layers have audio files, how can I automatically stop the audio once the div is hidden? I tried Featured Content Slider v2.4 but I could not see where to put the code for stopping the hidden audio.

    3. Finally, is it possible to fade the divs as they rotate just like the frames in the previous link?

    I am very new to these things so when javascript codes come in little segments I usually don't know how to fit it into the main script.

  9. #7
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for those who responded. I'm still playing with this.
    One problem i run into is:
    I have two divs that i'm rotating
    background info
    <div1> image & txt </div>

    <div2> image & txt </div>

    I'm able to rotate them using setTimeout() or setInterval() but becuase div1 is above div2, when i display div2, its being showin in its location(below div1).
    What i want achieve is: rotate this divs in the same location in the page.

    I have looked at the existing scripts and i need heavy customization which is why its easier to build them & understand them.

  10. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    
    #tst {
      position:relative;width:200px;height:180px;border:solid black 1px;
    }
    
    #tst .div {
      position:absolute;left:0px;top:0px;width:200px;height:180px;background-Color:#FFFFCC;text-Align:center;
    }
    
    </style>
    
    
    <script type="text/javascript">
    
    function Rotate(id,ms,ud){
     var frames=document.getElementById(id).getElementsByTagName('DIV');
     if (ud){
      frames[0].style.zIndex='0';
      frames[1].style.zIndex='1';
     }
     else {
      frames[0].style.zIndex='1';
      frames[1].style.zIndex='0';
     }
     ud=!ud;
     setTimeout(function(){ Rotate(id,ms,ud); },ms);
    }
    
    </script>
    
    
    </head>
    
    <body onload="Rotate('tst',2000,true);">
    <div id="tst" >
    <div class="div" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
    
     Some Text 1
     </div>
    <div class="div" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
    
     Some Text 2
     </div>
    </div>
    </body>
    
    </html>
    or

    Code:
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    
    #tst {
      position:relative;width:200px;height:180px;
    }
    
    #tst .div {
      position:absolute;left:0px;top:0px;width:200px;height:180px;background-Color:#FFFFCC;text-Align:center;
    }
    
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (14-May-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 and an optional 'Bounce'.
    
    // **** 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('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    //  parameter 0 = the mode(see Note 2).                                                                     (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)
    //  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    //  parameter 6 = (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:  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.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //  Note 6: parameters 2 and 3 must be different values to execute the script.
    //
    
    // **** Advanced Applications
    //
    //  Calling function 'zxcBAnimator' returns the instance of the script,
    //  this may be assigned to a variable and used to access the current value of the effect or to control the effect.
    //  alternatively the script instance by elementobject[mode.replace(/\W/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 [instance].data as fields 0, 1 and 2 respectively where [instance] is the instance of the script.
    //
    //  Once initialised the effect may be updated by calling function
    //  [instance].update([100,200])
    //  where:
    //   parameter 0 = an array defining the start and finish values.                                            (array)
    //                  field[0] =the start position of the effect.   (digits, for opacity minimum 0, maximum 100)
    //                  field[0] = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
    //   parameter 1 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //   parameter 2 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                   field 0 the minimum. (digits)
    //                   field 1 the maximum. (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.
    //
    // ** Bounce
    //   A 'bounce' effect may be applied by assigning the script instance property 'Bounce' an array
    //   defining the 'bounce' properties.
    //   e.g.
    //   [instance].Bounce=[100,90,4,200];
    //   where:
    //    field[0] = the 'bounce' maximum.  (digits)
    //    field[1] = the 'bounce' minimum.  (digits)
    //    field[2] = the number of bounces. (digits)
    //    field[3] = the 'bounce' duration. (digits)
    //
    
    
    // **** General
    //
    // Function 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 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms,scale,curve);
     }
     else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
     return oop;
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     clearTimeout(this.to);
     this.time=ms||this.time||2000;
     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.ms=this.mS;
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     this.ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
     this.apply();
     if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Bounce&&this.Bounce[2]>0) this.bounce();
     }
    }
    
    zxcBAnimatorOOP.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]);
     }
    }
    
    zxcBAnimatorOOP.prototype.bounce=function(){
     if (this.Bounce[2]%2==0)
     this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
     this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
     this.Bounce[2]--;
    }
    
    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">
    
    function Rotate(id,ms,ud){
     var frames=document.getElementById(id).getElementsByTagName('DIV');
     zxcBAnimator('opacity#',frames[1],100,0,ms/2);
     zxcBAnimator('opacity#',frames[0],0,100,ms/2);
     frames[0].style.zIndex=ud?'0':'1';
     frames[1].style.zIndex=ud?'1':'0';
     ud=!ud;
     setTimeout(function(){ Rotate(id,ms,ud); },ms);
    }
    
    </script>
    
    
    </head>
    
    <body onload="Rotate('tst',2000,true);">
    <div id="tst" >
    <div class="div" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
    
     Some Text 1
     </div>
    <div class="div" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
    
     Some Text 2
     </div>
    </div>
    </body>
    
    </html>

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
  •