Menu conflicting with slideshow

[Dariune]

Hi all

Im new to javascript and decided to use Smooth navigational menu v1.3 as a menu for a page.

I have made the HTML external and put a <noscript> tag in the main page incase javascript is disabled.

The meny works great. Thankyou to the script writers :)

However, i have also created a slideshow (with my limited skill) which works fine on its own but when on the same page as the smooth menu the images appear (barring the 1st image) over the smooth menu.

I think this is because the menu is designed to take any script and dump its results into the menu's location (so as to place the menu HTML there)

The slideshow script is


var pots = [
{
"title":"This is a small image of the sample pan. <br /> A <a href='images/large.jpg' target='_blank'>larger image</a> is also available.",
"path":"images/small.jpg" },
{
"title":"Front view.",
"path":"images/front.jpg" },
{
"title":"Optional glass lid",
"path":"images/glasslid.jpg" },
{
"title":"Side elevation",
"path":"images/side.jpg"},
{
"title":"With standard lid",
"path":"images/withlid.jpg"},
{
"title":"Copper version",
"path":"images/copperfry.jpg"},
{
"title":"Green version",
"path":"images/greenfry.jpg"},
{
"title":"Red T2000 version",
"path":"images/redfry.jpg"}
];

var **** = 0

function slideShow() {
if (****>=pots.length)
****=0;
else if (****<0)
****=pots.length-1
document.images[0].src=pots[****]["path"];

var display = document.getElementById('title').innerHTML = pots[****]["title"];
};

And the HTML is


<div style="text-align:left; width: 330px;">
<h2>The 20 inch silver frying pan.</h2>
<p><img
onload="javascript:document.getElementById('title').innerHTML=pots[****]['title'];"
src="images/small.jpg" alt="The 20 inch silver frying pan." /></p>
<p id="title">&nbsp;</p>
<p style="text-align:center"><a href="javascript:****--;slideShow();">Previous</a>
<a href="javascript:****++;slideShow();">next</a>
</p>
</div>

Before answering could i ask you to bear in mind that i am doing this as an assignment in a course. Therefore if you can think of ways to improve my slideshow script or any changes that should be made please do not tell me as that goes against the rules of the course.

Instead i am just asking if Smoothmenu can be changed to allow other scripts to function on the page. If of course i am right in thinking smoothmenu is the cause.

Many thanks in advance

Dariune

[Dariune]

Oh and ignore the *s for the variable. I wanted to see if it was because my name for the variable was the same as the menu scripts name so i changed it to something i knew the menu wouldnt use.

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

At a glance I don't see how the two scripts would conflict with one another. However, it's impossible to tell without seeing the actual page. Please post a link to the page on your site that contains the problematic script so we can check it out.

[Dariune]

Sorry for my lack of reading before posting, i was frustrated at not being able to find a solution myself.

The page isnt online so i cant link to the page it self.
This is the link to the script in question.
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

If i stop the page from using the external js file then the slideshow works fine. Obviously the menu doesnt though.

Im pretty sure, somewhere in the external js file there is something that causes objects to be placed in the container div.But i cant find anything like that (i also dont understand half of it)

Let me know if you need more info

[Dariune]

Ok guys, i have managed to upload it under one of my other domains.

The url is www.dragonstouch.co.uk/OU/product.html

Any help would be greatly apreciated.

[ddadmin]

The problem is simply the line:


document.images[0].src=pots[position]["path"];

inside slideshow.js You're saying above to populate the very first image on the page with the slideshow image. The problem is, the first image is the arrow image used by the menu. You should instead be doing something like:


document.getElementById('myimage').src=pots[position]["path"];

where "myimage" is the ID given to your slideshow image on the page to target it.

[Dariune]

DDAdmin thankyou.

If i remember correctly it was you who helped me last time i had a problem as well :)

While looking at thep roblem i came to the same conclusion but wasnt sure on how to fix it. (Im not to strong on the DOM yet but im getting there.

Thanks again