a slide show exclusively for text attached to css , any ideas ?
i'm looking for a slide show exclusively for text attached to css / that plays constantly / but with image files for the "back", "stop" & "forward" buttons.
I've searched for 3 days for something practical for a slide show that could be practical for a text scenario exclusively. What I've found were mostly javascript slide show's that were mainly for images & i'm not experienced enough to modify them for text attached to css.
the scenario im currently stuck with is 4 paragraphs in a div css overflow... not going to fly ascetically or in a appealing sense for my targeted audience.
**the scenario i'm hoping to have, is for * 4 paragraphs ( 4 layers in the ss, preferably DIV tags so i can add css on a external style sheet) * have the slide show perpetually playing * image files on the left and right for " back " & "forward " buttons.* and a image file on the bottom for a " stop" button *
if someone could give me a functional code & to educated me on where in the HTML to insert each portion of the code i'd greatly appreciate it , I've been searching since Thursday and here i am still looking on a Saturday morning !
o yea , i guess i could do this in fireworks but the only option i see is for FLASH & i don't want to go that route . i JUST DOWNLOADED adobe EDGE , maybe i experiment with this... i was hoping for JavaScript of something similar THANKS!
<!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[*/
.parent {
position:relative;left:200px;top:200px;width:200px;height:110px;border:solid red 1px;
}
.div {
position:relative;width:200px;height:100px;background-Color:#FFFFCC;border:solid red 1px;float:left;
}
/*]]>*/
</style></head>
<body>
<div id="tst" class="parent" onmouseover="S1.Pause();" onmouseout="S1.Auto();" >
<div class="slide" >
<div class="div" >0</div>
<div class="div" >1</div>
<div class="div" >2</div>
<div class="div" >3</div>
</div>
</div>
<input type="button" name="" value="Auto" onmouseup="S1.Auto();" />
<input type="button" name="" value="Pause" onmouseup="S1.Pause();" />
<input type="button" name="" value="Forward" onmouseup="S1.Step(-1);" />
<input type="button" name="" value="Back" onmouseup="S1.Step(1);" />
<div id="tstV" class="parent" onmouseover="S2.Pause();" onmouseout="S2.Auto();" style="left:800px;" >
<div class="slide" >
<div class="div" >0</div>
<div class="div" >1</div>
<div class="div" >2</div>
<div class="div" >3</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// DIV Slide Show (13-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcDIVSlideShow(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth'],p=document.getElementById(o.ID),slide=p.getElementsByTagName('DIV')[0],clds=slide.childNodes,ary=[],lft,sz,clode,ms=o.SlideDuration,hold=o.HoldDuration,srt=o.AutoStart,z0=0;
p.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[2]]='30000px';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
lft=clds[z0][mde[3]];
ary.push(lft);
sz=lft+clds[z0][mde[4]];
}
}
slide.style[mde[2]]=sz+5+'px';
clone=slide.cloneNode(true);
clone.style[mde[1]]='0px';
clone.style[mde[0]]=sz+'px';
slide.appendChild(clone);
clone=clone.cloneNode(true);
clone.style[mde[0]]=-sz+'px';
slide.appendChild(clone);
oop.mde=mde[0];
oop.obj=slide;
oop.ary=ary;
oop.sz=sz;
oop.ms=typeof(ms)=='number'?ms:1000;
oop.hold=typeof(hold)=='number'?hold:oop.ms*2;
oop.cnt=0;
oop.ud=-1;
oop.now=0;
if (typeof(srt)=='number'){
oop.Auto(srt);
}
}
zxcDIVSlideShow.prototype={
Step:function(ud,auto){
ud=typeof(ud)=='number'?ud>0?1:-1:-1;
var oop=this,ary=oop.ary,cnt=this.cnt+ud;
oop.Pause();
if (typeof(ary[cnt])!='number'){
oop.now+=oop.sz*(ud>0?-1:1);
cnt=ud>0?0:ary.length-1;
}
oop.ud=ud;
oop.auto=auto===true;
oop.cnt=cnt;
clearTimeout(oop.dly);
oop.animate(oop.mde,oop.now,ary[cnt],new Date(),this.ms);
},
Auto:function(ms){
var oop=this;
oop.Pause();
oop.to=setTimeout(function(){ oop.Step(oop.ud,true); },ms||500);
},
Pause:function(){
this.auto=false;
clearTimeout(this.to);
},
animate:function(mde,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.now=now;
oop.obj.style[mde]=now+'px';
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
}
else {
oop.now=t;
oop.obj.style[mde]=t+'px';
if (oop.auto){
oop.Auto(oop.hold);
}
}
}
}
S1=new zxcDIVSlideShow({
ID:'tst', // the unique ID name of the parent node. (string)
Mode:'horizontal', //(optional) the mode of execution, 'horizontal' or 'vertical'. (string, default = 'horizontal')
SlideDuration:1000, //(optional) the slide duration in milli seconds. (number, default = 1000)
HoldDuration:1000, //(optional) the auto rotation hold duration in milli seconds. (number, default = SlideDuration*2)
AutoStart:1000 //(optional) the auto rotation start duration in milli seconds. (number, default = no auto start)
});
S2=new zxcDIVSlideShow({
Mode:'vertical',
ID:'tstV',
AutoStart:1000
});
/*]]>*/
</script>
</body>
</html>
man ! i'm seriously honored you provided me with this! if i was actually making money off my LLC i'd ask for your pay pal so i could compensate you in some way . thank you very much !
Reply With Quote
Originally Posted by xelawho
Bookmarks