Log in

View Full Version : Height issue with Ajax Tabs Content script v2.2


TomT
04-16-2009, 09:54 PM
1) Script Title:
Ajax Tabs Content script v2.2

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem:
I've set up a simple 4 tab layout. This looks fine in Firefox 3, but in IE7 the height of the iframe is a lot smaller.

Is there anyway to get the iframe the same height and width in IE & Firefox ??

Here is my test code:

index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>
</head>
<body>

<ul id="countrytabs" class="shadetabs">
<li><a href="1.php" rel="#iframe">1</a></li>
<li><a href="2.php" rel="#iframe">2</a></li>
<li><a href="3.php" rel="#iframe">3</a></li>
<li><a href="4.php" rel="#iframe">4</a></li>
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:1000px; margin-bottom: 1em; padding: 10px"></div>

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>

This is my ajaxtabs.css


/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

Thanks in advance. :)
ddadmin
04-17-2009, 09:18 AM
Inside the .js file, the HTML used to create the IFRAME is the following line:


this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'

The above by default means the iframe's height should automatically be based on the height of the content DIV container which houses it, but if for some reason that's not working properly, you can either directly modify the HTML above, or style the "tabcontentiframe" CSS class with an explicit height value.
BrightStarPro
08-28-2009, 06:21 AM
I'm having the same problem as well. I've changed the height of the tabcontentiframe which does adjust accordingly in Firefox, but it appears to have no effect in IE8. I'm still trying to troubleshoot this... Any suggestions?
BrightStarPro
08-28-2009, 08:17 AM
Just to visually demonstrate what I'm experiencing...

Here's a screen cap in Firefox 3 of my Ajax tabs using iframes to display content:
http://www.brightstarpro.com/myjeunesse/dynamicdrive/ajax_tabs_content_script_in_ff3.jpg

And here's a screen cap in Internet Explorer 7 (and 8 is no different) using the exact same Ajax tabs with iframes displaying the content:
http://www.brightstarpro.com/myjeunesse/dynamicdrive/ajax_tabs_content_script_in_ie7.jpg

As you can see the height of the scroll bar in the iframe from FF matches the height of the div, but in IE the iframe is locked into being just one height. It's causing the scroll bar to appear when not needed, and when it is, its locked into that specific height, which causes it to be shorter than the height of the div.

I've edited this specific line of code from the ajaxtabs.js file (specifically the line that starts with "min-height") to edit the height of the iframe (to my knowledge this is the only way to control the height of the iframe in this whole script):

this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 215px"></iframe>'

It works great in FF. But no matter what I value I set it to, the height of the iframe remains constant in IE... WHY?!

Here is the script which contains the actual tabs

<ul id="countrytabs" class="shadetabs">
<font face="trebuchet ms">
<li><a href="hydrating_cleanser_description.htm" rel="#iframe">DESCRIPTION</a></li>
<li><a href="hydrating_cleanser_ingredients.htm" rel="#iframe">INGREDIENTS</a></li>
</ul>
</font>

<div id="countrydivcontainer" style="border:1px solid gray; width:325px; height:215px; margin-bottom: 1em; padding: 0px">
//Optional default content here.
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

These two code sets are the only things I've edited in the script. If anyone can provide any assistance, I'd be very grateful.

Thanks
BrightStarPro
08-29-2009, 06:04 AM
*bump*
PeteB
03-23-2010, 02:07 PM
I got all the problems above, and each suggested solution had no effect.

But I got it to work by amending :

class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'

to be:

class="tabcontentiframe" style="width:100%; height:100%; min-height: 100px"></iframe>'

hth