jQuery
ハンバーガーメニュー(ドロワーメニュー)でページ内リンクをタップすると、ページ内の位置は変化するのですが、その上に展開しているメニュー(ハンバーガー)が閉じず、コンテンツが見えないという不具合に遭遇。 確認のためのデモページを用意する余裕が…
jQueryを使った文字列置換の例です。(割愛してますが、いずれの例もjQuery本体を先に読み込む必要があります) HTML要素の文字列を対象 <script> jQuery(function() { jQuery('.name_place').each(function(){ // 対象要素を指定 var txt = jQuery(this).html(); jQ</script>…
画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーのjQueryプラグイン「CarouFredSel」がとても便利だったので備忘録として残しておきます。(レスポンシブ対応でスマートフォンにも使えます) 高さが異なる要素にも…
レスポンシブWebデザインに対応したカルーセルスライダーを実現するjQueryプラグイン「slick」です。 配布元 kenwheeler.github.io 納品案件でも一度使いましたが、かなり使い勝手が良いです。 とくにブレイクポイントを指定して一度に表示するスライドの枚…
固定ページの本文を入力するテキストエリアを削除する例です。 どんなときに必要かというと、たとえば定型の情報をカスタムフィールドなんかで用意していて、そこだけを使う場合はフリーテキスト用の本文入力エリアが不要だったりします。 納品後、クライア…
ブラウザのウィンドウサイズで判別して読み込むjsファイルをスマートフォン、 PCで振り分ける。 実装例はATOMSさん。 atoms-inc.com ページ読み込み時にふわっと内容を出現させる別のjsが、なぜかスマホサイズだと(折りたたみハンバーガーメニューと干渉し…
ブロック要素の高さを揃える(合わせる)のに大変便利、重宝しているjQueryのライブラリです。 *to-Rさんのこちらで詳しく紹介されています blog.webcreativepark.net すでに多くの紹介記事がインターネット上にはあるので「今更」感はありますが、自分用の…
jQuery Masonryを使っている場合、このメソッドの実行前に画像をすべて読み込んでおくようにしておいたほうがよかったりする。と思います。たぶん。 自分がやってみたものだと、これをしてないとSafariやChrome(webkit系ブラウザ)で、たまにボックス(タイ…
グリッドレイアウトで要素をタイル状に敷き詰めるのにjQuery Masonry(NHKスタジオパークで知名度がグンと上がったあれですね)を使って実装を進めてたんですが、自分の設定がうまくないのかWebkit系ブラウザ(とくにSafari)で表示が崩れてしまい、その原因…
動画(YouTube)をモーダルウィンドウでポップアップ表示させる必要があったので、そのメモ。 使ったのはlightboxクローンのjQueryプラグイン「prettyPhoto」です。 www.no-margin-for-errors.com ライセンスはCreative Commons Attribution 2.5ということで…
アメブロ(Amebaブログ)のfeedを取得して別のサイトに表示しようとすると何件かに一件「PR」という広告記事が混在します。これを表示させたくないという依頼が多くはないまでも、なんだかんだで一年に何回かあるので備忘録として残しておきます。 これまで…