ブラウザバックで消せるモーダルウィンドウのプラグインを作成しました。

DEMO HashModal example How To Use <button type="button" class="modal-open">Modal</button> <div class="hashModal-inner" data-hashModal-id="hashModal" role="dialog"> <h2>Example

Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応

Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】

jQuery deferredを使い、javascriptの confirm をカスタマイズ 4

jQuery deferredを使い、javascriptの confirm をカスタマイズ 3の続編です。 使っていたjsのmixinにバグがあったので、素直に、$.extend を使うように変更しました。また、optionのdefaultの構造も変更しました。 DEMO confirm confirm 1 confirm 2 alert alert 1 alert 2 textarea プラグ

Sketchのデザインまとめサイト Sketch App Sources

Sketch App Sources – Free design resources and plugins – Icons, UI Kits, Wireframes, iOS, Android Templates for Sketch

さまざまなデザインのチェックボックス・ラジオボタン Pretty Checkbox

Pretty checkbox | Custom checkbox and radio buttons in pure css | Beautiful and nice looking 参考 [CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox | コリス

jQuery deferredを使い、javascriptの confirm をカスタマイズ 3

jQuery deferredを使い、javascriptの confirm をカスタマイズ 2の続編です。 jQueryのfadeInが思ったように機能しなかったため、フェードインのアニメーションをCSS3で行うようにしました。 DEMO confirm confirm 1 confirm 2 alert alert 1 alert 2 textarea プラグイン confirmDialog.

jQuery deferredを使い、javascriptの confirm をカスタマイズ 2

jQuery deferredを使い、javascriptの confirm をカスタマイズの続編です。 DEMO confirm confirm 1 confirm 2 alert alert 1 alert 2 textarea プラグイン confirmDialog.js alertDialog.js 使い方 $(function(){ // // confirm // var hoge =

jQuery deferredを使い、javascriptの confirm をカスタマイズ

confirm キャンセル はい jQuery(function($){ var site = {}; site.confirmHtml = $('#js-confirm')[0].outerHTML; $('#js-confirm').remove(); site.customConfirm = function(textHtml) { var d = new $.Deferred; $('bo

js スニペット と メモ

aがundefinedかどうか if (typeof a === "undefined") { // } 以下の全てがfalseと判断される if (undefined) { // 実行されない } if (null) { // 実行されない } if (0) { // 実行されない } if ('') { // 実行されない } if (false) { // 実行されない } 画像のプリロード

js 画像をドラッグ ドロップで ブラウザに表示する

DEMO DEMO 仕様 option var defaults = { MAX_LNGTH : 1,//一度にドラッグできる数 MAX_SIZE : 1,//ファイルサイズの最大値(MB) accept : 'image/gif, image/jpeg, image/png',//拡張子制限 input : $el.find('.imagedragdrop_file'),//inputを指定 o

sublime text 3の Reopen closed file が使えなくなった。

なぜか、command + shift + T で、iterm2が開くようになってしまった。 動かかなくなった原因は、不明だが、 キーバインドに、以下を追加することで、動くようになった。 { "keys": ["super+shift+t"], "command": "open_recent_file", "args": {"index": 0 } }

Rails will_pagenate 全○件中 / ○~○件 を表示 – ○ページ目 表示をする

Railsの ページャーを作成するgemの1つである、「will_paginate」 を使って、 一覧ページで使用できそうな、「全○件中 / ○~○件 を表示 – ○ページ目」という表記をする。 全ての個数を表示 全○件中の ○の部分 全 <span><%= @result.total_entries %></span>件中 ○~○件 を表示 <

Rails よく使うコマンド

Rails 初心者である自分が、google検索するコマンドをまとめていきたい。 rails new turbolinksを使わないで アプリを作成する $ rails new アプリ名 --skip-turbolinks --skip-bundle DBはmysqlを使う $ rails new アプリ名 -d mysql gem インストール $ bundle install --path v

【解決】Rails5 配列を使ったselectタグにclass属性がつかない問題

<%= f.select(:gender, [ 'Male', 'Female' ], {include_blank:''}, { :class => 'select' }) %>

ユーザーのマイクロポスト | rails チュートリアル 19

Ruby on Rails チュートリアル:実例を使って Rails を学ぼうの第13章 ユーザーのマイクロポストの勉強メモです。 これまで ここmでのチュートリアルでは、以下の4つをメインに開発してきた ユーザー セッション アカウント有効化 パスワードリセット ここからは、ユーザーが短いメッセージを投稿できるようにするためのリソースであるマイクロポストを開発する Micropostモデルの作成

パスワードの再設定 | rails チュートリアル 18

Ruby on Rails チュートリアル:実例を使って Rails を学ぼうの第12章 パスワードの再設定の勉強メモです。 ここでは、パスワードを忘れた時のパスワードの再設定ができるようにする。 PasswordResetsリソース Pw再設定用コントローラーを作成する。 $ bundle exec rails generate controller PasswordResets new edi

アカウントの有効化 | rails チュートリアル 17

Ruby on Rails チュートリアル:実例を使って Rails を学ぼうの第11章 アカウントの有効化の勉強メモです。 AccountActivationsリソース 本当にそのメールアドレスの持ち主なのかどうかを確認するための仕組み作成のために、AccountActivationsコントローラーを作成する。 $ bundle exec rails generate controller Ac