文字スクロールバー

職場でCSSの勉強がてら作ったけど、陽の目をみなかったスクリプト。
単純なスクリプトだけれども、文字数がおおい場合は
枠内をスクロールして、そうでない場合は中央揃えになる。

css

<style>
.message{
 position: relative;
 width: 400px;
 height: 40px;
 background: rgba(0,0,0,0.5);
 overflow: hidden;
 padding: 0 10px;
}
.message p{
 position: absolute;
 line-height: 40px;
 display: table-cell;
 min-width: 380px;
 box-sizing: border-box;
 padding: 0;
 height: 40px;
 text-align: center;
 vertical-align: middle;
 color: white;
 margin: 0;
 white-space: nowrap;
}
</style>

js

<script>
$(function(){
 function imageMessageAnimate(){
var $im = $('.message');
var imw = $im.width();
var $imp = $('.message p');
var impw = $imp.width();
var startdelay = 3000;
var enddelay = 3000;
var refleshtime = 1000;
var animatetime = (impw-imw) * 10;
var sumtime = startdelay + enddelay + refleshtime + animatetime;
if ((impw-imw) > 0){
 $imp.delay(startdelay)
 .animate({
marginLeft: -(impw-imw)+"px",
 }, animatetime , 'linear')
 .delay(enddelay)
 .animate({
opacity: 0.0
 }, refleshtime/2.0, 'swing', function(){
$(this).css('marginLeft', 0);
 })
 .animate({
opacity: 1.0
 }, refleshtime/2.0);
 setTimeout(imageMessageAnimate, sumtime);
}
 }
 imageMessageAnimate();
});
</script>

html

<div class='message'>
 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

Android, iPhoneのタップ感向上

スワイプとクリックの見分けのために、チェックボックスにチェック入れようとしても、標準動作だったら0.3秒の待ち時間が入っているとか。


これをtouchstartで

$('#obj').prop('checked', true);

とか実行してやればサクサク動くが、
画面スワイプ中にチェックボックスに触れてしまっても同様にチェックされてしまう。

そこは前回の記事で作ったtouch*とclickを監視する関数で実装すればいい。
_callbackに渡す関数内でも 「event.preventDefault」しないと結局クリック判定待ち0.3秒入るので注意

touchstart touchmove touchend そしてclick

PCのchromeのエミューレーターと、実際のモダンな端末で挙動を確認（HTC J OneやiPhone6 ）

1. touchstart
2. touchmove
3. touchend
4. click

の順に発火する模様。

touchendの時にevent.preventDefaultをすれば、clickイベントが起こらない。
間違って前半2つにpreventDefaultすると、スワイプもできなくなるので注意。 ただ旧式のAndroid2.x(GalaxyS)では、clickイベントが起こってしまう。

よって以下のように、touchend発生後1秒間はclickイベントを無視する（無茶苦茶）

_callbackに好きな関数を渡せば、タップ発火で実行ができる。

var $obj = $('#sample');
var pos;
$obj.on('touchstart touchmove touchend click', function(event){
 if ('touchstart' == event.type){
  pos = touch_position(event); //X,Yを得る
  $_obj.data('data-touchposition', pos);
  $_obj.data('data-touchstarted', '');
  return;
 }

 if ('touchmove' == event.type){
  pos = touch_position(event); //X,Yを得る
  var touchpos = $_obj.data('data-touchposition');
  // ある程度以上指が動いていたら、スワイプと判定
  if ( Math.abs( pos.x - touchpos.x ) +
    Math.abs( pos.y - touchpos.y ) > 10 ){
   $_obj.removeData('data-touchstarted');
  }
  return;
 }
 if ('touchend' == event.type){
  if ('undefined' != typeof $_obj.data('data-touchstarted')){
   event.preventDefault(); // click除外のために
   $_obj.removeData('data-touchstarted');
   $_obj.removeData('data-touchposition');

   // タップ実行したフラグ（1秒後にフラグは折れる）
   $_obj.data('data-touchdone', '');
   setTimeout(function(){
    $_obj.removeData('data-touchdone');
   }, 1000);

   return _callback.call(this, event);
  }

 }
 
 // win8向けに対応しておく
 if ('click' == event.type){
  // タップは実行していないか？
  if ('undefined' == typeof $_obj.data('data-touchdone')){
   $_obj.removeData('data-touchstarted');
   $_obj.removeData('data-touchposition');
   return _callback.call(this, event);
  }
 }
});