My organization just upgraded from 4.7 to 5.0, and two of the four sites on our codebase (http://www.newamerica.net and http://www.newamerica.net/education_budget_project/) make heavy use of the Tabs module.

Everything works great in Firefox, Safari, etc., but odd things are happening when you view tabs in Internet Explorer:

  1. When viewing a page that includes tabs in IE6 or IE7, a pound sign (#) is added to the end of the URL as soon as the page loads. (which is curious, but not really a big deal)
  2. For some installs of IE6/7 -- but not all -- loading one of these pages "bounces" you to the bottom of the page before coming back to the top. Almost as though the # sign was necessary "top of page" anchor or something. (still not a big deal, but mildly irritating)
  3. For other installs of IE6/7 -- but again, not all -- any page that doesn't have tabs jumps to the very bottom of the page after it loads and stays there. (this one, imho, does qualify as a big deal)

And here are the parts that are really confusing me:

Any clues as to what the culprit might be? (Other than using IE, I mean...) Are there any known "no-nos" in ones theme that could cause this, or problems of "old-school" javascript and jquery stuff not coexisting well?

And is anyone else having some/all of these problems? Links to other Drupal5.x sites with the tabs module running would be helpful in narrowing down the cause.

Forgetting about the browser-to-browser variation for a moment, the fact that only one of our sites produces Problem #3 makes me think there's a conflict with some other script in our theme and/or another module. But there's not much other javascript there. I tried disabling nice_menus and the block on the homepage that rotates quotes, and it made no difference.

So in other words, I'm stumped -- and would really appreciate any help or suggestions!

Thanks
TKS

Comments

TKS’s picture

TKS commented
Status: Active » Fixed

A quick update, just in case anyone else runs into a similar problem.

We've fixed the bottom-of-page behavior. (The # sign still appears in the URL for all pages with tabs when using IE, but I'm assuming that's a intentional IE kludge until nedjo or someone else tells me differently.)

The problem wasn't conflicting javascript, or anything in our custom theme per se -- it was that the following tabs-related code was being pulled into the header for *all* our pages, regardless of whether or not they contained tabs:

      <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
      <!--[if lte IE 7]>
      <link rel="stylesheet" href="sites/all/modules/jstools/tabs/tabs-ie.css" type="text/css" media="projection, screen" />
      <![endif]-->

...

<style type="text/css" media="all">@import "/sites/all/modules/jstools/tabs/drupal-tabs.css";</style>
<style type="text/css" media="all">@import "/sites/all/modules/jstools/tabs/tabs.css";</style>

...

    <script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/sites/all/modules/jstools/tabs/jquery.tabs.pack.js"></script>
<script type="text/javascript" src="/sites/all/modules/jstools/jquery.history.pack.js"></script>
<script type="text/javascript" src="/sites/all/modules/jstools/tabs/tabs.js"></script>

The cause was a block with tabs that we use on our homepage. Because the region it appears in exists only in the homepage, the configuration settings for that block didn't specify that appear only on . So even though the block itself couldn't actually display on other pages, Drupal was still loading in all the necessary modules and their related files -- which makes sense, now that I actually know the cause...

Nothing like two days of trial-and-error troubleshooting -- but a good object lesson on why it's important to not get sloppy with your site settings!

Anyway, switching the status of this post to "fixed"

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)
jenlampton’s picture

jenlampton
she / her
commented
Title: Strange Tabs Behavior in IE6 / IE7 » Strange Tabs Behavior in FF3
Version: 5.x-0.6 » 5.x-0.8
Status: Closed (fixed) » Active

I'm having a similar problem in FF3 with version 5.x 0.8

1) when I click on a tab, the url changes from /original-path to /original-path#tabblock1-2

2) most of the time #1 doesn't cause a problem, but randomly, it will cause the browser to jump to the location of that anchor on the page. It's not consistent when this happens. It doesn't depend on the tab, or where I was when I clicked it. I can't figure out what causes it to misbehave, or how to stop it.

For some reason the javascript doesn't execute fast enough (maybe?), and the browser does it's default anchor-rendering, locating the anchor and jumping to that point on the page.

This creates a miserable user experience, and I was wondering if there is anything I can do to guarantee my browser doesn't try to jump to those anchor points instead of just revealing the contents of said block. Are these anchor points even necessary? It seems to me that what the tabbed blocks should be doing is using javascript to change the class, and thus css of various elements, showing and hiding as requested. Why anchors?

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

The anchors are I think for non-js browsers.

I wonder if this is an issue with using an old version of the tabs jQuery library. One of those bugs fixed in recent versions. If so, we may be out of luck for the 5.x version.

You could test the 6.x version, http://drupal.org/project/tabs.

jenlampton’s picture

jenlampton
she / her
commented

Upgrading this site to D6 is not an option, I'm afraid. Why won't newer versions of the tabs jQuery library work on the D5 branch of this module? Is there something I can do to test that?
Jen

cjboranp’s picture

cjboranp commented
Assigned: Unassigned » cjboranp

Just wondering if #2 from the original post has been or can be resolved? I am in a similar situation as jenlampton where we also cannot upgrade.