ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

jQuery

ページ内遷移するとドロワーメニューが閉じない@jQuery

ハンバーガーメニュー(ドロワーメニュー)でページ内リンクをタップすると、ページ内の位置は変化するのですが、その上に展開しているメニュー(ハンバーガー)が閉じず、コンテンツが見えないという不具合に遭遇。 確認のためのデモページを用意する余裕が…

テキスト、またはinput要素のvalue値を指定した文字列置換(あるいは削除)@jQuery

jQueryを使った文字列置換の例です。(割愛してますが、いずれの例もjQuery本体を先に読み込む必要があります) HTML要素の文字列を対象 <script> jQuery(function() { jQuery('.name_place').each(function(){ // 対象要素を指定 var txt = jQuery(this).html(); jQ</script>…

スマートフォン対応のカルーセルスライダー「CarouFredSel」@jQueryプラグイン

画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーのjQueryプラグイン「CarouFredSel」がとても便利だったので備忘録として残しておきます。(レスポンシブ対応でスマートフォンにも使えます) 高さが異なる要素にも…

レスポンシブ対応のカルーセルスライダー「slick」@jQuery

レスポンシブWebデザインに対応したカルーセルスライダーを実現するjQueryプラグイン「slick」です。 配布元 kenwheeler.github.io 納品案件でも一度使いましたが、かなり使い勝手が良いです。 とくにブレイクポイントを指定して一度に表示するスライドの枚…

固定ページにおいてデフォルトの投稿エリアを削除する@WordPress

固定ページの本文を入力するテキストエリアを削除する例です。 どんなときに必要かというと、たとえば定型の情報をカスタムフィールドなんかで用意していて、そこだけを使う場合はフリーテキスト用の本文入力エリアが不要だったりします。 納品後、クライア…

レスポンシブ(スマフォ対策)向けのJSの振り分け

ブラウザのウィンドウサイズで判別して読み込むjsファイルをスマートフォン、 PCで振り分ける。 実装例はATOMSさん。 atoms-inc.com ページ読み込み時にふわっと内容を出現させる別のjsが、なぜかスマホサイズだと(折りたたみハンバーガーメニューと干渉し…

ブロック要素の高さを揃える(レスポンシブ対応)@jQuery

ブロック要素の高さを揃える(合わせる)のに大変便利、重宝しているjQueryのライブラリです。 *to-Rさんのこちらで詳しく紹介されています blog.webcreativepark.net すでに多くの紹介記事がインターネット上にはあるので「今更」感はありますが、自分用の…

Masonryを使う際にわりと大事なimagesLoadedプラグイン@jQuery

jQuery Masonryを使っている場合、このメソッドの実行前に画像をすべて読み込んでおくようにしておいたほうがよかったりする。と思います。たぶん。 自分がやってみたものだと、これをしてないとSafariやChrome(webkit系ブラウザ)で、たまにボックス(タイ…

MasonryからFreetile.jsに変更@jQuery

グリッドレイアウトで要素をタイル状に敷き詰めるのにjQuery Masonry(NHKスタジオパークで知名度がグンと上がったあれですね)を使って実装を進めてたんですが、自分の設定がうまくないのかWebkit系ブラウザ(とくにSafari)で表示が崩れてしまい、その原因…

YouTube動画をポップアップ @jQueryプラグインprettyPhoto

動画(YouTube)をモーダルウィンドウでポップアップ表示させる必要があったので、そのメモ。 使ったのはlightboxクローンのjQueryプラグイン「prettyPhoto」です。 www.no-margin-for-errors.com ライセンスはCreative Commons Attribution 2.5ということで…

画像の読み込みを遅延ロードさせる@jQuery-Lazy Load

htmlページ内の画像(img要素)を遅延ロードし、HTTPリクエストを減らして読み込み速度のパフォーマンスを向上させるのにjQueryプラグインのLazy Loadを使ってみました。久しぶりにこれ系(遅延ロード)のものを探したら、なんでも問題が解消されてるようで…

アメブロの「PR」投稿を非表示@jQuery || mootools

アメブロ(Amebaブログ)のfeedを取得して別のサイトに表示しようとすると何件かに一件「PR」という広告記事が混在します。これを表示させたくないという依頼が多くはないまでも、なんだかんだで一年に何回かあるので備忘録として残しておきます。 これまで…