0

I appreciate there are many questions on this topic, and I suspect some are really close to what I want, e.g. JQuery UI Tabs Causing Screen to "Jump"
Stop jquery TABS from jumping / scrolling up when clicked on?
Jquery tabs: How do I stop the jump on click?

but I haven't found one that quite solves my problem...

I have implemented jQuery Tabs with adding and removing (similar to this: http://jqueryui.com/tabs/#manipulation), but with the content of each page pulled via Ajax (similar to this: http://jqueryui.com/tabs/#ajax).

This all works fine apart from whenever I add a new tab, the browser jumps to the top of the page. This jump only occurs when I add a new tab - if I click between the different tabs later it does not jump at all.

I have tried using preventDefault() and return false on the anchors, but this doesn't seem to affect their behaviour. The URLs of the anchors are actual links without hashtags.

What does work is setting the height of the tabs container to something very large. This allows me to open tabs without the jump occurring... but it doesn't seem a very elegant solution. I should point out that the tabs are all of different heights themselves, so I can't really determine a fixed height.

Is that all there is on the topic, or is there something I might have missed?

Here is the code I am using (largely copied and pasted from the jQuery documentation):

var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();

function addTab(document_id, document_name) {
var label = tabTitle.val() || document_name,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, 'document/'+document_id).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.tabs( "refresh" );
tabs.tabs( "option", "active", tabCounter-1);
tabCounter++;   };
Community
  • 1
  • 1
davidofyork
  • 1
  • 6

1 Answers1

0

try this.

var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();

function addTab(document_id, document_name) {
  var label = tabTitle.val() || document_name,
  id = "tabs-" + tabCounter,
  li = $( tabTemplate.replace( /#\{href\}/g, 'document/'+document_id).replace( /#\   {label\}/g, label ) );
  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.find( ".ui-tabs-nav a" ).click(function(e) {
  e.preventDefault(); 
 });
 tabs.tabs( "refresh" );
 tabs.tabs( "option", "active", tabCounter-1);
 tabCounter++;   };
Dipak Yadav
  • 114
  • 17