Style IFRAme via CSS in Ajax Tabs Content Script

[RedRhino]

1) Script Title: Ajax Tabs Content Script (v 2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem: Hello everyone, I just started messing with this script and it works great. However, I have trouble style the dimensions of the IFRAME window in Tab 4 of the script. I just want to increase the height of it so users can view a greater segment of the page without scrolling.

I know this can be done via CSS, I'm just not sure how.

Any pointers would be greatly appreciated. Thanks.

[ddadmin]

The IFRAME used by Ajax Tabs Content carries the CSS class name "tabcontentiframe". With that in mind, you can modify its look using it in your CSS file, such as increase the height to a specific number like 500px:

.tabcontentiframe{
height: 500px;
}

[RedRhino]

The IFRAME used by Ajax Tabs Content carries the CSS class name "tabcontentiframe". With that in mind, you can modify its look using it in your CSS file, such as increase the height to a specific number like 500px:

.tabcontentiframe{
height: 500px;
}

Thanks. I've tried that, but it doesn't seem to have any effect. When you say "in your CSS file" do you mean the "ajaxtabs.css", the general css, or a new CSS, for example "iframes.css". It shouldn't really matter, right?

Thanks.

[ddadmin]

Nope, it shouldn't matter where that rule is placed. However, I've come across a couple of subtle issues that you need to be aware of in order for it to work properly. Firstly, the !important declaration should be suffixed to the "height" property defined within ".tabcontentiframe", for example:

.tabcontentiframe{
height: 500px !important;
}

This is needed because by default there is already an inline CSS "height" property added to the IFRAME generated by this script:

<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>

Since inline styles always trumps external styles, you need to throw in an "!important" to the external CSS rule to override it.

Secondly, even with the above CSS added, you may not see any effect on the IFRAME height. This can occur if the DIV container that holds your Tab Contents also has an explicit height declared, as seen in Demo #3 on the script page:

<div id="petsdivcontainer" style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
</div>

The way that CSS works, this height trumps any heights declared for its child elements. In that case, you may need to adjust the height of the Tab Content DIV as well.

[RedRhino]

Thank you so much, adding !important; did it. It works flawlessly now.

Just one more question. Whenever I switch between the tabs, there's a message "Requesting Content". Is there a way to style this message, too or will this be replaced by the loading image? I couldn't figure out, where to place the image or how to link to it.

Just out of curiosity, how will the search engines recognize the pages that are fetched via ajax? Do they have all the meta tags, as well? Thanks.

[ddadmin]

The "loading" message can be customized inside the .js file actually:

ddajaxtabssettings.loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."

Regarding search engines, none should have a problem crawling the external pages, since they are all defined as regular links on the page, for example:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

[dogshasha1]

.tabcontentiframe{
height: 500px !important;
}

I tried it and it works. Fantastic! However, I do have one more question.

I have 2 tab panels ( not 2 tabs ;-) Each of them includes an iframe. By using the method quoted above, I can only define one iframe's height. But I need my 2 iframes to have different height.


I tried to mess with ajaxtabs.js file. In the funtion iframedisplay, I add window.frames["_ddajaxtabsiframe-"+contentdivid].style.height="700px". But it even breaks the script.

Is there anyway to accomplish that? Can I pass parameters to the js file?

Thanks in advance,

[ddadmin]

Well, the CSS code:

.tabcontentiframe{
height: 500px !important;
}

firstly applies this height to all IFRAME contents in general. Then, for a particular script instance, you can fine tune this by using CSS's specificity rules. Since the IFRAME exists within the loaded content DIV, just add something like the below to your CSS code to target a specific script instance:

#countrydivcontainer .tabcontentiframe{
height: 500px !important;
}

Where "#countrydivcontainer" is the ID of the content DIV for that script instance:

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

[spdl]

And how could I adjust the div height, if I have different heights in the different tabs?

The idea is to have the iframe not scrolling, but extend the container div as if the page would not be loaded in an iFrame.

The reason is, that I have to use iFrames due to some incompatibilities of loading a second page in a div (CMS system).

Thanks
ralph

[spdl]

I might have found the solution myself.

1. I removed all heights defintions from the iFrame
2. I gave the iFrame an id="containerFrame".
3. I added this javascript on each page that gets loaded
(it is an adaptation from here:
http://news.hping.org/comp.lang.javascript.archive/13578.html)

4. To work properly in Explorer I have to put this line twice!!:

 var the_height= parent.document.getElementById('containerFrame').contentWindow.document.body.scrollHeight;

(Never tested on real conditions only on desktop)
Explorer is also responsible that I have to make the container div first really high and then calculate the height of the iFrame....

function calcHeight()
{
    //***** calculate height ******
  
  // Explorer: Set external div as high as possible
  parent.document.getElementById('petsdivcontainer').style.height="1200px";
  
  // get Height of iFrane
  var the_height= parent.document.getElementById('containerFrame').contentWindow.document.body.scrollHeight;
  var the_height= parent.document.getElementById('containerFrame').contentWindow.document.body.scrollHeight;

  //change height
  parent.document.getElementById('containerFrame').style.height= the_height + "px";
  parent.document.getElementById('petsdivcontainer').style.height= the_height + "px";
}

calcHeight();



</script>

Only disadvantage: In Firefox the scrollbar of the main window flickers shortly.
Can I prevent the update of the Firefox scrollbar for a moment.

Maybe someone can improve on these browser bugs....

ciao
ralph