[B! jQuery] haza_nkのブックマーク

WordPressレスポンシブテーマのCSS編集に役立つ「現在のウィンドウサイズを表示する」スクリプト

WordPressでレスポンシブタイプのテーマのCSS編集をしている時、現在のウィンドウサイズを確認するために、Media Queries のブレイクポイント前後でブラウザ機能の「要素を調査」や「Firebug」などを使っていたのですが、複数の幅をリアルタイムに一度にチェックできたらいいなと思っていました。そこで、現在の画面サイズを動的に表示する簡単なスクリプトを作りましたので紹介します。動作サンプルブラウザの画面を横へ大きくしたり小さくしたりすると数値が変わります。 jQueryコードを設置以下のコードを header.php の一番下に張り付けてください。ウィジェットの「テキスト(任意のテキストや HTML)」に張り付けても動作します。 <div class="window_size">window</div> <script type="text/javascript">

haza_nk 2015/10/01

jQuery

リンク

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

haza_nk 2012/03/09

jQuery

リンク

simplelib with jQuery

1.simplelibとは simplelibとはjQueryを利用した様々なプラグインを動的にロードして、ウェブサイトを構築する上でよく使う機能を一元管理するためのツールです。各プラグインを別ファイルにし、必要なファイルだけをロードします。ダウンロードはこのページの一番下にあります。 2.プラグイン一覧現在以下のようなプラグインがあり、HTMLに１行追加するだけでこれら全ての機能を追加できます。 accordion

haza_nk 2011/06/28

リンク

jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。１）3D表示プラグインサンプルデモ今年のトレンドと言えば3D。というわけでこちら。まずはサンプルデモを確認。触ってわかる通りですが、2枚の画像が3D表示されます。呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;