横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた｜わざログ｜ うずまきブログ｜ 名古屋のホームページ制作／印刷物デザイン 株式会社うずまきデザイン
ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。 長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版 巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト（*右画像）など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。 今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jS
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
demo003 - Any Height Grid Example | jquery.vgrid.js
hoge fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga piyopiyo
jQueryの.offset() を使うとiPhoneやiPadでずれるバグを解消したい - ハリーかつき・旧技術ブログ
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります 改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetId01').offset(); var y = offset.top; scrollTo(0,y); }); }); 改善後 $('.anc').click(function(e){ e.preventDefault(); var y = document.getElementById('targetId01').offsetTop; scrollTo(0,y); }); });
jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
郵便番号から住所を自動入力する操作性が世界一簡単なZipAddr
Top デモ 仕様 利用方法 拡張方法 拡張(有償) 更新履歴 お問い合わせ **【特記事項】*************************** 2024.3.9 * * (1)動作テストに関して（郵便番号は4380078を使用） * ガイダンス画面から七軒町が選択できること。 * ※ガイダンス画面を非表示にするサイトを見かけます。 * * (2)@ZipAddr_xx部分を非表示にしたい場合 * https://zipaddr.com/payment/ の拡張拡張(有償)の(3)を参照下さい。 * * (3)WPプラグイン zipaddr-jp は常に最新の状態にして下さい。 * 自動更新の設定を、「自動更新を有効化」にすると便利です。 * ************************************************** ◎利用数：51,123 サイト ◎本
チラ見せしちゃうJavaScript「Page Peel」
twitter facebook hatena google pocket 最近チラッと広告やコンテンツを見せて興味を喚起するサイトがあります。 jQueryプラグインの「Page Peel」はそれを実現してくれるJavaScriptです。 sponsors 使用方法 Page PeelからjQuery.pagePeel.jsなどファイル一式をダウロードします。 ※psdやflaファイルまで入っています。 さて、これらを以下のように記述します。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jQuery.pagePeel.js"></script> <script type="text/javascript"> $().ready(
レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 > DEMO > DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込
jQueryによる要素の存在チェックまとめ
jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
【jQuery】.on() の使い方（jQuery1.7～） at softelメモ
jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ？では使ってみましょう。 １、$(セレクタ).on(イベント, 関数) セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。 = .bind() ですね。 「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。 example $('#example-button').on('click', function(){alert('clicked!');}); Demo デモ – $(セレクタ).on(イベント, 関数) ２、$(document).on(イベント, セレクタ, 関数) do
[jQuery] グルーポン系サイトでよく見掛けるカウントダウンタイマーのサンプルコード
jQueryで、グルーポン系サイトでよく見掛けるカウントダウンタイマーを実装しようと、プラグインを探していたのですが、百式さんのライフハックにプラグイン無しでも簡単に実装できそうだったので、一部書き換えてご紹介します。 ・元ネタ：グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる | IDEA*IDEA ■ 元のコード ■ カスタマイズ（日／時／分／秒 表記） 以上です。 ■ カウントダウンタイマーを実装する方法の紹介記事 その他、JavaScript/jQuery で、カウントダウンタイマーの実装について書いてある記事。 ・jQuery Countdown ・jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。 ・jQueryで時間をカウントダウンするJavaScript「jCountr」｜skuare.net
Thickboxをドラッグ可能にしてユーザビリティを向上させる :: 5509
ThickboxとかLightboxでコンテンツや写真を表示するとすっきり見えていいですよね。 でもあのボックス自体が邪魔なときないですか？ちょうど比較したいコンテンツの上に表示されたり… jQuery UI Draggableを使ってドラッグできるようにしてしまいましょう。 これだけのためにわざわざDraggableを…とかそういうのは抜きにしてドラッグできると結構便利です。 しかもUI Draggableを使えばあっという間にドラッグできるようになります。 …便利じゃないですか？(今回はThickboxを対象にしてます) サンプル サンプルファイルのダウンロード Thickboxをダウンロードする http://jquery.com/demo/thickbox/ から一式をダウンロードするか、サンプルファイルに全て入ってるのでそれをダウンロードします。 jQuery UI Dragga
flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです - pig's diary
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！ 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ
jQuery 1.6のpropメソッド - NullPointer's
1.6で prop というメソッドが出来たそうだよ。 John Resig - jQuery 1.6 and .attr() 英語よく分からんが、http://api.jquery.com/prop/ 等も読んでみると、どうやらこういう事らしい。たとえば <input type="checkbox" id="a" checked="checked"> に対して $("#a").attr("checked") という操作が可能だが、この操作で取得される値はなんだろうか？ HTML属性値として checked という文字列が返るのか、DOMプロパティとして true という真偽値が得られるのか良く分からない。これを厳密にわけるため prop メソッドが追加された。 jQuery1.5以前では $("#a").attr("checked") // => true jQuery1.6では $("#
jQuery親要素、子要素、兄弟要素取得のまとめ
※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。 条件を入れると、条件にあったものだけが取得されるようになります。 例：$(elem).parent("div.class-name, #id"); 通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法 ■親要素の取得 □parent([条件]) 親要素の取得。 すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。 $(elem).parent("div"); 親要素がdivだったら親要素が取得できる。divじゃなければ空。 □parents([条件]) parent()と違い親より上の先祖要素までさかのぼる。 $(elem).parents(".class-name"); class-nameというクラス名がついた先祖要素のみ取得 □clos
DOM要素の属性：クラス｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
addClass(class)〔要素に指定したクラスを追加〕 hasClass(class)〔要素が指定したクラスを持っているか判定〕 removeClass([class])〔要素からクラスを削除〕 toggleClass(class)〔要素のクラスを切替〕 toggleClass(class, switch)〔要素のクラスを切替〕 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" co
[jQuery]jQueryを使って画像をいろいろやってみる | Magicalog
いろいろといっても、基本中の基本かもしれないですが・・・。 画像の幅属性を取得する 画像の幅属性を取得し、何かするには以下のようなかんじで。 jQuery("img").each(function(){ var width = jQuery(this).attr("width") ; }) ; 画像の高さ属性を取得する 画像の高さ属性も幅属性を取得するのと同じように出来ます。 jQuery("img").each(function(){ var height = jQuery(this).attr("height"); }); 画像につけられたクラス名を取得する 画像だけに限らず、要素に当てられたクラス名を取得するには以下のような感じです。 jQuery("img").each(function(){ var class = jQuery(this).attr("class"); }) ;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.ad-a-type.com/engineers/?p=5
Parallax Slider with jQuery