...

View Full Version : Help! Interactive slide show...



bluetech
08-24-2002, 06:50 PM
Hello!
I installed an interactive slide show for a customer that is supposed to work in all platforms. It works great in IE, but in Netscape, the slides don't show. The page where this is installed is at http://www.bluewtech.com/KBT/plant.htm . If anyone can help me on this I would greatly appreciate it! Thanks.

gorilla1
08-24-2002, 08:35 PM
On NS4 it looks like the javascript where the slideshow table gets dynamically written overwites the rest of the document, so all you see is the 'welcome' image. Not sure why just yet. Why are some of the tables dynamically written like that? Is that the way it is intended in the slideshow script (is that available to look at with installation instructions from some site?)?... Also, just curious, what does that webbot bot=include thing do?

G

bluetech
08-24-2002, 08:47 PM
Gorrilla 1,
Thanks for the reply. First, as a last reort I tried putting the viewer on its own page and calling it as a SSI from the plant.htm page. It works without a problem, but it won't run in Netscape. Below is the .js file for the viewer.

descr=new Array
w=new Array
h=new Array
ratio=new Array
urls=new Array
var wmax
var hmax
var items
var showbg
var buttonbgcolor
var buttontextcolor
var descriptionbgcolor
var textcolor


//changes area

items=5 //number of items (image, url and description pairs)
tablewidth=500 //width of slide show area
tabheight=350 //height of slide show area

buttonbgcolor="silver" //background color of buttons
buttontextcolor="black" //text color for buttons
descriptionbgcolor="black" //background color of description area
textcolor="white" //text color of description area
showbg="showbg.jpg" //background picture for images and buttons area

//leave blank text color to get black text
//leave blank background color to get transparent background
//leave blank showbg to get descriptionbgcolor for background
//experiment, but make sure you don't delete quotation marks!

img=new Array
for(i=1;i<=items;i++)img[i]=new Image()

//web address for images used in show
//add or delete here rows to match the number of images;
//make sure you update the number in the square brackets:
//the next row should be img[6].src="images/next_image.jpg"
img[1].src="images/welcome.jpg"
img[2].src="images/toothmill.jpg"
img[3].src="images/splinegrind.jpg"
img[4].src="images/wetgrind.jpg"
img[5].src="images/formgrind.jpg"
//img[6].src="Arugot_show.jpg"

//image sizes, make sure you enter correct values
//add or delete here rows to match the number of images;
//make sure you update the number in the square brackets:
w[1]=250
h[1]=250
w[2]=250
h[2]=250
w[3]=250
h[3]=250
w[4]=250
h[4]=250
w[5]=250
h[5]=250

//description for each images
//add or delete here rows to match the number of images;
//make sure you update the number in the square brackets:

descr[1]="Welcome to Kingsford Broach and Tool, Inc!"
descr[2]="Milling deep tooth forms"
descr[3]="Grinding involute spline broaches"
descr[4]="OD grinding"
descr[5]="Precision form grinding using Diaform CNC dressers"
//descr[6]="A green island in the middle of the desert"

//link urls for each image
//add or delete here rows to match the number of images;
//make sure you update the number in the square brackets:
//urls[1]="http://www.altavista.com"
//urls[2]="http://www.excite.com"
//urls[3]="http://www.yahoo.com"
//urls[4]="http://www.javascriptcity.com"
//urls[5]="http://www.goto.com"

//end of changes area

for(i=1;i<=items;i++)descr[i]='<font color="' + textcolor + '">' + descr[i] + '</font>'


for(i=1;i<=items;i++)ratio[i]=h[i]/w[i]
maxs()

if(wmax>tablewidth)
{
for(i=1;i<=items;i++)
{
if(w[i]>tablewidth)
{
w[i]=tablewidth
h[i]=w[i]*ratio[i]
}
}
maxs()
}

if(hmax>tabheight)
{
for(i=1;i<=items;i++)
{
if(h[i]>tabheight)
{
h[i]=tabheight
w[i]=h[i]/ratio[i]
}
}
}
maxs()


function maxs()
{
hmax=h[1]
for(j=1;j<=items;j++)
{
if(h[j]>hmax)hmax=h[j]
}
wmax=h[1]
for(j=1;j<=items;j++)
{
if(w[j]>wmax)wmax=w[j]
}
}

layerLeft = new Array
layerTop = new Array

position_layers()

function position_layers()
{
for(i=1;i<=items;i++)
{
layerLeft[i] = Math.floor((wmax-w[i])/2);
layerTop[i] = Math.floor((hmax-h[i])/2);
}
}

