jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
脱jQuery Tips Advent Calendar 2015 - Adventar
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
jQueryのカスタムイベントはどこにバインドさせるべきか - Kokudoriing
例えばサイドバーのアニメーションを促すカスタムイベントを使う場合。 サイドバーにはいろんな機能があるとして、専門のサイドバーオブジェクトを作ったとする。 でも $('#sidebar').on('click', function() { /* */ }) とすると保守がしんどい。 この場合、$('#sidebar').trigger('onRequestAnimation') とするべきか、 $.project.sidebar.trigger('onRequestAnimation') とするべきか。 後者の場合はシングルトンが前提になっている。 なので、サイトにサイドバーが2つ以上必要になった場合に破綻する。 そして安直にこの問題を避けるとこういう感じになる。 (function($, undefined) { $.project = $.project || {}; $.project
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
jQueryで独自イベントを作るよ - @thorikiriのてょりっき
独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。 それをやってみようってことですね。 パターン１：イベントオブジェクトにパラメータをセットする eventsample.js（ライブラリ側） (function($) { // ボタンをクリックしたらイベントを発火させる // こんな程度ならクリックイベントで実装した方が早いわけだが・・・ $('#button').click(function(ev) { // イベントオブジェクトを作る。イベント名と、パラメータを設定する。 var event = new $.Event('hoge', {color: 'red', message: 'Yes!!'}); // イベントを発火させる $('div').trigger(event); }); })(jQuery); eventsample.htm
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryプラグインをうまいことカプセル化する設計方法-jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 [2011.02.02追記] 2011年はsub()方式がおすすめです。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($)
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEで
Jquery ウィンドウサイズに合わせた画像スライドショーの作成（リサイズ対応版） | Stronghold Archive
前回 “Jqueryでウィンドウサイズに合わせた画像スライドショーを作成” からの続きです。 前回の記事ではリサイズに全く降れていなかったのでちょっと変更 ・横幅100％の画像をスライドショーさせる ・（追加）ウィンドウ幅をリサイズ（縮小）して高さまで極端に小さくなるのを回避 コード 自分用でもあるので下記一気にコピペ！！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!– links –> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <!– close.links –> <title>title</t
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryでモーダルウィンドウを作成。 | Almondlab
（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
IE6 position:fixed の諸問題を解決するjQueryプラグイン - exFixed.js｜studio-benkei[スタジオベンケイ]
Cyokodog::DiaryさんのエントリーでIE6 position:fixed の諸問題を解決するJSが紹介されていました。 これは便利です。管理人も早速使用しています。 使い方 まずはjquery.jsとexfixed.jsをダウンロードし下記順で読み込みます。 jquery.js exfixed.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="exfixed.js"></script> 下記のようにfixedのCSS定義をし、対象要素に対しexFixed()メソッドを実行するだけでOKです。 <style> #sample{ position:fixed; width:40%; height:40%; right:10%; bottom
jQueryでスムーススクロール [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
osx inertia · Issue #36 · jquery/jquery-mousewheel
https://qiita.com/ANTON072/items/944127a5ec2bda415487
http://web.donnatokimo.com/jquery/517
jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture