すたらブログ

文系Webプログラマの備忘録

jQuery

jQuery: ページをスクロールすると途中でスライドダウンするfixedなグローバルナビの例

初期状態で設置されているグローバルナビがスクロールで見えなくなると、別のグローバルナビがページの上部にfixedで固定される、という表示を目指します。 jQueryの.slideDown()、.slideUp()を使えば簡単に作れます。 デモ: https://sutara79.github.io/dem…

はてなブックマーク数表示付きリンクを取得するツールを公開しました

デモ: https://sutara79-php.herokuapp.com/demo/get-link-with-hatena-bookmark/ GitHub: https://github.com/sutara79/get-link-with-hatena-bookmark URLを入力すると、 コードが表示されます。 実際の表示の確認もできます。 自分自身がブログ記事作成で…

jQuery: slideDown,slideUpを確実に動作させる

目次 症状 私の解決策 記述例 解説 メニューを閉じる メニューを開く 症状 メニューの表示・非表示を切り替える際にslideDown(), .slideUp()を使っていますが、滑らかにアニメーションせずに.show(), .hide()と同じように瞬時に切り替わってしまいます。 Goo…

jQuery: CSVから商品リストを作成し、合計金額を計算するサンプル

CSV形式の商品一覧をAjaxで読み込んでHTML内に注文表として表示し、ユーザーの入力に応じて合計金額を算出するサンプルです。 jQueryプラグインの形式にしました。 (2015年8月31日) jQueryプラグイン: jquery.csv-calc デモ: sutara79.github.io/jquery.csv-…

jQuery: bxsliderでPCとモバイルで表示する画像を切り替えたい

A型事業所でのWebサイト制作で、bxsliderというjQueryプラグインを利用しています。 その際、「PCビューとモバイルビューとで、スライド画像の中身を変えてほしい」と指示されました。 PCビューでは16:9の比率、モバイルビューでは4:3の比率の画像を使いたい…

jQueryプラグイン: サイトマップを元にパンくずリストを自動生成する

jquery.breadcrumbs-generator Demo GitHub 特徴 サーバサイド言語は使いません。 逆に言えば、サーバサイドでパンくずリストを作れるならば、このプラグインは必要ありません。 HTMLページ中のサイトマップを元に自動生成します。 経緯 職場のローカル環境…

自作のプラグインをjQuery Plugin Registryに登録する

2014年8月7日現在の方法です。 全体の流れ GitHubでjQueryプラグインを公開する。 GitHubへのpushをPlugin Registryにも通知させる設定を行う。 Manifest Fileを作成し、レポジトリに追加する。 "git tag"にバージョン番号を記載する。 完了。GitHubへpushす…

JavaScriptで追加したスタイル指定を削除して元のCSSの指定に戻す方法

結論 jQueryでも素のJavaScriptでも、空文字''を代入すればいいようです。 例 CSS #foo { width: 20%; } jQuery // スタイル指定する $('#foo').width('100%'); // 元のCSSの指定に戻す $('#foo').width(''); JavaScript // スタイル指定する document.getEl…

jquery.simpleScrollFollow: 画面スクロールに合わせて特定の要素を移動させるjQueryプラグイン

version: 3.1.1 (2017-10-29) デモ: https://sutara79.github.io/jquery.simple-scroll-follow/ GitHub: https://github.com/sutara79/jquery.simple-scroll-follow 特徴 指定するオプションがほとんどない、とても簡素なプラグインです。 基本的には、limit…

jquery.semiResponsive: 適用するCSSファイルを自動または手動で切り替えるjQueryプラグイン

version 1.0.1 (2014-06-22) GitHub (ソースコード) JSDoc (APIドキュメント) デモ 特徴 普通のレスポンシブデザインと同じく、ある画面幅を境にしてPC用、スマホ用それぞれのCSSを適用させることもできます。 また、画面幅に関係なく任意のCSSに固定するこ…

jQuery: キー押下中の移動速度を任意に設定するサンプルを作りました

たとえば、上下キーで項目を選択する処理をjQueryの".keydown()"で作成するとします。 キーをちょこんと1回押すのではなく、ずっと押しっぱなしにしていると、かなりの速度で選択項目が移動してしまいます。 それを任意の速度に調整するためのサンプルを作り…

JavaScript: abort()の動作を勘違いしてました

abort()メソッドでAjaxを中断する動作について。 勘違いしていたこと サーバの処理も中断される。 よって、サーバの負荷の軽減に役立つ。 実際は JavaScript側でサーバからの返信を受け取らなくなるだけ。 サーバ側のことは知ったこっちゃない。 W3Cの仕様書…