document.write('<STYLE TYPE="text/css">')
document.write('# container {position: relative; z-index: 1; top:0px; left:0px}')
document.write('.buttons { background: ' + buttonbgcolor + '; color: ' + buttontextcolor + '; font-weight: bold; }')
if(document.layers)document.write('# description {position: absolute; z-index: 3; top:0px; left:0px;}')

document.write('#con {position: relative; z-index: 1; top:0px; left:0px}')
for(i=1;i<=items;i++)
{
document.write('#pic'+ i + '{position: absolute; z-index: 1; top:' + layerTop[i] + 'px; left:' + layerLeft[i] + 'px; visibility:hidden}');
}
document.write('</style>')


navtest="KO"
j=0
if (document.layers)
{
navtest="OK"
layerRef="document.layers"
styleDef=""
}

if(document.all)
{
navtest="OK"
layerRef="document.all"
styleDef=".style"
}

function start()
{
eval(layerRef + '["con"].' + layerRef + '["pic1"]' + styleDef + '.visibility="visible"')
displayText(1)
currentcommand="stop"
j=1
document.playercomm.stop.disabled=true
document.playercomm.faster.disabled=true
document.playercomm.slower.disabled=true
}
var rotation
var rotspeed
rotspeed=3000

function rotate()
{
for(i=1;i<=items;i++)
{
eval(layerRef + '["con"].' + layerRef + '["pic' + i + '"]' + styleDef + '.visibility="hidden"')
}
j++
if(j==0)j=items
if(j>items)j=1
eval(layerRef + '["con"].' + layerRef + '["pic' + j + '"]' + styleDef + '.visibility="visible"')
displayText(j)
rotation = setTimeout("rotate()",rotspeed)
}

function displayText(opt){
text='<center><b>'+descr[opt]+'</b></center>'

if(document.layers){
document.layers["container"].document.layers["description"].document.write(text)
document.layers["container"].document.layers["description"].document.close();
}

if(document.all)
{
document.all["description"].innerHTML=text;
}
}

currentcommand="play"
function player(command)
{
if(currentcommand=="play")
{
if(command=="stop")
{
clearTimeout(rotation)
currentcommand="stop"
document.playercomm.stop.disabled=true
document.playercomm.play.disabled=false
document.playercomm.faster.disabled=true
document.playercomm.slower.disabled=true
document.playercomm.previous.disabled=false
document.playercomm.next.disabled=false
}
}

if(currentcommand=="stop")
{
if(command=="play")
{
rotate()
currentcommand="play"
document.playercomm.play.disabled=true
document.playercomm.stop.disabled=false
document.playercomm.faster.disabled=false
document.playercomm.slower.disabled=false
document.playercomm.previous.disabled=true
document.playercomm.next.disabled=true
}
}

if(command=="next")
{
clearTimeout(rotation)
rotate()
if(currentcommand=="stop")clearTimeout(rotation)
}

if(command=="previous")
{
clearTimeout(rotation)
j=j-2
rotate()
if(currentcommand=="stop")clearTimeout(rotation)
}
}

function fasterslower(action)
{
if(currentcommand=="play")
{
if(action=="faster")
{
rotspeed=rotspeed-500
if (rotspeed<0)rotspeed=0
}
if(action=="slower")rotspeed=rotspeed+500
}
}

As I said, it works fine in IE. I am perplexed! Thanks for the help.

gorilla1
08-24-2002, 09:39 PM
I took a nap sorry... I could the see the code, that was not really the issue. What I wanted to understand is if you got the script from somewhere, did it come with installation instructions? Apart from the slideshow script which you have just shown in your post, why is the table that contains the image written via another script dynamically? It is this piece of code that probably overwites the document in ns.

g

bluetech
08-24-2002, 09:46 PM
Gorilla 1,
Below is the page code.

<table border=0>
<TR>
<script language="JavaScript">
<!--
document.write('<TD BGCOLOR="' + descriptionbgcolor + '">')
document.write('<table width=100% background="' + showbg + '" border=0><tr><td>')
//the table hosting the slides
document.write('<center><table border=0><tr><td width='+ wmax + '>')
document.write('<div id=con>')

for(i=1;i<=items;i++)document.write('<div id=pic' + i + '><a href="' + urls[i] + '" target=_blank><img src="' + img[i].src +'" width=' + w[i] + ' height=' + h[i] + ' border=0></a></div>')

