Results 1 to 7 of 7

Thread: Menu conflicting with slideshow

  1. #1
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Menu conflicting with slideshow

    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

    Code:
    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

    HTML Code:
    <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

  2. #2
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread 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.
    DD Admin

  4. #4
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/dynamici...smoothmenu.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

  5. #5
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The problem is simply the line:

    Code:
    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:

    Code:
    document.getElementById('myimage').src=pots[position]["path"];
    where "myimage" is the ID given to your slideshow image on the page to target it.
    DD Admin

  7. #7
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •