Slideout.js - A touch slideout navigation menu for your mobile web apps.
$ npm install slideout $ bower install https://github.com/mango/slideout.git $ component install mango/slideout 1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. <nav id="menu"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main> 2. Add the Slideout.js styles (index.css) in your web application. body
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
jQuery 3.0時代のコーディングお作法 / 廃止メソッド編
jQuery 3.0時代のコーディングお作法 / 廃止メソッド編 本エントリーは「to-R JavaScript Advent Calendar 2015」2日目のエントリー、現在α版が公開されているjQuery 3.0時代のコーディングお作法について解説を行います。 あくまでα版を元にした情報になるので注意してください。 前回はブラウザサポートやshow()/hide()の扱いに関して解説しましたが、今回はjQuery 3.0で廃止されるメソッドと廃止されたメソッドはjQuery 3.0ではどのように記述すれば動作するかについて解説を行います。 廃止されるメソッド一覧 jQuery 3.0で廃止が予定されているメソッドは以下のメソッドです。 .success() .error() .complete() .load() .unload() .error() これらは廃止されてしまいますが
jQueryは有害なのか | POSTD
ずっと「～は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました（もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう）。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！ | unitopi - ユニトピ -
はじめまして、 unitopiさんの下でライターをさせていただくことになりました、chikurinです。 どうぞよろしくお願い致します。 今回、Javascriptの関数パターンを2種類ご紹介させて頂きます。 関数とは・・・タスクや値の計算を実行する文の集まりである MDN Javascriptガイド jQueryやそのプラグイン、他の人が書いたJavascriptコードを見ると、 ①②のような書き方にでくわしたことはないでしょうか？ ① var [変数名] = function (){...}; ② (function(){...})(); ※...は、処理内容を表します。 ここでは、こうした書き方を1つずつご説明したいと思います。 まず、①の書き方は「無名関数」と呼ばれます。 何故このような書き方になるのか、 関数の書き方をおさらいしつつ考えてみましょう。 Javascriptの関数は
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
[jQuery] ドラッグ&ドロップをカンタン実装！【はじめの一歩編】
jQuery カンタンなToDoリストです。左のリスト項目をドラッグして右のエリアにドロップしてみてください。色が変わって、チェックマーク（✓）も付きます。チェックマークをクリックすると登録したToDoリストが消えます。 今回はこのドラッグとドロップをどうやって実装するか、を説明します！ 【要素をドラッグさせる】のは超簡単！ まずはjQueryUI！ 素のjQueryだけでは難しいので、jQueryUIというものを適用します。といってもやり方はhead内に以下を記述するだけです。 [html] <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"> <script src="//ajax.googleapis
![[jQuery] ドラッグ&ドロップをカンタン実装！【はじめの一歩編】](https://cdn-ak-scissors.b.st-hatena.com/image/square/1942b0a335d20107c43128fcfa999fca6049b976/height=288;version=1;width=512/http%3A%2F%2Flogic-a.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F08%2Fdrag_drop1.jpg)
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法 - みかづきブログ その3
iPhone用のサイトをコーディングしているとき、 document や body にクリックイベントを設定してもイベントが発火しないという現象に陥ったことはないでしょうか。 ざっと調べてみるとどうやら、document、bodyにはクリックイベントが設定できないようです。 ただし、イベントの伝播を使えば発火させることはできるようで、クリックイベントを持った子要素をクリックすることで、documentやbodyに対してのクリックイベントを発火させることができます。 (function(win, doc) { "use strict"; doc.querySelector("div").addEventListener("click", function() { alert("div"); }, false); doc.addEventListener("click", function()
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 - ONZE
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法［Infi
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
株式会社コアテック | 404 Not Found
お探しのページが 見つかりませんでした 申し訳ございません。リンクに問題があるか、 ページが削除された可能性がございます。
スマートフォンブラウザのjQuery Clickイベントに関すること - くらげだらけ
最近、はてなブックマークで「スマートフォンブラウザ不具合特集」というのを見つけました。知らなかったのもいくつかあったのですごく参考になりましたよ。 特にAndroid系は私も認識していないことが多いので、その辺りをきちんと見てる人はすごいなぁと思います。 ３年前ぐらいに比べると、あっという間にAndroidが多機種化してきて、あっという間にガラケーチェック時代っぽくなりましたね。ため息が出ます。。。 去年の秋ごろに私が書いたエントリーの「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」でも、iPhoneで上手くいかない事例について少し触れていました。 iPhoneだとLabel要素をタップしてInput要素（例えばチェックボックスなど）を操作できないというものです。 この解決方法はlabel要素に空のonclick属性をつけることで解決
3D Spin Rotate & Zoom 360 product viewer Javascript jQuery VR Objects 360° Reel
AJAX-ZOOM - 360°/3D Spin & Zoom JavaScript player - "Responsive Ready!" Notice: you can remove, adjust, reskin or replace the not necessary toolbar above with a different one, that display over the 360-viewer. Do not pay attention to the design or control elements. Everything is adjustable via 400+ configuration parameters, CSS, and API. Modules / Extensions You do not need the AJAX-ZOOM modules,
FlexNav – Jason Weaver
A jQuery plugin for responsive menus FlexNav 1.3.3 jQuery plugin is no longer supported. I have plans to make a non-jQuery version 2 soon.
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gallery redirect
Loading...
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報