document.write('</div>')
document.write('<img src="images/spacer20.gif" width=' + wmax + ' height=1>')
document.write('<img src="images/spacer20.gif" height=' + hmax + ' width=1>')
document.write('</td></tr>')
document.write('</table></center>')//end of slides
document.write('</td></tr></table></center>') //end of show area
//descriptions
document.write('<table border=0><tr><td width=' + tablewidth + ' height=40 valign=top>')//description area

document.write('<div id=container><center>')
document.write('<div id=description><center><img src="images/spacer20.gif" width=' + (tablewidth) + ' height=1 border=1>')
//-->
</script>

<br><FONT color = "#000000"><b>Simple Slide Show</b></font></center></div>
</center>
</div>
</td></tr>
</table>
</center>

<script language="JavaScript">
<!--
document.write('<table background="' + showbg + '" width=100%>')
//-->
</script>

<form name=playercomm>
<tr><td align=center>
<input name=play value=" Play " type=button class=buttons onClick='player("play")'>
<input name=faster value=" Faster " type=button class=buttons onClick='fasterslower("faster")'>
<input name=slower value=" Slower " type=button class=buttons onClick='fasterslower("slower")'>
<input name=stop value=" Stop " type=button class=buttons onClick='player("stop")'><br>
<input name=previous value=" << Previous " type=button class=buttons onClick='player("previous")'>
<input name=next value=" Next >> " type=button class=buttons onClick='player("next")'>
</td></tr>
</form>
</table>
</center>
</TD></TR></TABLE>

Thanks!

gorilla1
08-24-2002, 09:52 PM
OK, I got it to work in both ie and ns now, simply by stripping away all the code except for the table that contains the slideshow. So that says that NS has no problem with the slideshow itself - there must be some conflict elsewhere in the code that NS trips on. I suspect something to do with multiple background specifications? Hold on, I will look further.

G

gorilla1
08-24-2002, 10:05 PM
Well, if you take out the slidewhow, the code loads fine in IE but loads a blank page in NS, so NS chokes on something completely outside the slideshow. Here is the code I used:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Production Facilities</title>

<link rel="stylesheet" type="text/css" href="menu.css">
<SCRIPT language="JavaScript" SRC="interactshow.js"></SCRIPT>
</head>

<body topmargin="0" leftmargin="0" >
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td width="180" colspan="3" valign="top" align="left" rowspan="2"><img border="0" src="images/Logo2.gif" width="180" height="180"></td>
<td valign="top" align="left" width="100%" bgcolor="#006699"><img border="0" src="images/Header.jpg" width="550" height="150"></td>
</tr>
<tr>
<td valign="top" align="center" bgcolor="#0098D0" width="100%"><img border="0" src="images/test3.gif" width="600" height="30"></td>
</tr>
<tr>
<td width="25" bgcolor="#0098D0"><img border="0" src="images/25shim.gif" width="25" height="25"></td>
<td width="130" valign="top" align="center" bgcolor="#006699"><!--webbot bot="Include"
U-Include="side_bar.htm" TAG="BODY" startspan -->
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="0" width="130" background="images/sidebar4.gif" height="100">
<tr>
<td width="130" height="600" valign="top" align="center">
<div align="center">
<table border="0" cellpadding="3" cellspacing="0" width="110">
<tr>
<td align="center"><font face="Verdana" size="3" color="#FFFFFF"><b>ISO
9001<br>
CERTIFIED</b></font></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="left"><b><a href="home.htm"><font face="Verdana" size="2">Home</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="plant.htm"><font face="Verdana" size="2">Our
Plant</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="products.htm"><font face="Verdana" size="2">Products</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="capabilities.htm"><font face="Verdana" size="2">Capabilities</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="services.htm"><font face="Verdana" size="2">Services</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="quality.htm"><font face="Verdana" size="2">Quality</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="engineering.htm"><font face="Verdana" size="2">Engineering</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="stk_keyways.htm"><font face="Verdana" size="2">Stock
Keyways</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="rfq.htm"><font face="Verdana" size="2">RFQ</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="pullers.htm"><font face="Verdana" size="2">Pullers</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="radius_gages.htm"><font face="Verdana" size="2">Radius
Gauges</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="turnkey.htm"><font face="Verdana" size="2">Turnkey
Systems</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="kcoat.htm" ><font face="Verdana" size="2">&quot;K&quot;
Coat</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="employment.htm"><font face="Verdana" size="2">Employment</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="request.htm"><font face="Verdana" size="2">Information
Request</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="contact.htm"><font face="Verdana" size="2">Contact</font></a></b></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" face="Verdana" size="2">Member</font><br>
<img border="0" src="images/CTI.jpg" width="110" height="29"></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" size="1">United States
Cutting Tool Institute</font></td>
</tr>
<tr>
<td align="center"><img border="0" src="images/mta2.jpg" width="85" height="50"></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" size="1">Michigan Tooling
Association</font></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
</table>
</div>
<p>&nbsp;
</td>
</tr>
</table>
</center>
</div>
<!--webbot bot="Include" endspan i-checksum="16297" -->
</td>
<td width="25"></td>
<td width="100%" align="center" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="0" width="95%" height="100%">
<tr>
<td width="100%" align="center">
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="0" width="500">
<tr>
<td align="center"><font face="Verdana" size="4">A Quick Tour of
Kingsford Broach and Tool, Inc.<br>
<br>
</font></td>
</tr>
<tr>
<td><font face="Verdana" size="2">For a quick tour of our
facilities, please use the control panel below. If you have any
questions, comments, or need more information, <a href="contact.htm">CLICK
HERE</a> for our contact directory. </font><br>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table border="1" cellpadding="3" cellspacing="0" width="500">
<tr>
<td valign="top"><!--webbot bot="Include" U-Include="slide.htm" TAG="BODY" startspan -->

