...

View Full Version : Hide/Show Div javascript iframes wont work in IE



eyeheartart
12-31-2010, 12:11 AM
Hi,

I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style.

It works great in most browsers, except Internet Explorer :(. For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine).

I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them.

The page can be viewed here: www.raynemakerimages.com/galleries.html
Firefox shows how it should display....

Anyway, I'm looking for a relatively easy fix for this....help is appreciated.

Thanks.

Coding:


<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>

The hide/show links:

<div align="center" class="class1">

<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),Hid eContent('miscellaneous')" class="style1 style32">
<span class="class1">Family </span></a>

|

<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideC ontent('miscellaneous')" class="style1 style32">
Artistic </a>
|

<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous' )" class="style1 style32">
Intimate </a>

|

<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
Maternity </a>
|

<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous' )" class="style1 style32">Newborns </a>
|

<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>

</div>


The slideshows:


<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)">
<tr>
<td>
<div id="family">
<p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td >
<div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
<tr>
<td>
<div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div>
</td>
</tr>
</table>

eyeheartart
01-05-2011, 03:59 AM
No one?

eyeheartart
01-27-2011, 11:58 PM
Okay.... Simplified it a bit - changed it to : javascript:HideAllShowOne('name')

But the galleries still do not load in IE.

I realized the problem in IE is that once the first gallery loads ('family'), the other galleries will not, so that even when you click to show their div layer, they do not play.

What I would like to do is add a javascript function which reloads that unique div's content when you click its link to show it, that way its corresponding gallery will load. I'm not sure how to go about doing that though....

Any suggestions? Is this even the correct or a good solution?

Help is appreciated!!!

FYI: I'm mainly a print designer & tend to just follow tutorials for web stuff, so my ability/knowledge is limited. I'm looking for a simple solution I can copy+paste and/or which only need very simple modification for my purposes.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum