phiary
はじめに 今更な感じもしますが, わりと最近でも jQuery UI を使うことがあります. まぁサクッとドラッグや並び替えを実装しようと思うと jQuery UI が一番楽だったりするんですよね. ただ, 普通に jQuery, jQuery UI を読み込むだけだとスマートフォンのようなタッチデバイスでちゃんと動いてくれません. jQuery UI Touch Punch そこで使えるのが『jQuery UI Touch Punch』です！！ なんとこれ, 読み込むだけで jQuery UI をタッチデバイス対応してくれます. 中でやってることはマウスイベントをタッチイベントに切り替えてるだけなんですけどね. jQuery UI Touch Punch - Touch Event Support for jQuery UI furf/jquery-ui-touch-punch: A d
jQueryでフレームアニメーション（パラパラアニメ）を実装するプラグイン「jquery.frameAnimation.js」｜BLACKFLAG
これらのオプション値の設定は 個別に変更させることも可能です。 そして実行スクリプトは以下の様になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.frameAnimation.js"></script> <script> $(function(){ $('.frame1').frameAnimation(); }); </script> 実行スクリプトにオプション値を記述する場合は 以下の様な記述になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr
GitHub - thegrubbsian/jquery.ganttView: An editable jQuery Gantt chart plugin.
jQuery.ganttView The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain HTML...no vector graphics or images required. The plugin supports dragging and resizing the Gantt blocks and callbacks to trap the updated data. A sample chart Browser Compatibility Currently the plugin has been tested, and is working in: FF 3.5+, Chrome 5+, Safari 4+, IE8+. There are mino
RailsでjQueryが動かないと思ったら
Railsを使ってて忘れがちな点。 Turbolinks こいつがjQueryの動きを止めます。 といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。 ※ Rails4からTurbolinksはデフォルトGemになりました。 ※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。 Turbolinksとは ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。 .jsとか.cssとか処理し直さないので、ページの読み込みがかなり早くなる。 ↓こんなにごちゃごちゃ読み込んでたのが… ↓こうなったり、、、するので早いのは当然。 問題 下のようにjQuery（coffee script）を書いている場合は動かない。
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
[jQuery] Enterキーでフォーカスを移動するには
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン（Enterキー）でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift＋Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
ノンプログラマーのためのjQuery入門
kanazawa.js v1.0 〜JavaScriptコトハジメ〜（2011年2月5日開催）で使用したスライドです。Read less
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Ajax 処理で .js.erb を使う書き方/使わない書き方 - わからん
Rails3 の remote => true な Ajax 処理では .js.erb を使うか、JS で Rails が追加したカスタムイベントを使うのがレールにのった方法です。WEB+DB PRESS vol.58 詳解Rails3 p26 あたりの、簡易ブログアプリの一覧画面での Ajax 検索が .js.erb を使っていたので、カスタムイベント版にして動作を確認しておきました。 まずは index.js.erb を使わない場合。 ▼ posts/index.html.erb <%= form_for @search_form, :url => posts_path, :remote => true, :html => {:method => :get} do |f| %> <%= f.search_field :q %> <%= f.submit '検索' %> <% end %
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
タイプライター風のテキストエフェクト jQuery TickerType
10月 8, 2010 タイプライター風のテキストエフェクト jQuery TickerType core JQuery effect, javascript, JQuery, plugin 0 Comment JQueryのプラグインとして紹介されているのは、スライドショーやイメージギャラリーといったプラグインがよく紹介されていますが、今回はタイプライター風のテキストエフェクトを実現できるjQuery TickerTypeをご紹介します。 jQuery TickerTypeは、導入方法が簡単で指定したエリアの文章がタイプライター風に一文字づつ表示されるようになります。実装方法のサンプルは以下のようなコードになります。 サンプルコード <html> <head> <script type="text/javascript" src="jquery-1.2.6.min.js"></scrip
jquery.jaticker.js
≫Download jquery.jaticker.js はjquery.jaticker.js は日本語のにほんごの変換アニメーションにへんかんあにめーしょんに対応した、たいおうした、ティッカーのてぃっかーの jQuery プラグインです。ぷらぐいんです。文字列をもじれつをタイプしている風にたいぷしているふうに順に表示する事がじゅんにひょうじすることが出来ます。できます。 使い方 上部の Download リンクから zip ファイルをダウンロードして解凍すると、css ファイルと js ファイルが 1 つずつ含まれているのでそれを読み込みます。 jQuery プラグインですので、jQuery 自体は先に読み込んでおいて下さい。 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
RailsでAjaxリクエストが2回行ってしまうときにチェックすべき3つの事 - Qiita
1. jQueryを2回読み込んでいないか確認する Rails3.1からAsset Pipelineが導入されたため、誤ってjQueryを2回読み込んでしまっている、なんて事故が起こりがちなようです。 まず、application.jsでrequire_treeしているときに、assets/javascript直下にjquery.jsを配置していないか確認する。 上記を確認しても解消しない場合は、rake assets:precompileしたデータがpublic/assets以下にないか確認する。2回jQueryを読み込んでしまっていたスクリプトがそのまま残っているかも知れません。あったら削除してしまいましょう。 再発防止のためにconfig/environments/development.rbに以下のコードを追加しても良いでしょう。
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://daily.d3js.info/?p=296
finefinefine.jp
finefinefine.jp