<center>
<center>
<table border="0" cellpadding="3" cellspacing="0" width="500">
<tr>
<td align="center">
<div align="center">
<center>
<table border=0>
<TR><td>hello

</td>
</tr>
</form>
</table>

<!--webbot bot="Include" endspan i-checksum="57431" -->
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%" align="center"></td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</div>
</body>

</html>

bluetech
08-24-2002, 10:22 PM
G.

I loaded that code and it shows the page in bothe IE and NS6, but the slide show will not work. Thanks for trying! Bluetech

gorilla1
08-24-2002, 10:39 PM
Well, ok, works in ns4, but I don't have ns6. It looks to me as though the NS problem is in this piece of sidebar code (ns4 anyway) - I cant see what it is, so I think you have to just reduce the code until you pin down where it breaks, or maybe someone else can spot it:

<tr>
<td width="25" bgcolor="#0098D0"><img border="0" src="images/25shim.gif" width="25" height="25"></td>
<td width="130" valign="top" align="center" bgcolor="#006699"><!--webbot bot="Include"
U-Include="side_bar.htm" TAG="BODY" startspan -->
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="0" width="130" background="images/sidebar4.gif" height="100">
<tr>
<td width="130" height="600" valign="top" align="center">
<div align="center">
<table border="0" cellpadding="3" cellspacing="0" width="110">
<tr>
<td align="center"><font face="Verdana" size="3" color="#FFFFFF"><b>ISO
9001<br>
CERTIFIED</b></font></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="left"><b><a href="home.htm"><font face="Verdana" size="2">Home</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="plant.htm"><font face="Verdana" size="2">Our
Plant</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="products.htm"><font face="Verdana" size="2">Products</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="capabilities.htm"><font face="Verdana" size="2">Capabilities</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="services.htm"><font face="Verdana" size="2">Services</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="quality.htm"><font face="Verdana" size="2">Quality</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="engineering.htm"><font face="Verdana" size="2">Engineering</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="stk_keyways.htm"><font face="Verdana" size="2">Stock
Keyways</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="rfq.htm"><font face="Verdana" size="2">RFQ</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="pullers.htm"><font face="Verdana" size="2">Pullers</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="radius_gages.htm"><font face="Verdana" size="2">Radius
Gauges</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="turnkey.htm"><font face="Verdana" size="2">Turnkey
Systems</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="kcoat.htm" ><font face="Verdana" size="2">&quot;K&quot;
Coat</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="employment.htm"><font face="Verdana" size="2">Employment</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="request.htm"><font face="Verdana" size="2">Information
Request</font></a></b></td>
</tr>
<tr>
<td align="left"><b><a href="contact.htm"><font face="Verdana" size="2">Contact</font></a></b></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" face="Verdana" size="2">Member</font><br>
<img border="0" src="images/CTI.jpg" width="110" height="29"></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" size="1">United States
Cutting Tool Institute</font></td>
</tr>
<tr>
<td align="center"><img border="0" src="images/mta2.jpg" width="85" height="50"></td>
</tr>
<tr>
<td align="center"><font color="#FFFFFF" size="1">Michigan Tooling
Association</font></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
</table>
</div>
<p>&nbsp;
</td>
</tr>
</table>
</center>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum