View Full Version : Ultimate Fade-In Slideshow (v2.4) and Firefox 3.6.13

02-14-2011, 03:11 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: The slide show works terrific as of the most recent updates to IE and Chrome. However, in Firefox 3.6.13 the slideshow does not display correctly: http://www.wschouse.org/

Here is the HTML for the page:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>West Side Community House</title>
<link rel="stylesheet" href="http://www.wschouse.org/index.php?css=common/main.v.1291853400" type="text/css" />

<!--[if IE]>
<script src="http://www.wschouse.org/index.php/scripts/html5" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://www.wschouse.org/index.php/scripts//ie9" type="text/javascript"></script>
<script src="http://www.wschouse.org/index.php/scripts/ie7-squish" type="text/javascript"></script>

<script type="text/javascript" src="http://www.wschouse.org/scripts/jquery.min.js"></script>

<script type="text/javascript" src="http://www.wschouse.org/scripts/fadeslideshow.js">

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more


<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1037, 288], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [

["/images/uploads/rotating/banner1_1.png", "", "", ""],

["/images/uploads/rotating/banner2_1.png", "", "", ""],

["/images/uploads/rotating/banner3_1.png", "", "", ""],

["/images/uploads/rotating/banner4_1.png", "", "", ""],

["/images/uploads/rotating/banner5_1.png", "", "", ""],

["/images/uploads/rotating/banner6_1.png", "", "", ""]

//<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""

<div id="container">

<!-- header -->
<div id="headerContainer">
<div id="logo">
<a href="http://www.wschouse.org/"><img src="img/logo.png" border="0" alt="Westside Community House logo - home page"></a>

<div id="tagline">
Transforming lives in the <br>community since 1890
<div id="pig">
<a href="https://app.etapestry.com/hosted/WestsideCommunityHouse/OnlineGiving.html"><img src="img/pig.png" border="0" alt="Invest in us"></a>
<div id="invest">
<a href="https://app.etapestry.com/hosted/WestsideCommunityHouse/OnlineGiving.html">INVEST IN US</a>

<div id="fadeshowWrapper">
<div id="fadeshow1"></div>


<!-- menu -->
<div id="menuContainer">
<div id="menuGoods">

<li><a href="http://www.wschouse.org/index.php/about_us/" class="one">ABOUT US</a></li>
<li><a href="http://www.wschouse.org/index.php/youth/" class="two">YOUTH</a></li>
<li><a href="http://www.wschouse.org/index.php/families/" class="two">FAMILIES</a></li>
<li><a href="http://www.wschouse.org/index.php/seniors/" class="two">SENIORS</a></li>
<li><a href="http://www.wschouse.org/index.php/partnerships/" class="two">PARTNERSHIPS</a></li>

<li><a href="http://www.wschouse.org/index.php/get_involved/" class="two">GET INVOLVED</a></li>
<li><a href="http://www.wschouse.org/index.php/donate/" class="two">DONATE</a></li>
<li><a href="http://www.wschouse.org/index.php/contact_us/" class="two">CONTACT US</a></li>

<!-- content columns -->

<div id="content">
<div id="leftColumn">
<h1>What's Happening</h1>
<span class="righty"><img src="/images/uploads/Senior---Champions.jpg" alt="Session II Champions" width="300px" /></span>
<p><b>Healthy Bodies/Healthy Minds</b> is entering its third quarter thanks to The McGregor and Woodruff Foundations. This incentive-based program encourages older adults to take an active part in maintaining and enhancing their physical and cognitive health. Last quarter, four of the Champions selected were individuals whose participation was limited due to a fear of falling. After attending A Matter of Balance, they overcame their fear and managed to win the championship level due to their participation rate, motivation and overall improvement. Seniors who enroll in the program are eligible to receive prizes and may be selected as a champion.&nbsp; Champions are selected once a quarter and are recognized at a special Breakfast of Champions.&nbsp;

<br clear="all" />

<span class="righty"><img src="/images/uploads/Front-Page-PC-photo.jpg" alt="Personal computers. " width="300px" /></span>
<p><b>WSCH Youth Programs</b> start the school year with brand new computers and software in the Beverly Corrigan Learning Lab thanks to United Methodist Women National and the Beverly Corrigan Endowment Fund. Computers will be used by the <i>High Five Tutoring</i> and <i>West Side Sisterhood</i> programs during the school year. <a href="http://www.wschouse.org/index.php/youth/">Click here</a> to learn more.

<br clear="all" />
<div id="rightColumn">
<h1>Upcoming Events</h1>

<p><b>Thursday, April 28, 2011<br />
10:00 a.m. - 2:00 p.m.<br />

Healthy Aging Event</b><br />
West Side Community House will hold a Healthy Aging Event for seniors 60 years of age and older.&nbsp; Free health screenings, demos, information, games, prizes and more things to make you FEEL GOOD!&nbsp; Stay tuned for more information.
<br clear="all" />
<em>For more events, <a href="http://www.wschouse.org/index.php/upcoming_events_page/">click here</a>.</em>

<div id="footerContainer"></div>
<div id="socialMedia"> <a href="http://www.youtube.com"><img src="http://www.wschouse.org/img/button_youTube.png" border="0"></a> <a href="http://www.facebook.com"><img src="http://www.wschouse.org/img/button_facebook.png" border="0"></a> <a href="http://www.twitter.com"><img src="http://www.wschouse.org/img/button_twitter.png" border="0"></a></div>


02-14-2011, 08:12 PM
looks like a css issue on first glance. script is working fine off to the far right side on ff3.6.0 mac and 3.6.2 pc.

02-15-2011, 06:54 PM
Any idea what might be wrong with the CSS? Everything was running fine until the latest Firefox update.

/* CSS Document */

*{margin: 0; padding: 0;}

body{font-size: 14px; line-height:20px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#ffffff; background:url(http://www.wschouse.org/img/brick.gif) repeat;}

#container{width:1037px; margin:0 auto; padding:0;}

/* Header */
#headerContainer{width:1037px; height:404px; background:url(http://www.wschouse.org/img/bannerImage1.png) no-repeat;}
#logo{padding-top:7px; padding-left:96px; float:left;}
#tagline{padding-top:48px; padding-left:40px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; font-weight:bolder; font-size:16px; float:left; line-height:24px;}
#pig{padding-top:32px; padding-left:216px; float:left;}
#invest{padding-top:48px; padding-left:8px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; color:#FFF; font-size:16px; float:left;}
#invest a {color:#FFF; text-decoration:none;}
#invest a:hover {color:#FF0; text-decoration:none;}

/* Menu */
#menuContainer{width:977px; height:38px; float:right; background:url(http://www.wschouse.org/img/bgMenu.gif);}
menu{width:100%; overflow:hidden; margin:0}
#menuGoods {width:977px; margin:0 auto; height:38px;}
#menuGoods ul {list-style-type:none; display:block; margin:0; padding:0;}
#menuGoods ul li {list-style-type:none; margin:0; padding:0; float:left;}
#menuGoods ul li a {font-size:14px; text-decoration:none; font-weight:bolder; margin:0; display:block; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; letter-spacing:1px; text-align:center;}
#menuGoods ul li a.one {margin-top:2px; margin-bottom:0px; margin-left:38px; margin-right:20px;}
#menuGoods ul li a.two {padding-top:2px; padding-bottom:0px; padding-left:0px; padding-right:20px;}
#menuGoods ul li a:hover {text-decoration:none; color:#FFF;}

/* Content */
#content{width:977px; float:right; margin:0 auto; background:url(http://www.wschouse.org/img/bgConcrete.gif) repeat;}
#leftColumn{width:498px; height:100%; float: left; margin-left:20px; padding-left:34px; padding-right:34px; padding-top:36px; padding-bottom:12px; background:url(http://www.wschouse.org/img/bgOrange.gif) repeat;}
#leftColumn h1{font-size:30px; font-weight:bold; color:#FFF;}
#rightColumn{width:303px; height:100%; float:right; margin-right:20px; padding-left:34px; padding-right:34px; padding-top:36px; padding-bottom:12px; background:url(http://www.wschouse.org/img/bgBlue.gif) repeat;}
#rightColumn h1{font-size:30px; font-weight:bold; color:#FF0;}
p {display:block; margin: 0 0 20px 0;}
a {text-decoration:none; color:#fdca00;}
a:hover {text-decoration:underline; color:#fff;}
.lefty {float:left; margin:4px 10px 4px 0;}
.righty {float:right; margin:4px 0 4px 10px;}
h2 {line-height:30px;}
div#fadeshowWrapper {position:relative;}
#fadeshow1 {position:absolute; bottom:0px; z-index:8;}
#fadeshow2 {position:absolute; bottom:0px; z-index:8;}
#fadeshow2toggler {display:none; position:absolute; top:21px; left:22px; z-index:20; width:457px;}

/* Footer */
#footerContainer{width:977px; height:19px; float:right; margin:0 auto; background-image:url(http://www.wschouse.org/img/footerImage.png)}
#socialMedia {width:177px; float:right; padding-left:800px; margin-top:10px;}


02-15-2011, 07:44 PM
When I experiment with it in firefox with firebug it seems to fix the issue if I add float left to the fadeshow1 div

#fadeshow1 {position:absolute; bottom:0px; z-index:8; float:left;}

but I'm not sure how it will work in "real life" and in other browsers

02-15-2011, 08:47 PM
That worked. Thanks much! :D