html

【Javascript】contenteditableなdivでカーソル位置が指定できなかった原因

contenteditableなdivに「今日はいい天気だ」というテキストが存在して「は」の後ろ(前から3文字目)にカーソルを置きたかった。以下のようなコードで実験したけどなぜかカーソルが先頭にきてしまった。 <div id="editor" contenteditable="true"> 今日はいい天気だ </div> <script> window.onload = function() { va…

【Javascript】iOSでblur時にSelection.rangeCountが取得できなかったときに調べたこと

今回やりたかったのはfocusが外れるときの要素を保存しておき、再びfocusがセットされるときにカーソル位置を戻すということ試したのはこんなコード <div id="editor" contenteditable="true"></div> <input type="button" id="restore-range" value="restore range" /> <script> var saveRange $('#editor').on('blur', function() { var s = window.getSelection() if (0 < s.rangeC…

【css】imgやvideoをアスペクト比を保ちつつ画面一杯に表示する

はじめに 機会ないかもしれないけど次やるときのためのメモ。 やりたいのはスマホでこんな感じの画面。画像でも動画でも同じcssで。 横画像 portrait landscape 縦画像 portrait landscape 実装 htmlはどちらの動画も共通で、cssは横長と縦長とでそれぞれ用…

スマホの回転を考慮した画面開発について

スマホ用のWebページの開発の話。やりたかったことは画面の中央に画像や動画を表示したかった。 端末の向きによって表示する領域を変えたい。端末が縦向き・・・画面の幅一杯に画像を表示したい 端末が横向き・・・画像の横幅を端末の1/2にして中央に寄せた…

スマホでの動画インライン自動再生が解禁されるらしい〜iPhone(safari)・Android(chrome)

スマホ(iPhoneとAndroid)での動画をインラインでの自動再生をやりたくて以前ちょくちょく調べていました。 確かそのときは端末の制限でまぁ難しいかなという結論に至りました。> iPhone(Safari) http://www.appbank.net/2016/06/16/iphone-application/12169…

【javascript】canvasにimg画像(アニメーションgif)を重ねて中央寄せする

たいした話じゃないけど、やりたかったことは canvasへの描画処理を開始する前の事前処理(準備)中にローディング画像みたいのを出したかったのですが、 canvasにグルグル回るアニメーションgifを描画すると1枚目の静止画となってしまうのでcanvasとimgタグを…

動画ファイルからパラパラ漫画を作ってjavascriptで再生する

はじめに 今回やろうとしたことは動画ファイルから画像のキャプチャを作って、その画像を順番にcanvasに描画し続けるということ。 手順としては> キャプチャ画像の生成(ffmpeg使用) ・動画ファイルの情報を取得(fps、再生時間、画像サイズ) ・音声ファイルを…

【bootstrap】table(th, td)列幅を固定する方法メモ

修正前 <table class="table table-hover"> <thead> <tr> <th>・・・</th> <th>・・・</th> ・・・ </tr> </thead> <tbody> <tr> <td>・・・</td> <td>・・・</td> ・・・ </tr> </tbody> </table>tableタグに「style="table-layout:fixed;"」追加 thタグに「style="width:200px;"」追加修正後 <table class="table table-hover" style="table-layout:fixed;"> </table>

bootstrapのdaterangepicker(datepicker)を日本語化して少しカスタマイズ?して使う方法メモ

はじめに タイトルのとおりですが知っていればかなり便利でした。 次回もサクっと使えるようにメモしておきます 使うもの ・jQuery ・Bootstrap ・bootstrap-daterangepicker ・moment.js 準備 jqueryとbootstrapはCDNを使用 bootstrap-daterangepickerはこ…

html ひな形

しょっちゅう書いてるんでメモ ※jqueryはhttps://developers.google.com/speed/libraries/devguide?hl=ja#jquery <head> <title></title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></meta></head>