How to make moving captions?

Comments

• yun

  April 2016

  Forgot to mention that I need it for Sugarcane.
• greyelf

  April 2016

  It all a case of timing.
  
  You need to issue your two document related calls after the passage contents has been displayed to the Reader, that way the #capts div element will exist and the height of the client will be calculated.
  
  Unfortunately Sugarcane does not have SugarCube's postdisplay event, so you will have to use a setTimeout() function call to delay the execution of the javascript code you want to use.
  
  There are a number of different ways you can call the setTimeout function, two of them being:
  
  1. In a postrender event:

  postrender['run-credits'] = function() {
  	if (passage() == "Credits") {
  		console.log('run-credits called while Credits passage visible');
  		setTimeout(
  			function() {
  				console.log('capts: ' + document.getElementById("capts"));
  				console.log('client height: ' + document.body.clientHeight);
  
  				// Delete the above console.log calls and place your code here!
  			},
  			500);
  	};
  };
  

  
  2. Via a <<set>> macro call in the Credits passage:

  <<set setTimeout(
  			function() {
  				console.log('capts: ' + document.getElementById("capts"));
  				console.log('client height: ' + document.body.clientHeight);
  
  				// Delete the above console.log calls and place your code here!
  			},
  			500);>>
  

  
  You did not include links to the movie-captions style javascript you wanted to run.
• yun

  April 2016 edited April 2016

  Thanks!
  This is the resulting code:

  <<set setTimeout(
  		function() {
  		var pos=document.body.clientHeight;
  	    var element = document.getElementById("capts");
          element.style.top=document.body.clientHeight+'px';
          element.style.width=document.body.clientWidth;
          document.getElementById("passages").style.overflow='hidden';
  (function(){
          if (pos>0) {element.style.top = (--pos)+'px';  
          setTimeout(arguments.callee, 10);}
          else document.getElementById("passages").style.overflow='';
      })();
  			},
  			100);>>
   <center>THE END (not moving)</center>
  <div id="capts"  style="{top:9999px}"> <span><center>Captions go here...
  ...
  </center>
  </span></div>
  

  It also requires the stylesheet:
  

  #capts {
     background: black;
     color: white;
      position: relative;
      text-align: justify;
  }
  
• yun

  April 2016

  BTW, where can I view this console.log? I'm pretty tired of using alert() for debugging
• greyelf

  April 2016

  Your web-browser's Developer Tools will have a Console area where the output of console.log will be displayed. How to access your web-browser's Developer Tools can be different for each brand but the F12 key short cut works in some.
• yun

  April 2016

  Thanks, it's Ctrl-Shift-K in Firefox.
  
  BTW, I wrote one more nice function based on the previous idea. It fades out the final passage, then goes to credits:
  

  <<set $fadeoutgoto=
  function(psgname)
  { function getcolor(col) {
         var colornames={
          aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
          gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
          navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
          silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
          };
          if (col[0]!='#') col=colornames[col] || '#FFFFFF';
          if (col.length==4) col='#0'+col[1]+'0'+col[2]+'0'+col[3];
          return Number(col.replace('#','0x'))
    }
  	   var col=document.getElementById("passages").style.color;
         var colx=getcolor(col);
         (function(){
          if ((colx-=0x010101)>=0) {document.getElementById("passages").style.color = '#'+colx.toString(16);  
          setTimeout(arguments.callee, 10);}
          else {setTimeout(function(){document.getElementById("passages").style.color=col;},100);state.display(psgname)}
          })();
  }
  >>\
  So this is the end... sad but true.
  <<set $fadeoutgoto("credits")>>