randomize slide every time

**naveen.brite** · 04-12-2010, 09:06 AM

Hi,

I have a sent of text which scrolls on clicking a next button. And it is a
infinite loop. What i need is that every time the page is visited the text must show random text... as of now by default it show text1.... paragraph...

But my need is that the starting text is randomized and also has a infinite cycle as it is now....
Please help me as it is urgent..
Thank you very much in advance...

The script is attached in txt file... and also give below

<!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>
<link href="../style.css" rel="stylesheet" type="text/css" />


<style type="text/css">
/*<![CDATA[*/
.sectiont {
width:365px;float:left;
}

.sectiont IMG{
border-Width:0px;
}

#contentt {
position:absolute;left:0px;top:0px;width:10000px;
}
#my-glider3{margin-left:10px;}
#scrollert {
position:relative;overflow:hidden;left:0px;width:365px;height:128px; }

/*]]>*/
</style>
</head>

<body style="background:#f5f1e5;">
<div class="bot_box">

<div id="my-glider3">
<div id="scrollert">
<div id="contentt">
<div class="sectiont">
<p class="testi">text1 text1 text1 text1 <br />
text1 text1 text1 text1 <br />
text1 text1 text1 text1 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
</div>
<div class="sectiont">
<p class="testi">text2 text2 text2 text2 <br />
text2 text2 text2 text2 <br />
text2 text2 text2 text2 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
</div>
<div class="sectiont">
<p class="testi">text3 text3 text3 text3 text3 <br />
text3 text3 text3 text3 text3 <br />
text3 text3 text3 text3 text3 text3 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
</div>
<div class="sectiont">
<p class="testi">text4 text4 text4 text4 text4 text4 text4 <br />
text4 text4 text4 text4 text4 <br />
text4 text4 text4 text4 text4 text4 text4 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
</div>
<div class="sectiont">
<p class="testi">text5 text5 text5 text5 text5 text5 <br />
text5 text5 text5 text5 <br />
text5 text5 text5 text5 text5 text5 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
</div>
</div>
</div>
</div>
<font onclick="S.Slide2(-365);" class="movebutton2" />Next</font></a>
</div>

<script type="text/javascript">

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(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')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]

this.c=='c')?this.data[2]-(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.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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 scrollert(o){
var s1=document.getElementById(o.ID);
var clds=s1.childNodes;
var lst=clds[clds.length-1];
while (lst.nodeType==3){
lst=lst.previousSibling;
}
var w=lst.offsetLeft+lst.offsetWidth;
s1.style.width=w+'px';
s1.style.left='0px';
var s2=s1.cloneNode(true);
s1.parentNode.appendChild(s2);
var s3=s1.cloneNode(true);
s1.parentNode.appendChild(s3);
this.slides=[s1,s2,s3];
this.slides[0]=new zxcAnimate('left',s1,0);
this.slides[0].run=true;
this.slides[0].Complete=function(){
this.run=true;
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.slides[1]=new zxcAnimate('left',s2,w);
this.slides[1].Complete=function(){
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.slides[2]=new zxcAnimate('left',s3,-w);
this.slides[2].Complete=function(){
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.ms=o.Duration||1000;
}

scrollert.prototype.Slide2=function(ud){
if (this.slides[0].run){
this.slides[0].run=false;
for (var z0=0;z0<this.slides.length;z0++){
this.slides[z0].animate(this.slides[z0].data[0],this.slides[z0].data[0]+ud,this.ms);
}
}
}

var S=new scrollert({
ID:'contentt',
Duration:1000
});
/*]]>*/
</script>

</body>

</html>

**vwphillips** · 04-12-2010, 10:09 AM

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>
  <link href="../style.css" rel="stylesheet" type="text/css" />
 <!--[if IE 6]>
<link href="iebug.css" rel="stylesheet" type="text/css" />
<![endif]-->

<style type="text/css">
/*<![CDATA[*/
.sectiont {
  width:365px;float:left;
}

.sectiont IMG{
  border-Width:0px;
}

#contentt {
  position:absolute;left:0px;top:0px;width:10000px;
}
#my-glider3{margin-left:10px;}
#scrollert {
  position:relative;overflow:hidden;left:0px;width:365px;height:128px;    }

/*]]>*/
</style>
</head>

<body style="background:#f5f1e5;">
<div class="bot_box">

 <div id="my-glider3">
  <div id="scrollert">
	<div id="contentt">
	 <div class="sectiont">
		<p class="testi">text1 text1 text1 text1  <br />
text1 text1 text1 text1 <br />
text1 text1 text1 text1 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
	 </div>
	 <div class="sectiont">
	  	<p class="testi">text2 text2 text2 text2 <br />
text2 text2 text2 text2  <br />
text2 text2 text2 text2 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
	 </div>
     <div class="sectiont">
		<p class="testi">text3 text3 text3 text3 text3 <br />
text3 text3 text3 text3 text3 <br />
text3 text3 text3 text3 text3 text3 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
	 </div>
	 <div class="sectiont">
		<p class="testi">text4 text4 text4 text4 text4 text4 text4 <br />
text4 text4 text4 text4 text4  <br />
text4 text4 text4 text4 text4 text4 text4 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
     </div>
     <div class="sectiont">
	  	<p class="testi">text5 text5 text5 text5 text5 text5 <br />
text5 text5 text5 text5  <br />
text5 text5 text5 text5 text5 text5 <br />
<i>Cheryl F. - Santa Cruz, CA</i></p>
     </div>
   	</div>
   </div>
  </div>
  	<font onclick="S.Slide2(-365);" class="movebutton2" />Next</font></a>
</div>


<script type="text/javascript">

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(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')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(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.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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 scrollert(o){
 var s1=document.getElementById(o.ID);
 var clds=s1.childNodes;
 var lst=clds[clds.length-1];
 while (lst.nodeType==3){
  lst=lst.previousSibling;
 }
 var w=lst.offsetLeft+lst.offsetWidth;
 s1.style.width=w+'px';
 s1.style.left='0px';
 var s2=s1.cloneNode(true);
 s1.parentNode.appendChild(s2);
 var s3=s1.cloneNode(true);
 s1.parentNode.appendChild(s3);
 this.slides=[s1,s2,s3];
 this.slides[0]=new zxcAnimate('left',s1,0);
 this.slides[0].run=true;
 this.slides[0].Complete=function(){
   this.run=true;
   if (this.data[0]<-w){
    this.data[0]+=w*3;
   }
   if (this.data[0]>w){
    this.data[0]-=w*3;
   }
  }
 this.slides[1]=new zxcAnimate('left',s2,w);
 this.slides[1].Complete=function(){
   if (this.data[0]<-w){
    this.data[0]+=w*3;
   }
   if (this.data[0]>w){
    this.data[0]-=w*3;
   }
  }
 this.slides[2]=new zxcAnimate('left',s3,-w);
 this.slides[2].Complete=function(){
   if (this.data[0]<-w){
    this.data[0]+=w*3;
   }
   if (this.data[0]>w){
    this.data[0]-=w*3;
   }
  }
 this.ms=o.Duration||1000;
}

scrollert.prototype.Slide2=function(ud){
 if (this.slides[0].run){
  this.slides[0].run=false;
  for (var z0=0;z0<this.slides.length;z0++){
   this.slides[z0].animate(this.slides[z0].data[0],this.slides[z0].data[0]+ud,this.ms);
  }
 }
}

function Randomise(id,cls){
 var obj=document.getElementById(id);
 var clds=zxcByClassName('sectiont');
 clds.shuffle();
 for (var z0=0;z0<clds.length;z0++){
  obj.appendChild(clds[z0]);
 }
}

Array.prototype.shuffle=function(){
 for (var r,t,z0=0;z0<this.length;z0++){
  r=Math.floor(Math.random()*this.length);
  t=this[z0];
  this[z0]=this[r];
  this[r]=t;
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}



Randomise('contentt','sectiont');
var S=new scrollert({
 ID:'contentt',
 Duration:1000
});
/*]]>*/
</script>

</body>

</html>

**naveen.brite** · 04-12-2010, 11:44 AM

It is working....You are really smart....
Thank you very much.....

Thread: randomize slide every time

Thread Tools

Search Thread

randomize slide every time

The Following User Says Thank You to vwphillips For This Useful Post:

Thank you

Bookmarks

Bookmarks

Posting Permissions