Advanced Search

Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow - 2 that pause on page

  1. #1
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow - 2 that pause on page

    1) Script Title: Ultimate Fade-in slideshow

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...nslideshow.htm

    3) Describe problem: I copied the code exactly from the page, and am trying to have two slideshows on the page, with both of them allowing the pause. If I have them both in the same script tag, it will allow both to pause. But, if I try to put them in two different script tags (so that I can do the alignment I need), only the second one pauses. Any idea why this is? is there a fix I can do to the main script code?

    Here is the HTML:
    Code:
    		<div id="rug-left"><script type="text/javascript">
    		//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    		new fadeshow(fadeimages, 250, 350, 0, 3000, 1)
    		</script></div>
    				
    		<div id="rug-right"><script type="text/javascript">
    		//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    		new fadeshow(fadeimages2, 250, 350, 0, 3000, 1)
    		</script></div>
    and here is the CSS:
    Code:
    #rug-left {
    	float: left;
    	margin: 0 40px 0 38px;
    	padding: 0;
    	}
    #rug-right {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	}
    Thanks for any help!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I tried this out in 3 browsers. Only FF had the problem that you describe. To fix it in that browser, you probably have several choices. I'll give you two:

    Code:
    #rug-left {
    	float: left;
    	margin: 0 40px 0 38px;
    	padding: 0;
    	}
    #rug-right {
    	margin: 0;
    	padding: 0;
    	}
    That's the simplest. There's no reason to have position relative on rug-right, as you give it no coordinates (left, top, bottom, or right). By giving it relative position in FF you stack it over rug-left.

    But, if there is something you are not telling us, and you need to have it positioned relative, you can do the same to rug-left, and stack it higher:

    Code:
    #rug-left {
    	position: relative;
    	z-index: 10;
    	float: left;
    	margin: 0 40px 0 38px;
    	padding: 0;
    	}
    #rug-right {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	}
    As far as I can tell, neither solution will hurt anything in any browser, and it appears to be a Mozilla and/or FF bug, as any division stacked over another that has no background, shouldn't 'cover' it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much! Yes, I found the issue in Firefox and removing the position: relative worked like a charm!

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
  •