Tab Content Script vs. Ajax Tab Content Script (v 2.0)

[Kamenote]

Tab Content Script (v 2.0)
http://www.dynamicdrive.com/dynamici...tabcontent.htm

Ajax Tab Content Script (v 2.0)
http://www.dynamicdrive.com/dynamici...tent/index.htm

Hello,

I'm new here. I wish I'd found dynamicdrive earlier!

I'm trying to build an interface with tabbed panels that is effective from an SEO point of view (i.e. I'd like all the panel content to come down in one go) but that is also effective from a page load time (i.e. quick). Most of the pane content is generated on the fly from a back end CMS/database system except for one panel that contains a Google map. I don't care about this panel content being indexed by search engines so I'd like to speed up the page load by only generating the Google map on the panel when (and if) the viewer selects the Map tab.

At the moment the map generation is hooked to the body onLoad event. Is there a similar panelOnDisplay type event that I could hook into or is there a better way of doing this with one of the two Tab Content scripts above?

Thanks for your help.

regards,

Kamenote-bill

[ddadmin]

Ajax Tab Content script would definitely be the way to go then, since one of your tabs will be a Google map. Use the IFRAME option for this tab, so the Google map is embedded as an IFRAME content, ensuring any event handlers is run properly.

FYI all contents loaded within Ajax Tab Content is search engine friendly, as they exist as regular links, specifically, each defined as a tab link.

[Kamenote]

Thanks for your reply and advice. I've tried to get the simple "countries" part of the demo working as an initial test. If I leave out the script that ends countries.init() then I get the pretty tab bar with the options. These tabs work in that the browser jumps to the external pages but in the whole of the current window as you'd expect. When I insert the script at the end nearly 95% of my layout gets blown away and many items don't appear at all.

I'm using a three column fluid layout that has a fairly complex nested div structure. The HTML that generates the main body content is:

<div id="mainBody">

<h2>Articles</h2>

<h3><a target="_blank" href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm">DynamicDrive.com Ajax Tabs Content Script (v 2.0)</a></h3>

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

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

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

</div> <!-- mainBody -->

I don't know if that helps or, at this stage, what other information I can give you to help. The only other hint of a problem that I'm getting with Firefox is a JavaScript console message:

Warning: anonymous function does not always return a value
Source File: http://lcl.***/dynamicdrive.com/ajaxtabs/ajaxtabs.js
Line: 49
}

The demo.htm from the zip file works without any problems on my system.

Thanks in advance for any pointers/help you can give me.

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Kamenote]

I'm doing my test and development on in internal server. It's not currently available on an Internet site. I'll see if I can make a extract that shows the problem that can be mounted publicly. Might take me a day or two with the work load I've got at the moment. I'll get back to you. Thanks.

[Kamenote]

Hello,

I have put up two test pages:

www.24031951.com/withoutscript.html

and

www.24031951.com/withscript.html

The "withoutscript" has everything in it except the script code:

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

The "withscript" obviously contains the script section above.

The layout seems to work as I intended. The version with the script inserted produced a screwed up layout. The strange thing is, and I don't understand this at the moment, that just commenting out the script code with JavaScript comments doesn't fix the problem.

I hope that gives you enough to look at to explore the problem. I'm grateful for your help.

with thanks in advance,

Kamenote

[ddadmin]

Found your culprit. One of the script references in your page is missing a closing </script> tag:

<script type="text/javascript" src="test9_files/ajaxtabs.js"></script>

The part in red should be added in.

[Kamenote]

Thank you! Silly of me not to have spotted that. I must get a better HTML editor! I should have at least used an HTML validator.

Thanks again.

regards,

Kamenote