Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    SoCal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide/Show Div javascript iframes wont work in IE

    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:

    Code:
    <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:
    Code:
    <div align="center" class="class1">
    
    <a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
          <span class="class1">Family      </span></a> 
    
    | 
    
    <a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('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>

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Location
    SoCal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No one?

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Location
    SoCal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Reload Div Content Javascript

    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!


  •  

    Posting Permissions

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