1

I have a div (transcript_container) which contains the subtitles to an audio playing. Each subtitle is in synch with the audio.

The height of the div is 200px. When the list of subtitles is longer than 200px, the text automatically scrolls up so that the highlighted subtitle gets on top and is always visible in the div container. This works perfectly in all browsers except for Firefox.

This is the HTML:

<div style="display:table; margin-left:auto; margin-right:auto;">
<div style="display:table-row;">

 <div class="transcript_container" id="transcript_container">
   <div style="height:200px; overflow:-moz-scrollbars-vertical;"> (I had to add this div with the overflow for firefox otherwise the text wouldn't be contained in the div in firefox)
       Subtitles......
       ...............
   </div>
 </div>
</div>
</div>

This is the CSS:

.transcript_container{
  display:table-cell;
  width: 500px;
  height:200px; 
  border: 1px solid #999;
  -webkit-border-radius: 5px 5px 5px 5px; 
  -moz-border-radius: 5px 5px 5px 5px; 
  border-radius: 5px 5px 5px 5px;
  text-align:left;
  color:#036;  
  margin-left:auto;
  margin-right:auto;
  overflow:scroll;
}

This is the jQuery script:

jQuery('.subtitle_highlight').each(function(){

   if (jQuery(this).offset().top - jQuery('#transcript_container').offset().top > 200){     

    jQuery('#transcript_container').animate({scrollTop: jQuery('#transcript_container').scrollTop() + 200 + 'px'}, 300);                            

    }
 });

Example:

----------------------------------------DIV: Transcript_Container------
 subtitle 1
 subtitle 2
 subtitle 3
----------------------------------------------End of DIV---------------
 subtitle 4  (hidden area)
 subtitle 5
 subtitle 6

When subtitle 3 is highlighted, subtitle 4 scrolls up to the top of the DIV and becomes visible. The synchronization continues with subtitles 4, 5 and 6. In firefox, subtitle 4 doesn't go to the top of the div when it's highlighted, but remains hidden.

How can I make it compatible for firefox as well ? Is there an alternative to ScrollTop that could work with all browsers ?

user3716433
  • 33
  • 1
  • 6
  • What is going wrong in Firefox? Can you also make a jsfiddle so that people with firefox like me can test it and see how we can help – Vinc199789 Oct 24 '15 at 15:12
  • Unfortunately I think it's too complicated to reproduce in a jsfiddle because there is an audio file, subtitles and a long script to synchronize them – user3716433 Oct 24 '15 at 15:45
  • Can you then explain what is going wrong on Firefox? maybe you can add an screenshot to your question – Vinc199789 Oct 24 '15 at 15:57
  • Sure. As the audio is playing, each subtitles is highlighted. When the last visible subtitled at the bottom of the div (transcript_container) is highlighted, the whole text should scroll up so that the next subtitled (that was hidden) goes up to the top of the div and the synchronization continues. This works well in all browsers, except for firefox. The new subtitles, below the visible area, don't scroll up and keep being hidden. – user3716433 Oct 24 '15 at 16:32
  • I edited my post with an example – user3716433 Oct 24 '15 at 16:40
  • I have a few suggestions, not sure if they work but you can try. 1) change all the "Jquery" to a $ 2) Place the scrolltop calculation in a variable and refer to the variable in your animation. 3) remove the 'px' you add the end of your calculation. 4) Should the scrolltop not be negative? so than you get - 200 instead of + 200. – Vinc199789 Oct 24 '15 at 17:09
  • I tried it all, but it didn't work. It's as if Firefox didn't recognize the ScrollTop instruction at all. – user3716433 Oct 24 '15 at 19:29
  • try to change `jQuery('#transcript_container').scrollTop() + 200 + 'px'` to ` 200 + 'px'` – Vinc199789 Oct 25 '15 at 08:46
  • You can take a look here: http://stackoverflow.com/questions/17776544/jquery-scrolltop-firefox-not-working – Vinc199789 Oct 26 '15 at 10:22
  • Thanks so much for your link. Unfortunately, I had already found that post but it didn't work for me, because both ('body') and ('window') produce the scrolling of the entire page and not just the content of my DIV. – user3716433 Oct 27 '15 at 06:54
  • and what now if you place your code inside a `('body')` or `('window')` ready function – Vinc199789 Oct 27 '15 at 07:55
  • Just tried it, but it didn't work either :( I don't know what else to do and I can't seem to find any alternative to ScrollTop(). – user3716433 Oct 27 '15 at 09:17
  • Than use css. What now if you animate the `div` you had to add special for firefox. Give this the div with this id `id="transcript_container"` a `padding-top` of `0` by default. When you want to move your subtitles than give the `padding-top` a value `<0' – Vinc199789 Oct 27 '15 at 12:12
  • How can I make the code work only in firefox ? Is there a way to check which browser the user is using in jQuery ? – user3716433 Oct 27 '15 at 13:36
  • Than take a look here: https://learn.jquery.com/code-organization/feature-browser-detection/ – Vinc199789 Oct 27 '15 at 14:38
  • Unfortunately I couldn't make it work. Does anyone have the same problem or can help me find a solution ? Thanks so much ! – user3716433 Nov 26 '15 at 07:38
  • So no one can help me figure out why this code which works perfectly on all browsers (including firefox for iOS), doesn't work on firefox for desktop computers ? – user3716433 Dec 20 '15 at 08:21

0 Answers0