ftlabs/ftscroller

is there a 'refresh' method for the scroller

altoenergy opened this issue · 3 comments

altoenergy commented

I have a ftscrollable div with updateOnChanges = true.
There are some sub-elements of the div that I hide / show at runtime.

The scroller does not appear to respond to the (implicit) new size of the div caused by hiding / showing.

Is there a way to force 'refresh', or force whatever action is normally triggered by a genuine content change ?

rowanbeentje commented

Hi altoenergy,

The method you want is scrollerInstance.updateDimensions() (you don't ned to pass in dimensions - the docs need to clarify this).

Is all you're doing to trigger the problem setting a style.display property on one of the inner elements? Which browser version? We should probably pin that down...

altoenergy commented

Thanks, I will try that.

Yes, it's a simple show / hide on the element...

I have the following (crudely)

<div id='header'> // position : fixed
</div>
<div id='content'> // position : fixed
  <button>Show tab 1</button>
  <button>Show tab 2</button>
  <button>Show tab 3</button>
  <div id='tab1'>
  </div>
  <div id='tab2'>
  </div>
  <div id='tab3'>
  </div>
</div>
<div id='footer'> // position : fixed
</div>

The html is being dynamically injected into 'content' at runtime.
The button on-click is $("#tabX").show().siblings().hide()

The order of events is...

  • new 'content' injected
  • scroller is attached to 'content' (at this stage, all tabs are visible !)
  • tab 1 is made visible, others are hidden
  • scroller responds to this (and correctly respects the length of tab 1)
  • subsequent user button clicks hide / display other tabs
  • scroller does not respond to these changes (it continues to respect the length of tab 1)

So,
If tab 1 is the shortest content, other tabs may lack sufficient scrolling.
If tab 1 is the longest content, other tabs may have excessive scrolling into blank space.

Sorry I didn't give browser info before.
I see the problem on Safari (iOS 7 and OSX 6.0.5) but ok on Chrome 30.0.1599.69.

Thanks.

azariah001 commented

I've got a similar problem. I've got a div that I'm adding content into dynamically via Javascript. The scroller resizes no problem when I add rows to the div but..... when I change the height of the text boxes the row's contain it doesn't recognize the change in size. Will try to bind the FTScroller update command to the event that manages the text box resize. :)

Bootstrap 3
Flat-UI 1.2.2
JQuery 1.8.3
JQuery UI 1.10.3
JQuery UI Touch
Chrome 31.0.1650.63 in Linux Mint