Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jan 2008
    Location
    Lincolnshire, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  3. #3
    Join Date
    Jan 2008
    Location
    Lincolnshire, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    HTML Code:
    <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:

    Code:
    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.
    Last edited by Kamenote; 01-22-2008 at 05:18 AM.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

  5. #5
    Join Date
    Jan 2008
    Location
    Lincolnshire, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Jan 2008
    Location
    Lincolnshire, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Test pages available

    Hello,

    I have put up two test pages:


    and


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

    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

  7. #7
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    <script type="text/javascript" src="test9_files/ajaxtabs.js"></script>
    The part in red should be added in.

  8. #8
    Join Date
    Jan 2008
    Location
    Lincolnshire, UK
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •