WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年08月   >>
SunMonTueWedThuFriSat
   1234
567891011
12131415161718
19202122232425
262728293031 
新着記事
カテゴリ
過去ログ
コメント
検索
タッチパネルデバイスだとマウスカーソルがないからtitle属性のチップヘルプ(ツールチップ)が表示されない。

というわけで、JavaScriptでやってみた。

コード
<script> if(document.addEventListener) document.addEventListener("DOMContentLoaded",tipSet); function tipSet(){ var obj=document.getElementsByTagName('li'); for(var i=0;i<obj.length;i++){ if(!obj[i].title) continue; obj[i].addEventListener('touchend',tipOpen); } } function tipOpen(e){ window.getSelection().removeAllRanges(); e.preventDefault(); var obj=document.createElement('div'); obj.id='tip'; obj.style.position='absolute'; obj.style.backgroundColor='black'; obj.style.color='white'; obj.style.top=e.target.offsetTop+e.target.clientHeight+1+'px'; obj.style.left=e.target.offsetLeft+'px'; obj.style.lineHeight='1em'; obj.style.padding='0.5em'; obj.style.marginRight='0.5em'; obj.appendChild(document.createTextNode(e.target.title)); window.addEventListener('touchstart',tipClose); e.target.parentNode.appendChild(obj); } function tipClose(){ var obj=document.getElementById('tip'); obj.parentNode.removeChild(obj); window.removeEventListener('touchstart',tipClose); } </script> <ul> <li title="ヘルプ1">項目1</li> <li title="ヘルプ2">項目2</li> <li title="ヘルプ3">項目3</li> </ul>

サンプル
  • 項目1
  • 項目2
  • 項目3

title属性つきなのでマウスカーソルがあれば普通にチップヘルプ出ます。
スマホ等のタッチパネルデバイスの場合は touchend で真下に表示して、どこかタッチで消えます。

画面右端に溢れる場合に座標調整必要かとも思ったが、表示内容が日本語なら自動改行してくれるし、右にmarginつける程度で良さそう。
marginとpaddingはフォントサイズ依存でem単位にした。

画面下端にはみ出す場合は上に表示したほうが良いと思うが、めんどくさいし、
今回の目的のページでは画面下にfixedの要素が表示される場合があるので難しいので何もしてない。

タッチイベントの時に同時にテキスト選択が発生する可能性があるが、
チップヘルプ表示時にセレクションを削除して、ブラウザ標準動作をキャンセルした。
だが、テキスト選択を解除しても選択文字列のWEB検索みたいな領域が閉じない場合があるみたい。どうにもならんと思う。

いくつかのサイトを常時SSL化したが、
外部サービスのブログだと一括置換とかできないし、
日記書いてるブログだとAmazonのiframeが記事中に多くてめんどい。

iframeのsrcがhttp://だとhttps://のページから読み込まれないが、
Amazonアソシエイトの<iframe>は今はhttps://だが昔はhttp://のURLになってる。
2016年のどこかで切り替わってるぽい。
古いURLをhttp:を消して//からのURLに変換すれば良さそうな感じ。

HTML5にDOMContentLoadedなんてのがあったんだね。
ノーマークだったが、Firefox 1.0から実装されてるみたい。

window.onload に似たような感じで、
document.addEventListener('DOMContentLoaded',function)
でdocumentに登録する。

loadだとたまに実行が遅れちゃう場合があるが、
画像や非同期のものも含めてJavaScript実行中だと遅れちゃうぽい?
DOMContentLoadedだとHTMLを読み込んでDOMが構築されたら実行される。

asyncやdeferで読み込まれるscriptの場合は既にloadedの可能性があるので、
if(document.readyState=='loading'){
  document.addEventListener('DOMContentLoaded',$function,false);
}else{
  $function();
}
みたいな感じでdocument.readyStateがloading以外の場合は即実行する必要がある。

document.readyStateは、ブラウザによっては違う場合もあるみたいだが、
HTMLの仕様だと"loading","interactive","complete"の3つがあり、
onloadの場合はcomplete直前に実行される。
DOMContentLoadedの場合はinteractiveの直前に実行される。
loadingはHTMLの読み込み中で、
interactiveはHTMLは完了してるが画像等の外部ファイル読み込み中。

スマホで見たら<textarea>のサイズがでかすぎてサイドバーが出るページを発見した。
max-widthをつけて修正しようと思ったのだが、確認したら最初からmax-widthが90%になってた。

原因考えたのだが、ウインドウサイズ小さくしていくと、
<textarea>の親要素の<fieldset>が644pxで止まった。
<textarea>のwidth指定は640pxで、<fieldset>のborderとpaddingは標準で1pxになるようなので、
<textarea>のwidth 640pxに<fieldset>のborderとpadding足した644pxになるというわけだ。

つまり、
<textarea>がmax-widthで縮小しても<fieldset>はwidthの640pxまでしか縮小しない。
<fieldset>自体にmax-widthつけても効かない。

FirefoxでもChromeでも同じ感じ。


SSLボックス経由でCoreSSL使ってたんだが、
今SSLボックス見たらサイトシールに対応してた。
https://www.netowl.jp/news_detail.php?view_id=2102
6月27日かららしい。

だが、Let's Encryptが無料ですごすぎて今後は有料SSL買う気にならないねw

  次のページ  
whblog 1.7