Error in xml javascript based slideshow [Archive]

Click to See Complete Forum and Search --> : Error in xml javascript based slideshow

Looney

June 3rd, 2005, 02:45 PM

Hi All ,
Well as the title suggests i am trying to implment a javascript based slideshow which reads of an xml file and displays the pictures the xml file also contains a link for each image element which is displayed when the user clicks ona particular image.The code was embedded in my aspx page but it does n't work , during my past uncountable attempts to view the script in Firefox or IE i get this error
Error: document.images.slide has no properties
Source File: http://localhost/Clipstone_Yamaha/Default.aspx
Line: 95
I am just a newbie to javascripts and have very recently recognised the potential power of them . I would be very greatfull if someone could please help me fix this error as i can feel it that the code is not too far from what it's meant to accomplish as i have managed to read of my xml file and display the content as an html table and i have manged to display and animation based on some passign in some pictures' url and links as array to my functions. Any help would be very highly appreciated .

<script type="text/javascript" language="javascript" >
// JScript File
var xmlDoc ;
var slideimages=new Array(10);
var slidelinks=new Array(10);
var slideshowspeed=2000
var whichlink=0
var whichimage=0

function importXML()
{ alert('inside importXML 1');
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("Top_Animation.xml");
}

function createTable()
{
var x = xmlDoc.getElementsByTagName('Image');

for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
if (j=0)
{
document.images.item['slide']= x[i].childNodes[j].firstChild.nodeValue
slideshowimages(x[i].childNodes[j].firstChild.nodeValue);

}
if (j=1)
{

slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}

}
function gotoshow()
{ importXML();
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
function slideshowimages()
{
for (i=0;i<slideshowimages.arguments.length;i++)
{
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks()
{
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function slideit()
{
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage

if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}

slideit()

</script>

<body >
<a href="javascript:gotoshow();"><img alt="animated banner" src="http://localhost/Clipstone_Yamaha/images/header1.jpg" id="slide"/></a>

My xml file looks like

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="Top_Animation.xsl"?>
<Images xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://localhost/Clipstone_Yamaha/Top_Animation.xsd">
<Image>
<URL>
http://localhost/Clipstone_Yamaha/images/header1.jpg
</URL>
<Link>
http://food.epicurious.com/run/recipe/view?id=13285
</Link>
</Image>
<Image>
<URL>
http://localhost/Clipstone_Yamaha/images/header2.jpg
</URL>
<Link>
http://food.epicurious.com/run/recipe/view?id=10092
</Link>
</Image>
<Image>
<URL>
http://localhost/Clipstone_Yamaha/images/header3.jpg
</URL>
<Link>
http://food.epicurious.com/run/recipe/view?id=100975
</Link>
</Image>
<Image>
<URL>
http://localhost/Clipstone_Yamaha/images/header4.jpg
</URL>
<Link>
http://food.epicurious.com/run/recipe/view?id=2876
</Link>
</Image>
<Image>
<URL>
http://localhost/Clipstone_Yamaha/images/header5.jpg
</URL>
<Link>
http://food.epicurious.com/run/recipe/view?id=20010
</Link>
</Image>
</Images>

my xss file looks like

<?xml version="1.0" encoding="utf-8"?>
<xs:schema id="Images" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xs:element name="Images" msdata:IsDataSet="true">
<xs:complexType>
<xs:choice maxOccurs="unbounded">
<xs:element name="Image">
<xs:complexType>
<xs:sequence>
<xs:element name="URL" type="xs:string" minOccurs="0" />
<xs:element name="Link" type="xs:string" minOccurs="0" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:choice>
</xs:complexType>
</xs:element>
</xs:schema>

My xsl file looks something like this

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>

<h2>My Images</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">URL</th>
<th align="left">Link</th>
</tr>
<xsl:for-each select="Images/Image">
<tr>
<td>
<xsl:value-of select="URL"/>
</td>
<td>
<xsl:value-of select="Link"/>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Thanxs in advance !

Dr. Script

June 3rd, 2005, 05:18 PM

Please format your code with either [code] or [html] tags. It is much easier on the eyes, and helps those who want to assist you differentiate between the code and the questions.

Looney

June 3rd, 2005, 11:31 PM

Hi all , well i have manged to get rid of the runtime error i was askign help with in my last post it was just cause of an insequential method call , well though the problem still persists as my skideshow does n't go on when the page loads in the browser .i have added another method to try preload the images and when the body of the html is loaded i am trying to call importxml .this is just so inorder to make the animation going as soon as the page loads up and when the user clicks the image then only the new window starts with the link , but at the moment when i load this in the browser firstly my slide show does n't start up automatically like it's meant too , i know it gets the image data some how cause when i click on the non changing image from IE it starts a new window with the corresponding URL attached to the image from my xml file but in Firefox upon clicking on the image it starts anew window and shows me the second Image from the xml file .I have slightly updated my code ! here it is again One more thing ,i missed on to inform you that both firefox and ie keep giving me a notification when i run the page that the script on the page is taking too long to execute and if I would like to abort running it as it may slow down my machine or mozilla firefox.i am guessing this is cause of loading of the pictures at runtime .but i am not sure could certainly be wrong ,Whadya say Mate?

<script type="text/javascript" language="javascript" >
// JScript File
var xmlDoc ;
var slideimages=new Array(10);
var slidelinks=new Array(10);
var slideshowspeed=2000
var whichlink=0
var whichimage=0

function importXML()
{ alert('inside importXML 1');
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("Top_Animation.xml");
}

function createTable()
{
var x = xmlDoc.getElementsByTagName('Image');

for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
if (j=0)
{
MM_preloadImages(x[i].childNodes[j].firstChild.nodeValue);
document.images.item['slide']= x[i].childNodes[j].firstChild.nodeValue
slideshowimages(x[i].childNodes[j].firstChild.nodeValue);

}
if (j=1)
{

slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}

}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function gotoshow()
{
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
function slideshowimages()
{
for (i=0;i<slideshowimages.arguments.length;i++)
{
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks()
{
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function slideit()
{
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage

if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}

//slideit()

</script>

</head>
<body onload="importXML();">
<a href="javascript:gotoshow();"><img alt="animated banner" src="http://localhost/Clipstone_Yamaha/images/header1.jpg" id="slide"/></a>

Dr. Script

June 3rd, 2005, 11:58 PM

Please format your code with either [code] or [html] tags. It is much easier on the eyes, and helps those who want to assist you differentiate between the code and the questions.Umm, id you see this post?

khp

June 4th, 2005, 02:07 AM

Umm, id you see this post?

Probably, he just forgot to use [/code] and [/html] and the end of the code and html sections.
Looney, you might also want to tryout the edit function on you posts, that way you don't have to post the entire thing again :)

Looney

June 4th, 2005, 02:56 AM

Hi Khp , Thanks for the tip , I feel like sucha MoreOn now that it did n't even occur to me that these tags might just work like HTML .Thanks very much .Well though i do have a code problem , as u c in my post .Is there any chance u can help me with that as well ? Would very much appreciate it .
Best Regards
Looney

Dr. Script

June 4th, 2005, 08:43 AM

Now trhat I can [as can others] see the code easily, its XML, and uses ActiveX, which really aren't my specialties. There should be others on the board that could help ...

Looney

June 4th, 2005, 08:58 AM

Hi Dr Script , Thanks for responding to my post . The problem at hand does involve XML , but i can assure u that the problem does not lie in the xml part , The problem is in Javascript code , it 's not sequenced right , or perhaps is missing something .I am not too sure .To best of my guess there is only one small active x object in the code which is to be able to read an XMl document in IE It's just a constructor .The Mozilla part of it does not have any active X objects.Correct me if i am wrong but It's just that IE needs an active X object constructor to initialise XMLdoc .
Well anyhow i 'll very much appreciate if You or anybody could please help me/Guide me/ Advice me on this problem as i am an absolute rookie when it comes to javascripts . The problem is definately in javascript part of this ,which i guess is sorta obvious anyhow .I am amazed is n't there any Java script Scripting Guru out there to point out what am I doing wrong ?
Any help would be very highly appreciated !

Looney

June 4th, 2005, 04:24 PM

Hi All, Well after spending hours on this , I have finally manged to successfully make a javascript which reads of Picture Urls and links from a server side XMl file and then displays them in the browser ,I have it currently running in Both IE and Mozilla type browsers (Netscape, FireFox).The problem i found was that in Mozilla the index of the child nodes from the xml file are numbered in weird fashion .It would number the first node(Zeroth) as 3 instead of
So i had to make two different methods to load up the array Pix filled with all the urls .I also have another function to preload the images in the background inorder cut down on client -server network traffic.The idea of loading these urls and there corresponding links from an xml File residing on the server was that now I can have a webform in my Admin site which can add new images and links , update & delete existing entries .i guess it's slight different approach for Content management ! I hope this is usefull to someone out there !As it sure took me a while . This is my first Post ever providing a solution to a problem !Happy Programming

<script type="text/javascript" language="javascript" >
// JScript File
var xmlDoc ;
pix = new Array();
links = new Array();
var i = 0;
function importXML()
{ //alert('inside importXML 1');
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = populatePIXFireFox;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) populatePIXIE()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("Top_Animation.xml");
}
function populatePIXFireFox()
{ //alert('inside populatePIX');
var x = xmlDoc.getElementsByTagName('Image');
//alert(x.length.toString());
for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{
//alert('x[i].childNodes.length =' + x[i].childNodes.length.toString());
if (x[i].childNodes[j].nodeType != 1) continue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
if (j==1)
{
pix[i]=x[i].childNodes[j].firstChild.nodeValue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
//alert(pix[i].toString());
}
if (j!=1)
{
//alert('j= '+ j.toString() +'i= '+ i.toString());
links[i]=x[i].childNodes[j].firstChild.nodeValue;
//slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}
//alert('these are the pics '+pix.toString());
//alert('these are the links '+links.toString());
MM_preloadImages();
slideshow();
}
function populatePIXIE()
{ //alert('inside populatePIX');
var x = xmlDoc.getElementsByTagName('Image');
//alert(x.length.toString());
for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{
//alert('x[i].childNodes.length =' + x[i].childNodes.length.toString());
if (x[i].childNodes[j].nodeType != 1) continue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
if (j==0)
{
pix[i]=x[i].childNodes[j].firstChild.nodeValue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
//alert(pix[i].toString());
}
if (j==1)
{//alert('j= '+ j.toString() +'i= '+ i.toString());
links[i]=x[i].childNodes[j].firstChild.nodeValue;
//slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}
//alert('these are the pics '+pix.toString());
//alert('these are the links '+links.toString());
MM_preloadImages();
slideshow();
}
function slideshow(){
setInterval("change()", 1000);
}
function change(){
document.images.slide.src = pix[i];
i = i + 1;
if (i > (pix.length-1)) {i = 0}
}

function MM_preloadImages() { //v3.0
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images =pix
// start preloading
for(i=0; i<=pix.length; i++)
{
imageObj.src=pix[i];
}
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(links[i])
else
winslide.location=links[i]
winslide.focus()
}

</script>
</head>
<body onload="importXML();">
<a href="javascript:gotoshow();"><img src="http://localhost/Clipstone_Yamaha/images/header1.jpg" id="slide"/></a>

Dr. Script

June 4th, 2005, 04:41 PM

I'm very glad you got it worked out!

Looney

June 5th, 2005, 12:15 AM

Hi Dr Script,
Thanks man , It means a lot to me you saying that , It was my first proper script from scratch , Ofcourse i refered to things on internet , but until recently i was just a rookie dotnet developer who copied scripts of web to embed in my pages as per needs , first time ever i wrote one myself with out help of any tools like scriptomaticetc .Take it easy mate !
Happy Programming