You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC+スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます!! そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
jquery-1.10.2.min.js を読み込んでいるページで、jquery-1.10.2.min.map が 404 Not Found になっていることに気づいた。いろいろと調べてみると、拡張子 map はソースマップファイルで Chrome の拡張で読み込みを行うようだ。この現象は、圧縮したバージョン(min とつく方)を利用したときのみ発生する。調べたことをメモとして残しておく。 解決方法 以下のどちらかの方法で対処できる。本番環境に適用するのであれば、最初の方法がいいだろう。 圧縮された jquery のファイルを開き、「@ sourceMappingURL」の行を削除する。Version 1.10.2 の場合は、ファイル名は「jquery-1.10.2.min.js」か「jquery.min.js」だろう。2行目に以下の記述があるので、削除すればよい //@ sourceM
The jQuery Projects make use of Internet Relay Chat for user support and real-time project communication. Between 2011 and 2021, our channels were hosted on Freenode at chat.freenode.net. Current channels Looking for current communication channels? #jquery on Libera Chat IRC jquery/jquery on Gitter jquery/dev on Gitter jquery/meeting on Gitter jQuery on GitHub.com Search the Freenode archives Sear
This site is a static archive of the old jQuery Plugin Registry. New plugin releases will not be processed. The jQuery Plugin Registry is preserved for historical purposes. Search is still supported. We do not recommend using any versions of plugins from this registry. Please find jQuery plugins on npm.
.trigger()を使います。 例えばid=”sample”に対してclickイベントが登録されているとして、 $('#sample').on("click", function(){ alert("click!"); }); 以下のように書くことでイベントを発生させて、登録されている処理をおこなわせることができます。 $('#sample').trigger("click"); 他のイベントやカスタムイベントでも大丈夫。 $('#sample').on("USERCUSTOMEVENT",function(){ alert("click!"); }); $('#sample').trigger("USERCUSTOMEVENT");
通常のjQueryプラグインの定義では冗長になりがちな、イベント管理やサブメソッドの実装などなどをオブジェクト指向的にわかりやすく一貫性のある記述で実現できる(多分合ってる)、jQuery UIの$.widgetについての備忘録のようなものです。 はじめに まずは「jQuery UI 公式ページ」から.jsを入手します。 とりあえずのところは$.widgetが使えさえすればいいので、UI CoreのWidgetにだけチェックを入れてダウンロード。 ダウンロードした.zipにはjQuery本体も同梱されています。 テスト用に以下の環境を用意した想定で進めていきます。 ウィジェットの定義 jquery.test.myWidget.jsにウィジェットを定義していきます。 まずは以下のような即時関数パターンで、jQueryを引数に取って呼び出されるようにしておきます。 (function($) {
ナビゲーションがページ上部にしかない場合、ページが縦長になったとき、ページ遷移がしにくくなったりします。これを使いやすくする方法として、 positionプロパティを使用する方法などがありますが、jquery.scrollfollow.jsを使うともうちょっと簡単にできます。 導入方法 jQuery Scroll Followから必要ファイル「jQuery」「jquery.scrollfollow.js」「jQuery UI Core」「jQuery Easing Plugin」「jQuery Cookie Plugin」をダウンロードします。 ダウンロードしたファイルをhead内に読み込みます。 <script type="text/javascript" src="js/jquery.js"> <script type="text/javascript" src="js/ui.core
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
Jquery で一定範囲のみスクロールに追従させてみる。 2013 - 10 28 Category Web Comments 2 最近ちょくちょくいろんなサイトで見かける仕掛け。 基本は固定表示で、スクロールすると追従するってやつ。 自分もオシャレの一環として(?)←にあるSNSボタンに適用してみました。 見ての通り、記事が書かれている範囲のみスクロールに追従するようになっております。 当初、やり方はちょちょっと調べればすぐ分かるだろうと余裕こいてたら、紹介されてるのがだいたいスクロールすると無限に追従する系で、一定範囲となるとプラグインを使用したり、追加機能や事細かに指定してたりと「単純かつシンプルに一定範囲だけ追従させたい」自分としてはイマイチあわないということで考えてみました。 もし、このやり方が合うサイトを制作してる方がおりましたら、ご参考ください。 ただし、自分の文才がない+説
jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする方法を紹介します。 テーブルをソートするには、jQuery UI Soatableを利用します。 1.基本 まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。 サンプル サンプルのコード(抜粋)は次のとおりです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> $(function(){ $('tbody').sortable(); }); </script> <table> <thead> <tr> <
軽めのjQuery Advent Calendar 2012 16日目 Backbone.jsでattributesにオブジェクトを入れてハマった、っていうエントリーを書こうとしたら、ハマった僕を助けてくれたほかちゃんが先にBackbone.js Advent Calendarでエントリーを書きやがった書いてくれちゃったりしちゃったので、書くことがなくなった。 まあでも結局関連してるのって$.extend()のディープコピーだけなんで、あんまりよくわかってない人向けに書いておきます。書いてて結局これは誰向けの記事なんだろうと思い始めました。。 $.extend()って何ができんの 例えば $.extend(a, b) とかすると、aがbのこともできるようになります 。 具体的に var shino = { name: 'shino', age: 0, cry: function() { a
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
jQueryJavaScriptSampleDownloadでは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ「jQueryプラグイン」をメインに紹介する、Webクリエイター向け情報サイトです。
View Source $('#demo13, #demo14, #demo15, #demo16, #demo17, #demo18, #demo19, #demo20').jrumble(); // Demo 13 $('#demo13').hover(function(){ $(this).trigger('startRumble'); }, function(){ $(this).trigger('stopRumble'); }); // Demo 14 $('#demo14').toggle(function(){ $(this).trigger('startRumble'); }, function(){ $(this).trigger('stopRumble'); }); // Demo 15 $('#demo15').bind({ 'mousedown': function
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
「いろんなセレクタ指定方法+αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く