【JavaScript】dropzone.js の基本的な使い方 - pospomeのプログラミング日記
前回の説明で dropzone.js の使い方を説明した。 「ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする」 http://d.hatena.ne.jp/pospome/20130713/1373699451 これはプレビューフォームとドロップフォームを分けたんだけど、 今回は一緒にしたかったので、 ドロップフォームにプレビューさせる方法をメモ。 おそらくこれが基本的な使用方法になるはず。 【準備】 dropzone.js で使うのは、以下のファイル。 「download/dropzone.min.js」 「download/images/」の画像ファイル 「download/css/basic.css, dropzone.css」 これを任意のディレクトリに設置するが、 cssには画像ファイル
AngularJSでselect要素にoptionをぶら下げる色々な方法
AngularJSではselect要素による選択フィールドもスコープ変数にバインドすることが出来る。その際、option要素の代わりに ng-options属性で選択肢を提供するための書式を解説する。 Tweet 2014年3月29日 嶋田大貴 ng-options属性の書式は一見独特で最初はわかりにくいので、具体的な例をいくつか挙げることで理解の助けにしてもらおうと思う。 公式ドキュメント: AngularJS: API: select 数値や文字列などの配列から選択させる 配列にプリミティブな値が直接格納されており、選択肢のラベル＝バインドされる値で構わない場合には一番シンプルな記述となる。 JavaScript $scope.years = [2010,2011,2012,2013,2014]; $scope.selectedYear = 2014; HTML <select ng-
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった - それマグで！
複数に分割されたログインID入力が・・・ タイムズカープラスのログインを、ブラウザが学習しない。 Opera(Presto)だと複数にわかれたIDを学習してたのに、Opera(blink)になってから学習しないので、もう面倒だから拡張機能で対応しようとした。 フォームの値をJavaScriptで送信しようとしてハマったのでメモ。 スクリーンショット 2014-12-05 14.38.08 form.submit でログイン失敗する HTTPのリクエストヘッダを見ていると input に存在しない値を送信している模様。 tpLoginForm:doLoginForTp.x:132 tpLoginForm:doLoginForTp.y:14 どこから出てきた、この値は。と調べてて見つけた。 input type ="image" はクリック位置を送信する模様 知らなかった。X,Y座標を送信する
HTML5でこんなに変わったinput要素を徹底解説 (1/5)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 前回は、一般的なWebサイト制作で比較的使用頻度が高い要素や、ルビ関連の要素を紹介しました。第7回は、HTML5で追加されたフォーム関連の要素と属性をまとめてチェックします。これらの中には、スマートフォンサイト用のブラウザーなどですでに実用できるものも含まれています。 各要素の解説では、冒頭に「カテゴリー」と「コンテン
$form->inputで日時選択フォームのカスタマイズ - 趣味の延長線
Formヘルパーで、日時選択フォームの出力をカスタマイズする方法。 以下の参考サイト：dateTime()による指定方法をベースに、 input()による指定方法 および 月を英語以外で表示する方法 プルダウンの最初を空欄にする/しない方法 参考サイト CakePHP1.2 Form ヘルパーで日付のフォームを作る | Sun Limited Mt. $form->input('disp_date')の出力 以下の$options設定および追加CSSでカスタマイズした出力 echo $form->input('disp_date', array( 'label' => __('Date', true), 'default' => date('Y-m-d H:i', strtotime($this->data['Model']['disp_date'])), 'timeFormat' =>
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」:phpspot開発日誌
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオート
ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
「アマゾン」まねた履歴書に大反響 閲覧数２０万件、仕事のオファーも
（ＣＮＮ） 企業へ通常の履歴書を送る代わりに、インターネット通販大手「アマゾン」をまねて自分を売り込むページを作ってみたら――。フランスのウェブ・プロダクト・マネージャー、フィリッペ・デュボさんの試みが、大きな反響を呼んでいる。採用関連のメッセージが１００件以上届いたほか、ウェブページの閲覧回数は１日当たり２０万件にまで達したという。 アマゾンそっくりにデザインされたデュボさんの履歴書ページには、「サイズ」や５段階評価の星マークが書かれている。世界各地への発送が可能とされ、ギフトラッピングまで選択できる。 「アマゾンのページはもともと履歴書の書式にぴったりだ」とデュボさん。「これを面白いと思ってくれる会社があれば、そこで働きたいと思ったんだ」と振り返る。 昨年末に職探しを始めたデュボさんは、企業への応募フォームに履歴書ページへのリンクを書き込んだ。先週初め、フランスの人気ブログにメールを送
Facebookでページをシェアできないことがあったので調べてみた - kiyoblo（@kiyohero）
今日、とあるページをFacebookでシェアしようとしたら、「ウォールに投稿できませんでした」と言われて警告メッセージが表示されたので調べてみました。 現象 http://womantype.jp/mag/archives/1177 をFBの投稿フォームに貼付け、「投稿」ボタンを押すと以下のメッセージが表示される。 ウォールに投稿できませんでした このウォールにはメッセージを投稿することはできません。 対策 検索してみたところ、id:y_fudiさんによると、titleの文字数が長すぎると該当のエラーが出るとのこと。 http://d.hatena.ne.jp/y_fudi/20111118/1321585407 そこでFBの投稿プレビューでタイトルを短くしてみたところ、無事投稿されました。 （原文） この人とはいつか一緒に仕事をするかもしれない」ライフネット生命の副社長・岩瀬大輔氏との出
bootstrap - フォーム、ボタン - end0tknr's kipple - web写経開発
記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659 ※デフォルトでlabelは、width:130px; text-align:right;で表示されます。 ※フォームの表示サイズ指定には、次のものが用意されています。 class 幅(px) .input-mini, .mini 60 .input-small, .small 90 .input-medium, .medium 150 .input-large, .large 210 .input-xlarge, .xlarge 270 .input-xxlarge, .xxlarge 530 ※フォームでのポイントは、以下のhtmlソースにおいて<small>部分に記載しています。 デフォルトスタイル <div class="clearfix"> <label for="xl
テキストをその場で編集できるJavaScript10選 | Web活メモ帳
テキストをその場で編集するためのjQueryプラグインをまとめた10 interesting inline editor plugins you might be searching forというエントリーのご紹介。 詳しくは以下 1. Akeditable 編集リンクをクリックでテキストエリア表示。 jQueryのプラグインとして動作します。 公式サイト デモ 2. Josephscott Jeip 編集できるテキストはマウスオーバーで背景色がかわります。 デモ 3. Davehauenstein プルダウンや１行テキストなど、フォームの内容を選択することが可能です。 デモ 4. 15daysofjquery 英語ですが、詳しい設定方法が記載されています。 公式サイト 5. Jeditable ダブルクリックやマウスオーバーなどのイベントを取得してフォーム表示などができます。 Ajaxに
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
CSRFで強制ログインさせるというアイデア - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はCSRF脆弱性のちょっとした話です！ このCSRFってなにかっていうと、 サーバーへのリクエストを『誰かに勝手に送らせる』っていうセキュリティがらみの攻撃手法のひとつ。 わかりやすい例だと、 HTMLの画像タグを以下のようにしたページを誰かに教える。 <img src="何々SNSの足跡.php" width="1" height="1"> そうすると、そのページを「見た人」が何々SNSの足跡.phpにアクセスしたことになる。 ※詳しくはこちらのマンガで → ［はまちちゃんのセキュリティ講座］ここがキミの脆弱なところ…！ ： 第2回 しーさーふって何ですか？ CSRFってこんな風に、 「ログイン済みの人に何か操作させる」ってイメージが強くて、 対策する側もまた、「既にログイン済みの人を守る」ような考えが強いんだよね。 例えば、勝手に日記に投稿させないように対
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
IDEA * IDEA
DropCatch.com
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type