jquery tabs are choking

[tomjohnson1492]

I integrated a couple of jquery tab plugins into oxygenxml, and they seem to work fine in Firefox. But in Chrome, when I click a few of the tabs, the tabs freeze while half loading and I'm not sure why. Here's the demo: http://idratherbewriting.com/ditaqrg/#tabs_demo.html

Try it in Firefox first. It loads okay.

Now try it in Chrome. This is what happens:



I am using this plugin: http://www.jacklmoore.com/notes/jquery-tabs/

I thought it might be the plugin, so I switched and tried this one: http://os.alfajango.com/easytabs/

Here's the demo: http://localhost/ditaqrg/#jquerytabsdemo.html

Same issue. In Chrome there's some issue with the tabs loading -- they freeze while half loading. Can you tell me how to fix this? Is it because of the frames output for some reason?

[tomjohnson1492]

I'm pretty sure the issue is related to the webhelp's frames. If I go to the index_frames.html output, the loading issue goes away: http://idratherbewriting.com/ditaqrg/in ... _demo.html

However, I don't want to use the index_frames.html output because it doesn't provide direct links to any content.

[tomjohnson1492]

darn, I was hoping you would have a solution for this. Any thoughts?

[sorin_ristache]

Hi Tom,

The Chrome browser has some issues with JavaScript code in a page that uses internal frames (idiv elements) and the web page is local (hosted on the local computer and loaded in the browser with file://...). For example this is what the warning dlao g box says if you laod the Webhelp pages (index.html) created by the Oxygen WebHelp transformation in Chrome from the local computer (file://...).

Please try also from a web server, so that you load the page in Chrome through http://localhost/.... Does it work if loaded by HTTP?

[tomjohnson1492]

Thanks. So you don't see any of the loading issues I described in the web link I sent? It's all a local issue?

[sorin_ristache]

I thought you tested the tab plugin on some local WebHelp files. I don't see any tabs, in Firefox and in Chrome, and I don't see the partial tab that you showed in your screenshot, in Firefox and in Chrome. I tried both links:

http://idratherbewriting.com/ditaqrg/#tabs_demo.html

http://idratherbewriting.com/ditaqrg/in ... _demo.html

This is what I see in Firefox which you say should work correctly:



It does not matter if I click on the links for Tab 1, Tab 2 or Tab 3. The WebHelp page stays exactly the same in both Firefox and Chrome, as in the above image. What build number of these browsers do you use?

[tomjohnson1492]

sorry, i scrapped the other plugins and pages because the jquery plugin was refreshing in a really awkward way. i implemented a new one with cookies here: http://idratherbewriting.com/ditaqrg/#j ... bs_v3.html

however, this one has problems too. In FF, the tab content doesn't appear. in chrome it seems to work okay but i still see the loading issue every now and then. in Safari it works pretty well. can you tell me how it works for you in Chrome and FF?

thanks.

[tomjohnson1492]

I'm now using this plugin: http://blog.navayan.com/simple-and-easy ... G7wr1fF_yM

my goal is to make tabs like on this twilio site: http://www.twilio.com/docs/api/rest/conference

the tab choices are sticky from one page to another. if someone chooses javascript on one tab, they shouldn't have to select it on another. that's why the cookies are important.

can you provide any insights or tips on implementing this?

[sorin_ristache]

Hi,

The cookie based jQuery plugin that you tried requires a fixed structure in the XHTML page which can't be obtained in a DITA transformation without customization of an XSLT transformation. SO this plugin is difficult to integrate in a DITA transformation.

I recommend the UI jQuery plugin which is straightforward to add to a DITA transformation. Please let me know if you can't implement the tabs using this plugin.

[tomjohnson1492]

Thanks. I'll give this one a shot. I attempted to integrate it earlier, but I had trouble merging the jQuery UI JS file with the existing jQuery code already on the site. Something ended up interfering. Do you know if there's a jQuery merge tool available?

[sorin_ristache]

I don't know about any jQuery merge tool. In the WebHelp pages we just use jQuery version 1.8.2 and jQuery UI version 1.8.2 and it works. Both jQuery and jQuery UI are included by default in the built-in WebHelp transformation, so you don't need to include an additional .js library in the Oxygen WebHelp pages. You just need to add the JavaScript code for creating the tabs.

[tomjohnson1492]

Can you send me a working webhelp that shows these tabs incorporated? I can't get it to work. Here's what I did. In the webhelp_topic.js file, I added this:

Code: Select all

 $( "#mytabtopic__tabs" ).tabs();

Then in a DITA topic I added this:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">

<topic id="mytabtopic">

  <title>Tabs demo 3</title>

  <body>



    <section id="tabs">

      <ul>

        <li><xref href="#tabs-1">Tab 1</xref></li>

        <li><xref href="#tabs-2">Tab 2</xref></li>

        <li><xref href="#tabs-3">Tab 3</xref></li>

      </ul>

  

        <sectiondiv id="tabs-1">

          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

        </sectiondiv>

        <sectiondiv id="tabs-2">

          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable sourc

        </sectiondiv>

        <sectiondiv id="tabs-3">

          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on 

        </sectiondiv>

      <!--End tabs container-->

    </section><!--End tabs-->

    

  </body>

</topic>

The result doesn't have any tabs. What am I doing wrong?

[sorin_ristache]

You should add in your WebHelp pages the code that I told you that creates the tabs. For example if you use the ID value my-tabs on the tabs container then you just need to add the following code because the necessary jQuery files are already included by default in the WebHelp pages:

Code: Select all

 <script type="text/javascript">

$(function() {

$( "#my-tabs" ).tabs();

});

</script>

[tomjohnson1492]

I'm not really sure I understand what you're saying. I don't want to implement tabs by editing my files after I transformed them to HTML. I want to put the code into the DITA topic and have the tabs appear in the HTML output.

In a DITA topic, this code isn't valid:

Code: Select all

<div id="tabs">

  <ul>

    <li><a href="#tabs-1">Nunc tincidunt</a></li>

    <li><a href="#tabs-2">Proin dolor</a></li>

    <li><a href="#tabs-3">Aenean lacinia</a></li>

  </ul>

  <div id="tabs-1">

    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

  </div>

  <div id="tabs-2">

    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

  </div>

  <div id="tabs-3">

    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>

  </div>

</div>

You have to use DITA elements and look to see how they render in the HTML output. That's why I used:

Code: Select all

<topic id="mytabtopic">

  <title>Tabs demo 3</title>

  <body>



    <section id="tabs">

      <ul>

        <li><xref href="#tabs-1">Tab 1</xref></li>

        <li><xref href="#tabs-2">Tab 2</xref></li>

        <li><xref href="#tabs-3">Tab 3</xref></li>

      </ul>

  

        <sectiondiv id="tabs-1">

          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

        </sectiondiv>

        <sectiondiv id="tabs-2">

          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable sourc

        </sectiondiv>

        <sectiondiv id="tabs-3">

          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on 

        </sectiondiv>

      <!--End tabs container-->

    </section>

Note that I used

Code: Select all

#mytabstopics__tabs

to trigger the script. That's because when Oxygen renders the ID of a section into HTML, it prepends the topic_id before the section ID.

Can you send me Oxygen DITA files that has the tabs code correctly configured so that tabs appear in the output?

[sorin_ristache]

In a DITA topic, this code isn't valid:

. . .

That's why I used:

. . .

Note that I used

Code: Select all

#mytabstopics__tabs

to trigger the script. That's because when Oxygen renders the ID of a section into HTML, it prepends the topic_id before the section ID.

That is all correct.

Can you send me Oxygen DITA files that has the tabs code correctly configured so that tabs appear in the output?

I just realized that Oxygen includes by default in the WebHelp pages a customized version of the jQuery UI plugin in which the tabs part will not work correctly with the jQuery version used by Oxygen. You need to use a jQuery UI version from the jQuery website that was not modified/customized, for example by replacing the following code in the template called "create-js-scripts" in the file OXYGEN_INSTALL_DIR\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\createMainFiles.xsl:

Code: Select all

<script type="text/javascript" src="oxygen-webhelp/resources/js/jquery-ui.custom.min.js"><xsl:comment/></script>

with this code:

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"><xsl:comment/></script>

Also you need to add the jQuery UI CSS by adding a reference to jquery-ui.css (for example a reference to http://code.jquery.com/ui/1.8.2/themes/ ... ery-ui.css like: <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.2/themes/ ... ---></link>) in template "jsAndCSS" in the file OXYGEN_INSTALL_DIR\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\xsl\dita\desktop\common.xsl as for the existing CSS references in that template, for example oxygen-webhelp/resources/css/webhelp_topic.css.

[tomjohnson1492]

Thanks. I'll give it a shot and report back when I try what you suggested.