0

I have a D3 Chart that is shown via a JQuery UITab and an AJAX command. Here's the actual HTML that gets generated when a new chart is created:

activate: function( event, ui ) {
            var currentTab = $(ui.newPanel);
            var chartId = 'chart-' + currentTab.attr("tabCounter");
            var c = currentTab.children("._container");
            c[0].innerHTML ='<div class=\"circle xLoader\"></div><div class=\"circle1 xLoader\"></div> <div class=\"loading xLoader\"> Loading... </div>' + '<div id="'+chartId+'" class="chart with-3d-shadow with-transitions"><svg></svg></div> <span class = \"favorite\" status = \"off\"> &#9734</span>';

As, I'm designing this for a small, screen, when I start to scroll through the chart, the screen automatically jumps to the "top" of the jquery tabs (where all the tabs) are shown. How can I get this top stop?? -- to not lose the "place" as it were".

Edit: I've realized this happens when I use the jquery-mobile plugin... so it's something there that's causing it...

Thanks!

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
user1357015
  • 11,168
  • 22
  • 66
  • 111
  • Do you have some triggers in some places? Typically, when I run into this, I start throwing preventDefault() everywhere, but I doubt that'll help you, here. – rm-vanda Feb 14 '14 at 05:19

1 Answers1

0

The solution is related to the post here:

JQuery UI Tabs Causing Screen to "Jump"

I fixed it by putting everything in a div container with a set height. Hope this helps someone in the future.

Community
  • 1
  • 1
user1357015
  • 11,168
  • 22
  • 66
  • 111