Slideshow Issue - uses JavaScript

Question

Leslie Humble 0 Newbie Poster

15 Years Ago

Hello ... I am new at this forum stuff. I have been ripping my hair out trying to put slideshow up on our website using Dreamweaver CS3. I went onto your "Dynamic Drive DHTML" page and found a slideshow that works, however it puts the slideshow on the left side of the screen. Which is fine as I have a static picture on the right. My problem is how do I type in between the two? Is this possible? I have tried moving the text around, alignment etc and it just will not go in between the slideshow and the static picture. When I had two static pictures it worked just fine. Can anyone help? If you want to see what it looks like with the static pictures go to www.theleshumbleshow.com to view it so that you can what I want to do.

Thanks
Susan and Les Humble

<html>
<body>
<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/

var trans_width='140px' //slideshow width
var trans_height='225px' //slideshow height
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=10 //animation speed. Greater is faster.

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["photo1.jpg", "http://www.cnn.com", "_new"]
slideshowcontent[1]=["photo2.jpg", "", ""]
slideshowcontent[2]=["photo3.jpg", "http://www.google.com", ""]


////NO need to edit beyond here/////////////

var bgcolor='white'

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

</script>

javascript

2 Contributors
2 Replies
116 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by rickarde

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rickarde 0 Newbie Poster · Answer 1 · 2009-03-20T13:59:07+00:00

Hi

At a quick glance it seems you need to use "float" to get what you want. When DIV's (and other block level elements) are used in the layout, each block level element per default occupies on complete row, but using <code>float</code> makes it possible to "float" other elements to the left or to the right of the current block element. A simple example:

<html>
<body>
...
<hr/>
<div id="div1">This is DIV 1</div>
<div id="div2">This is DIV 2</div>
<hr/>
...
</body>
</html>

would output something like this:
_________________________________
This is DIV 1
This is DIV 2
_________________________________

while this:

<html>
<body>
...
<hr/>
<div id="div1" style="position:relative;float:left;">
   This is DIV 1
</div>
<div id="div2" style="position:relative;float:left;">
   This is DIV 2
</div>
<hr/>
...
</body>
</html>

would output something like this:
_________________________________
This is DIV 1 This is DIV 2
_________________________________

Try to play around with floats - but one thing to remember though:
When "floated" something in some way, it lets all elements below to float, which may not be what you want, you may only want to let the nex single element to "float beside" the floated element, so we need to clear off the float which be done like in the following example:

<html>
<body>
...
<hr/>
<div id="div1" style="position:relative;float:left;">
   This is DIV 1
</div>
<div id="div2" style="position:relative;float:left;">
   This is DIV 2
</div>
<div id="clearer" style="clear:left;"></div>
<hr/>
...
</body>
</html>

This in fact a common issue in many CSS-related discussions and it could be a good start to search the web and read some about CSS/layout

Hope this helps

/R

rickarde 0 Newbie Poster · Answer 2 · 2009-03-20T14:53:25+00:00

Forgot to mention, if you need something to show up in between two DIV's you can achieve this by writing:

<div style="position;relative;float:left;">
Left Div
</div>
<P style="position:relative;float:left;">
Paragraph in between
</P>
<div style="position:relative;float:right;">
Right Div
</div>
<div style="clear:both;"></div>

And worth mentioning is also the way I used "clear" in this example. Since there are both left- and right floated elements above, we need to clear both of them, hence the "clear:both"

/R