jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。 ==、!= ==と!=を使用してはいけません。代わり
Electronで作ったデスクトップアプリとArduinoでシリアル通信して遊ぼう - Qiita
フットスイッチはメーカーによって極性が違ったり、切り替えるためのスイッチが付いているので注意。 基本的に、楽器系で使われるコードは6.3mmの標準というサイズです。 一般的に使われるイヤフォンなどは、ミニ（ミニプラグ）3.5mmのひとまわり小さいですが、 変換コネクターとかも普通に売っています。 この楽器用のフットスイッチは電子工作にも普通に扱えます。楽器用なので結構丈夫。 プラグの先端の黒い帯（絶縁体）を境目に、普通のタクトスイッチみたいな動作をさせることができます。 ジャックを使わないでこんな感じでも一応できる。 回路もDigital Buttonとほぼ同様な感じです。 フットスイッチのONとOFFをdigitalReadで取得しSerialで送信する。 const int buttonPin = 8; void setup() { pinMode(buttonPin, INPUT);
jQueryの.on()で使えるイベントの種類と記述例 | 1bit::memo
最近jQueryを使う時に.on()の使用頻度がとても高いです。.clickや.hoverなどの単体機能よりカスタマイズしやすいのが理由です。 で、.on()にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。 SPONSORED LINK イベントとは？ .on()で使う実行の種類です。以下の★に入ります。 $(function(){ $('.element').on('★', function(){ //ここに★に対応した処理を記述 }); }); イベントの種類 上記コードの★部分に当たるイベントは、以下のようにたくさんあります。 blur 要素がフォーカスを失った時に発生 focus 要素がフォーカスを得た時に発生 load ドキュメント内の全リソースの読み込みが完了したときに発生 resize windowの大きさが変更された時に発生 scroll ドキュ
マウスで握って並べ替える。 - ザリガニが見ていた...。
リストの順番を自由に並べ替えたい。こんな時、Railsにはヘルパメソッドsortable_elementがある。このメソッドを1行追加するだけで、マウス操作でドラッグして並べ替えが可能になる。但しいくつか注意することがある。それを知らないために、思うように動かず遠回りしてしまったので、忘れないように自分用のメモ。まずは以下のように使ってみた。 利用環境 MacBook Rails 1.1.6 scriptaculous-js-1.7.0 必要最小限の基本動作を確認 <%# view %> <%= javascript_include_tag :defaults %> <ul id='sort'> <li id='item_1'>item_1</li> <li id='item_2'>item_2</li> <li id='item_3'>item_3</li> </ul> <%= sort
フォームでの全角⇒半角変換（電話番号、メールアドレス） | みやなび
カテゴリ：WEB技術, フリー（プログラム） タグ：JavaScript 閲覧数： 27,043 views 公開日：2013年11月2日 最終更新日：2016年5月25日 メールフォームのバリデーション メールフォームのバリデーションが微妙に当たり前な雰囲気になりつつあるWEB制作業ですが、予算により対応するかどうかを決めるのはどこでも同じだと思います。 しかし予算が足りなくとも、それでもやっておくべきかな、と思うのが「電話番号とメールアドレスで全角で入力された場合、半角に変換する」というメールフォームの機能です。ケースとして下記のような事例が考えられます 携帯電話等にメール転送を行っている場合、半角文字であればクライアントさんがすぐに電話をかけることができる （半角数字のみ）とか（ハイフンなし）とかユーザに考えさせるのは無駄だし、必ず間違えるユーザーは出るし赤字でエラー表示見せつつ再入
ファイルの出力
XMLHttpRequest では、データ送信のメソッド（簡単に言うと種類）として、 GET, POST, PUT, PROPFIND が使用できます。 メソッドが異なることで送信出来るデータや、 送信されたデータをサーバで受け取る際に違いが出てきます。 それぞれの違いを Google で調べたので、簡単に説明します。
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
input:file 要素を表示しないで、ファイルをアップロード | @jsakamoto
「Upload image...」と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。 そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。 アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。 この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty
IEユーザーを撲滅させるためのJavaScript。さぁ今すぐWebサイトに組み込もう！
2013/11/26追記：久々にやってきたらこんなネタにすごい量のストックが。恐縮。ちなみにIE10は普通にいいと思いますよ(これ書いた時ってIE最新はまだ9で、表示のバグも多くぐぬぬしてたもので。)といっても、実質辛いのはCSS3のほぼ使えないIE8以下。WindowsXPのIEは8でストップなので当分怨嗟は止まらんのでしょうな 結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる そのためのコードがこちら。headタグ直下にでも配置しましょう。 <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { if(confirm('〇〇〇〇*はInternet Explorerに対応しておりません。本サイトを閲覧するためにはGoogle Chrome,Mozilla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのSlidingエフェクト2
auto trigger submit IE - Google 検索