PDA

View Full Version : How to rotate a Div after 30 seconds



developer_MA
04-28-2009, 07:11 PM
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:


<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.

jscheuer1
04-28-2009, 09:50 PM
Javascript provides both the setTimeout() and setInterval() methods (Google them for more info). For example:


<!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>

developer_MA
04-29-2009, 08:39 PM
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";

}

Master_script_maker
04-29-2009, 09:26 PM
try:
elementID.filters="alpha(opacity=100)";
more info here: http://www.quirksmode.org/js/opacity.html

cmd
05-11-2009, 03:08 AM
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 (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm) 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:confused::confused:

cmd
05-11-2009, 03:24 AM
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 (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm) 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.

developer_MA
05-14-2009, 05:53 PM
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.

vwphillips
05-15-2009, 09:44 AM
<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




<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>