Databases
StackOverflow2013
Postsdbo
POJQuery UI Tabs not mapping to content divs correctly in different versions of IE8
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery UI Tabs not mapping to content divs correctly in different versions of IE8
    primarykey
    data
    text
    <p>I've have a webpage which I've added JQuery UI tabs too. The HTML code is generated by a third party which I have no control over but its mostly as JQuery expects. When the page is viewed on my machine its working correctly however the clients machine renders the tabs along the top but all the tab contents are listed one after another under the first tab. So it's finding the tabs but not the content Divs. I've tried it in chrome and the tabs work correctly. </p> <p>Working on : IE 8.0.6001.19393 broken on : IE 8.0.7601.17514 </p> <p>What's different between these 2 browser version that would affect the browser content tabs? Upgrading the browser is not an option as it's set at corporate level.</p> <p>UPDATE: As mentioned earlier I'm having to work against set html which requires a few tweaks before the tabs can be rendered. Mainly the href on the tabs links start off incorrect are are pointing to hidden anchors i.e. href="#profile1" when they should be href="#profile_1".</p> <p>I use this code to reset the urls prior to calling tabs:</p> <pre><code> var i = 1; $('#ProfileTOC ul li a').each(function () { $('#profile' + i).remove(); $(this).attr('href', '#profile_' + i); i++; }); </code></pre> <p>Now looking through the Jquery code the only difference I've found so far is when the tabs are created it calls "islocal" which returns true on the working browser and false on the broken browser. The reason being JQuery is using full http://* urls for the working tab anchors while the broken browser is using just the #anchor url missing the http:// completely. Which makes "islocal" return false; I think its the map function which seems to be doing different things:</p> <pre><code> this.anchors = this.tabs.map(function() { return $( "a", this )[ 0 ]; }) .addClass( "ui-tabs-anchor" ) .attr({ role: "presentation", tabIndex: -1 }); </code></pre> <p>after this one browser has full URLs for each anchor while the other has relative. If I remove the URL changing code the URLs are full paths again but obviously still incorrect.</p> <p>I've hacked the JQuery UI code to remove the islocal check and the tabs work but I'd like to know why and possibly get it working without hacking the jQuery UI code. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJammy
    1. USJammy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIt would help if you posted a [SSCCE](http://sscce.org/)
      singulars
      1. POJQuery UI Tabs not mapping to content divs correctly in different versions of IE8
      1. USSam I am
    2. COI've never heard of such a small revision difference in IE8 being caused by any jQuery code. Odds are it's something else.
      singulars
      1. POJQuery UI Tabs not mapping to content divs correctly in different versions of IE8
      1. USj08691
    3. COAgree with ^ J, sometimes, Chrome can make up for poorly structured DOM elements (think like... missing a /div tag), whereas IE is poor at it. It's probably that's what's happening here, and as a result it works in "good" browsers, and sucks in IE. Without code samples though, we can only hypothesize.
      singulars
      1. POJQuery UI Tabs not mapping to content divs correctly in different versions of IE8
      1. USBrian Vanderbusch
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload