iframe not appearing in div in IE and Firefox. Works fine in Chrome
I am almost positive the issue is me!
We are using Collegenet's online calendar service and in order to get their "spud code" which is actually an iframe, to appear in IE and Firefox, we needed the following code in our template:
- $(document).ready(function() {
- $(".navbar li a").click(function() {
- $(".dropdown-open").hide();
- $('iframe').css('height','4000px');
- });
- });
The code appears fine in Chrome. I am attempting to use similar code on another template but am not have any success.
Below is the jquery code I am using along with the html.
jquery:
- $(document).ready(function() {
- $("li.tabActive div).click(function() { //.modTabs .tabNav li.tabActive .tab
- $(".item1").hide();
- $('iframe').css('height','auto');
- });
- });
html: The red code is where my issue is. When the Events tab li is clicked, the iframe only appeas
- <div class="modTabs module">
- <ul class="tabNav">
- <li class="item0"><div class="tab">News</div></li>
- <li class="item1 tabActive"><div class="tab">Events</div></li>
- <li class="item2"><div class="tab">In the Media</div></li>
- </ul>
- <div class="item tabActive item0" style="display: none;">
- <h2 class="itemTitle" style="display: none;">News</h2>
- <h3>College of Education and Human Development News:</h3>
- <ul class="itemList">
- <li>
- <a href="#">
- <img width="60" height="60" alt="Graduate students sit in the crowd at commencement." src="img.jpg">
- <h4>Two Days of Commencement Celebrations Begin With Grad Ceremony<span> ›</span></h4>
- </a>
- </li>
- </ul>
- <p class="more"><a href="/news_events_media/news/">All News<span> ›</span></a></p>
- </div>
- <div class="item item1" style="display: block;">
- <h2 class="itemTitle" style="display: none;">Events</h2>
- <h3>College of Education and Human Development Events:</h3>
-
- <iframe width="100%" height="1611" scrolling="no" style="border-style:none;background-color:transparent;" name="trumba.spud.0.iframe" id="trumba.spud.0.iframe" src="javascript:'<html><head></head><body style=background-color:transparent></body></html>'" title="Photo Events"></iframe>
-
- </div>
- <div class="item item2" style="display: none;">
- <h2 class="itemTitle" style="display: none;">In the Media</h2>
- <h3>College of Education and Human Development In the Media:</h3>
- <ul class="itemList">
- <li><a href="#"><h4>Sample Title for In the Media<span> ›</span></h4></a></li>
- </ul>
- <p class="more"><a href="/news_events_media/in_the_media/">All In the Media<span> ›</span></a></p>
- </div>
- <span class="btm"></span>
- </div>
Any help is appreciated even if it's to let me know that I'm being an idiot and missing something obvious.
Thanks
Peter T