JQueriy スムーススクロールと Bootstrap との共存
JQuery でページ内リンクなどの場面でスムーススクロールを実現しようとする場合は、一般的には以下のようなコードを書きます。 $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); しかし、冒頭の a[href^=”#”] のクリックイベントが、Bootstrap での一部書式とバッティングして
よくあるページトップへボタンからbootstrapのtabを無効化されたお話
先日bootstrapのtabを実装していたのですが、tab部分がまったく動かなくなるバグに直面しました。 調べてみるとこの画面の右下にもある「ページトップへボタン」の挙動が原因であることがわかりました。 いざ直面すると結構厄介な罠だったので、備忘の意味も含めて文書に残しておきます。 bootstrapのtabってなあに？ ↓↓bootstrapのtabはこんなかんじの画面の要素です。↓↓ ※この例では、例えば9月分のタブをクリックすると9月分のデータが下の方に表示されるようなイメージです。 各タブのナビゲーション部分にはアンカー1)aタグでhref=”#hoge”のように設定するブツが設定されています。 ナビゲーション部分をクリックすると、アンカーとして設定されている要素をタブの中身として表示するような作りになっています。 この表示を切り替える処理は、bootstrapのtab.jsにて
スマホで閲覧時のみ、電話番号にtel:リンクを追加する - Qiita
やりたいこと スマホで見たときに、タップするだけで電話がかけられるように電話番号にリンクをはりたい。 でもPCで見たときはリンクさせたくない。 それを同じHTMLで済ませたい。 テキストだけでなく、画像でも同様にしたい。 ということで、JavaScript(jQuery)を使います。 →デモ jQueryで電話番号リンクを追加する <!-- テキストの場合 --> <p class="tel">00-1234-5678</p> <!-- 画像の場合は、alt属性に電話番号を入れておきます。 --> <p class="tel"> <img src="https://placehold.jp/150x150.png" alt="01-1234-5678"> </p> $(function() { $('.tel').each(function() { //.tel内のHTMLを取得 var
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Camera | a free jQuery slideshow by Pixedelic