jQuery フォームの操作や使い方
<form id="form_sample"> <fieldset> <legend>input type="text"</legend> <div> <label for="your_name">Name: </label><br> <input type="text" name="your_name" id="your_name" value="" size="20"> </div> <div> <label for="your_email">E-mail: </label><br> <input type="text" name="your_email" id="your_email" value="" size="20"> </div> </fieldset> <fieldset> <legend>input type="radio"</legend> <div> <input t
【Labs】表示しているブラウザの高さを取得してCSSのheightに指定
こんにちは（・∀・） 今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。 さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか... JavaScriptネイティブ版はこちら【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2です。 CSSで高さ100%を指定する方法はこちらの【Labs】CSSで要素の高さ100%を指定する方法をご覧ください。 jQueryで取得した高さをCSSのheightに指定 jQueryで表示画面サ
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
jQuery window の幅と高さを正確に出す方法
jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法をφ(..) jQueryで、ウィンドウ幅と高さを取得するには、 var w = $(window).width(); var h = $(window).height(); こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。 var w = window.innerWidth ? window.
複数のタグをサクッと追加できるjQueryプラグイン「Input_Tag」を作りました | SHINGO IRIE
テキストフィールドに入力すると、自動補完で選択肢がでてきて、タグが追加されるような仕組みを入れたかったのですが、既存のもので使い勝手がよさそうなものがなかったので作ってプラグインとしてgithubで公開してみました。 複数タグの追加がサクッとできる 文字を入力すると、選択肢がでてきます。選ぶと、入力ボックス内にタグがペタッと張り付きます。デモはこちらから。 設置方法jQueryとjQuery UI、CSSを読み込む<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link
イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
← 前回 連載 INDEX 次回 → イベントが発生した時のマウスの情報を取得するために、イベントオブジェクトはさまざまなプロパティを提供しています。本稿では、それらプロパティの挙動を、具体的なサンプルで以って確認していきます。 マウスポインターの座標情報を取得する イベントが発生した時のマウスポインター位置を取得するには、以下のようなプロパティを利用します。
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか（概要） jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
jQuery Mobileを利用するには？
これらの機能を利用することで、開発者はデバイスに依存することなく、手軽にネイティブアプリ・ライクなUI（ユーザーインターフェース）を実装できます。当然、jQueryとの親和性に優れますので、アプリ独自の機能を実装する場合にも、jQueryの知識をそのまま利用できるのはうれしいポイントです。 jQuery Mobileの動作環境 jQuery Mobileが動作するおもな環境は、以下のとおりです。ざっくりと言ってしまうならば、対応が制限されるデバイス／機能が一部にあるにせよ、現在メジャーな環境のほとんどで問題なく動作します。 Android iOS Windows Phone Chrome for Android Firefox Mobile Opera Mobile／Desktop Kindle 3 and Fire Blackberry Kindle 3, Fire, and Fire
jQuery UI の Dialog のダイアログをアニメーション動作で開閉
jQuery UI の Dialog プラグインのダイアログを、アニメーション動作で開閉させる。アニメーション動作の指定には、show オプションとhide オプションを使う。 show オプションとhide オプションに指定する値については、アニメーション開閉の種類と動作例（サンプル）へ。 実装例（サンプル） 「×」アイコンをクリックすると、アニメーション動作で閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。 ダイアログを開く 実装例（サンプル）の動作について 「ダイアログを開く」ボタンを押すと、ブラウザの中央に、ダイアログが、アニメーション動作で出現する。 ダイアログ内の「×」アイコンをクリックすると、アニメーション動作で、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/e51aa1a59978dd1321040f99e9e5f7d480ea4d6b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png)
テーブルのセルをクリックしたときに編集できるようにする（Edit in Place） | GUNMA GIS GEEK
画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。 プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。 <table id="edit-table"> <tr> <th>要素１</th> <th>要素２</th> <th>要素３</th> </tr> <tr> <td>1</td><td>hoge</td><td>hoge</td> </tr> <tr> <td>2</td><td>hello</td><td>world</td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table>
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
selectのデザインをCSSとJavascriptでカスタマイズ
jQuery mobile などの大規模なプラグインを導入せずに オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。 動作サンプルはこちら。 フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。 ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。 実際のソース 大雑把に解説すると、本物のセレクトボックスは透明にしてクリック判定のためだけに配置しておいて 装飾部分は.innerのdivで代替しています。 javascriptでは、セレクトボックスで選択された値（選択された項目の表示文字列）を取得して .innerの要素に表示させています。 <div cla
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptがちょっとわかる人向けの、Ajaxの話。 - Qiita
TURNBOX.js - NOHT CO.,LTD.
http:///codezine.jp/article/detail/7786