Location of external CSS files

[interplanetjanet]

1) Script Title: AJAX Tabs Content Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem:
I'm very new at this.......Where should external css files (that are styling the 'fetched' pages) be located? I have three conditions - pages fetched via Ajax, pages fetched via Iframe and then the 'sub-pages' fetched again via Ajax from the nested link. In my case the 'sub-pages' are being fetched from a nested link from the Iframe from the main set of tabs. I hope this is clear.

Any direction would be greatly appreciated.....thanks.

[jscheuer1]

Pages fetched via AJAX alone should have their stylesheets associated with the 'top' or calling page. Those fetched via iframe alone should have their stylesheets associated with themselves. If, as I think you are indicating, a page is fetched via AJAX into a page loaded in an iframe, the styles for that content should be on the page in the iframe that is doing the fetching. If however, you are fetching from an iframe, but delivering the content to the 'top' page as AJAX fetched content, the style for that content should be associated with the 'top' page.

[interplanetjanet]

Thanks much ...worked beautifully.

For my education - what is the meaning of 'etched' content?

[jscheuer1]

Typo, I meant fetched. Spell checker didn't catch it because etched is a word. Now fixed in my previous post.

[interplanetjanet]

If however, you are fetching from an iframe, but delivering the content to the 'top' page as AJAX fetched content, the style for that content should be associated with the 'top' page.

I'm thinking that what you mentioned in your last line is what I’m looking to accomplish but I’m not sure how. Currently I have nested tabs that are fetched from the one of the main tabs via Iframe displayed as a very long list of links in a column sidebar. The content from any of the sidebar links (when clicked) is displayed in a <div> along side of it. But it is all within the Iframe, so all of the content (side bar and subcontent ) all move together which defeats the purpose of using the Iframe for me.

Is there a way to get the sidebar (the nested links) to sit in the Iframe with a scroll bar just for it and the subcontent to be displayed in a <div> so a user can scroll down the sidebar and still see the subcontent adjacent to it?
Thanks.

[jscheuer1]

I may need to see the page. But it sounds like the script and styles should be on the 'top' page. On the page in the iframe you should have links like so:

<a href="javascript: parent.mypets.loadiframepage('http://www.google.com');">Google</a>

or:

<a href="javascript: parent.mypets.loadajaxpage(somepage.htm);">Some Page</a>

Where mypets is the instance of the ddajaxtabs on the parent or top page. The somepage.htm must be on the same domain, it's path would be relative to the top page, or could be absolute.

[interplanetjanet]

I can’t post a link to the site as it’s internal. But I thought it might be helpful to see a screen shot (see attached) of the top page showing the selected tab instance ‘Materials and Systems’ which is the selected #iframe content. In turn the nested tab instance ‘Concrete Slabs - Sealers’ is selected and that content is showing up in a <div> within the iframe. It’s all working fine but I would like to change it so the ‘Materials and Systems’ content is solely in the #iframe so the scroll bar affects only that content and the subcontent is static.

The code on the top page :

<div id="navbar1">
<ul id="knowledgetabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Welcome</a></li>
<li><a href="BuildingCodes.html" rel="maincontent" >Building Codes</a></li>
<li><a href="GeneralRefStdsMaterials.html" rel="maincontent">Reference Standards</a></li>
<li><a href="Division_NavBar.html" rel="#iframe">Materials and Systems</a></li>
</ul></div>

<div id="maincontent"> </div>

<script type="text/javascript">
var titles=new ddajaxtabs("knowledgetabs", "maincontent")
titles.setpersist(true)
titles.setselectedClassTarget("link") //"link" or "linkparent"
titles.init()

titles.onajaxpageload=function(pageurl){
if (pageurl.indexOf("Division_NavBar.html")!=-1){
}
}
</script>

and the code on the Division_NavBar.html page:

<div id="subtabs">
<h3>CSI Divisions</h3>
 <!-- CSI Div 3 -->
<p class="csidiv">Division 3 - Concrete</p>
<p class="subheader">Guidelines </p>
     
      <ul>
	li><a href="#" rel="#default" class="selected">Welcome</a></li>					
       <li><a href="Concrete_Sealers.html" rel="subcontent">Concrete Slabs - Sealers</a>
        </li>			 
        <li>
          <a href="Concrete_Slabs_Essential_Input.html" rel="subcontent">Concrete Slabs -
          Input to the Structural Engineer</a>
        </li>
</ul>
</div>

<div id="subcontent">
</div>


<script type="text/javascript">
var subtitles=new ddajaxtabs("subtabs", "subcontent")
subtitles.setpersist(true)
subtitles.setselectedClassTarget("link") //"link" or "linkparent"
subtitles.init()

</script>

Do you still recommend I implement the code in your last post? And if so I wasn't clear on the proper syntax for the instance. Thanks....

[jscheuer1]

Regardless of any other considerations, this:

titles.onajaxpageload=function(pageurl){
if (pageurl.indexOf("Division_NavBar.html")!=-1){
}
}

Looks like it could be a problem, at best it does nothing. You should either get rid of it, or put something in the conditional that does something.

Now to answer your basic question, yes. And the instance would be titles, so you would have (on Division_NavBar.html) links like:

<a href="javascript: parent.titles.loadiframepage('http://www.google.com');">Google</a>

or:

<a href="javascript: parent.titles.loadajaxpage(somepage.htm);">Some Page</a>

If you need these to go into specific existing tabs on the parent, we can probably do that, but let's just get the loading part working first.

Now we could also go another route. Say you put the tabs you want and their initialization on the top page. You may then select them like so from the page in the iframe:

<a href="javascript: parent.instanceName.expandit(3);>Select Fourth Tab on Top Page</a>

Where once again, the instanceName would be the variable you defined for that set of tabs on the parent page.