Hi guys..

my main feature on this layout uses hidden divs and a javascript that slides through them.

It's working fine in IE.. but doesn't show up at all in Firefox.

Now i've read places that firefox doesn't like support Visibility: hidden... but does support display: block / none.

So I tried switchin the visibility portions of the script to display: none... and it gave me the same result.

Please someone view source on this link, and see if you can help me get to the bottom of this.

GEO GIFTS

Thanks!
-Mike

Your using document.all which is IE only I think. Someone please correct me if I'm wrong about this.

On the image you want to change use id="SlideShow" and then in the JavaScript you can access the image with.

image = document.getElementById("SlideShow")

and then:

image.style.

However there's one more problem. Those filters you're trying to use while a nice effect are also IE only. So they just won't work anywhere else.

Hi, I'm not going to worry about the top fading images for now.. but I just want to get the featured product area working.(the one with NEXT and PREV buttons).

I'll post the javascript for that as it was located in 'slide.js':

 
// Cross-browser cleanup by Paul Anderson, CNET Builder.com. All rights reserved.
var numSlides = 4;
var currentSlide = numSlides;
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].style=document.all[("image"+i)];
}
switchSlide(1);
}
function switchToSlide(sDir) {
newSlide = sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+currentSlide)].style.visibility="hidden";
document.all[("image"+newSlide)].style.visibility="visible";
currentSlide = newSlide;
}
 
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].style.visibility="hidden";
currentSlide = newSlide;
}

and here's the code for creating my 4 hidden divs from the database:

 <span id="feature" style="position:relative;">
<?
$count =0;
while ($row = mysql_fetch_assoc($result)) {
$count++; $imageid = "image".$count;?>
<DIV id="<?echo $imageid ?>" class="slides">
<table cellpadding=0 cellspacing=0 style="height:245px; border: 1px solid #1A82AC;">
<tr height="165">
<td align=center valign=middle>
<a href="feature.php?show=<?echo $row["feat_id"];?>"><img src="<?echo $row["image_file"];?>" border="0" class="lg"></a>
</td>
</tr>
<tr height="80"><td valign=top bgcolor=#E8F2F7 style="padding: 5px;">
<h1><?echo $row["feature_name"];?></h1><?echo $row["short_desc"];?>
<div style="float: right;"><strong><a href="feature.php?show=<?echo $row["feat_id"];?>">Read More...</a></strong></div></td></tr>
</table>
<table><tr><td align="left"><a href="javascript:switchSlide(-1)">&laquo; Prev</a></td><td align="center"><a href="javascript:switchToSlide(1)">1</a> - <a href="javascript:switchToSlide(2)">2</a> - <a href="javascript:switchToSlide(3)">3</a> - <a href="javascript:switchToSlide(4)">4</a></td><td align="right"><a href="javascript:switchSlide(1)">Next &raquo;</a></td></table>
</div>
<? } mysql_free_result($result); ?>
</span>

Now with the fix that you just gave me, i'm not quite sure exactly how to implement it.. i'm kinda confusing myself here. Please help further. Thanks

solved

here's the working code:

// Cross-browser cleanup by Paul Anderson, CNET Builder.com. All rights reserved.
var numSlides = 4;
var currentSlide = numSlides;
function setUp() {
switchSlide(1);
}
function switchToSlide(sDir) {
newSlide = sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.getElementById("image"+currentSlide).style.display="none";
document.getElementById("image"+newSlide).style.display="block";
currentSlide = newSlide;
}

function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.getElementById("image"+currentSlide).style.display="none";
document.getElementById("image"+newSlide).style.display="block";
currentSlide = newSlide;
}

I'm not sure if you've been working on it since you last posted, but that section is looking the same to me in both Firefox and IE. Have you managed to get ot working or am I missing something?

Right now the only difference I'm seeing between the two browsers is that in IE the images at the top do have the fading where they don't in Firefox. Everything else is looking the same though I have been known to miss things in the past. Am I missing something now?

Looks like you solved things just as I was posting that it looked like it was working.

Glad you got it all worked out and it looks good.